Company Design System Foundation
Overview
Building a Design System for Efficiency and Collaboration
Information for the product team was documented in various ways and scattered across different platforms, making it difficult to find and hampering cross-departmental collaboration.
To improve this, we developed a new, intuitive design system that supports the team, simplifies workflows, and enhances communication between designers and developers.
My Role
UX Designer/Researcher
Duration
4 months
(May - August, 2022)
Company
Paycom Payroll
Key Users
Developers, Designers, Project Managers
Design System
A unified language between product team
A all-in-one place for design resources
The Goal
Increase efficiency and the ease of communication
😵💫 The company had four separate design systems used by designers and developers. Each system was built independently by different teams, resulting in variations in the languages used and in the documented rules. This furthermore neglected the needs of project managers, leaving them in confusion.
🥳 The new system unifies the design languages and rules into a single, easily accessible platform for all three user groups. Designers and developers can now link to external resources they need with a single click.
Before
After
Simplifying component discovery and usage
Boosting efficiency and streamlining workflow
Bridging communication gaps due to disjointed language across design team
01 The Struggles
Finding users' needs through interviews
By conducting over 20 interviews with users and stakeholders, we identified the issues with the current system and determined the users' expectations and needs for the new system. Here are some of our findings:
Poor documentation make finding reliable information difficult.
"I feel like 85% of the time I can never find what I need. Because it's always a rabbit chase of let's go to the decisions page and all this random documentation before I can truly find a standard that I feel confident" -- Designer
"The poor documentation of components cause me having to ask other more senior people for answers which slows down my workflow." -- Developer
"Sometimes there were property missing on React, my team will misused the components" -- Developer Lead
Existing information is not discoverable.
"I will [use search bar of Confluence] a lot, because most of the time I know I will be taken somewhere funny. I will specify which space I want to look in, or contributor... those are what I use to narrow down the search." -- Designer
"Finding what you need is very difficult. If we are trying to understand standards of breadcrumbs, they would be landing here with a bunch of screenshots. There's no relationship between (search and result)." -- Designer
"Devs do not explicitly receive names of what the components are and they have weird names so searching for them can be difficult." -- Developer
The need of having an user inclusive design system to bridge communication gap.
"Dev and designer don’t have a centralized understanding on how our components work." -- Designer
"The design systems are not consistent which makes it difficult to find things" -- PM
"We cannot let people just come in and grab whatever they need, the physical space we have is limited." -- Staff
02 Learn from the Comparatives
Conduct Usability Testing on Comparative Systems
This is a usability test toward the comparative systems of Paycom, which includes: Atlassian, Lightning, and Canvas.
There are 6 participants in this test, includes 2 designers, 2 developers, and 2 project managers. Each participants will have to complete 4 tasks on 2 different systems. We set two groups of tasks based on the purpose and function each users group need on a design system.
The "Do"
Most users also had higher confidence using Lightning and performs better using it.
.png)
Layered Info Architecture
Different levels of navigation and groupings help them to complete the searching faster.
Accurate Search Results
The accuracy of search results affects the speed drastically at which users complete tasks.
The "Don't"
Atlassian caused more user struggles due to its excessive and complicated functionalities.
.png)
Unresponsive Components
Without adjustable features, users find it difficult to visualize how the component will look like.
Feature Overload
Providing more than users need can be overwhelming, bringing back the struggles they experience with Confluence.
A design system isn't a one-size-fits-all solution; it varies between companies.
Understanding how people work together and their preferences is crucial for creating a design system that best suits their needs.
03 Design Requirements Highlights
To minimize project completion effort and time...
We define several design requirements to overcome user pain points and bring in their needs.
Here I will focus on three highlights of them.
Intuitive Searching
Most users prefer to use the search bar rather than browsing directly through the system when they are certain of thier needs.
Tagging System and Predictive Search
Navigation for Uncertain Searches
When users are unsure of what they want or can't find it through search, they will browse through the system to locate it.
Rebuilt Info Hierarchy
Instant Feedback Flexibility
Flexible for testing, allowing immediate and convenient visibility of changes to the components.
Playroom
04 Building the Information Architecture
Card Sorting + Treejack Testing
This data informed the creation of an initial information architecture. Cards that were often grouped by participants form darker blue groups on the right edge.
The top-level navigation sorting as image shown: Overview, Foundations, Components, Patterns, Dev Guide, Content Guidelines
We conducted two rounds of treejack testing using optimal workshop, provided insight into user navigation within the information hierarchy we design. For example, Task 3 successfully demonstrated user comprehension of a specific section, indicating an intuitive structure.
Building on research highlighting deficiencies in the current component page, I explored various wireframe iterations to optimize the user experience. The primary goal was to create a component page that empowers users to:
- Understand: Clearly grasp the purpose and functionality of each component.
- Comprehension: Facilitate a deep understanding of component usage through clear explanations and examples.
- Usability: Enable users to effectively implement components in their projects.
Next Steps: Collaboration and Refinement
These initial wireframes served as a springboard for further discussion and collaboration within the team. By sharing and iterating on our individual ideas, we could arrive at the most effective design for the component page, ensuring it caters to user needs and promotes efficient component utilization.
- Home Page
- Component Landing Page
- Individual Component Page
- Search & Search Results Page
This usability testing iteration yielded valuable insights that complemented the feedback received during the wireframe review. For example, user feedback revealed that the "View More" button on the search results page was perceived as visually distracting.
This discovery highlights the importance of testing with mid-fidelity mockups, which provide a more realistic representation of the final product and can reveal usability issues that might be missed in earlier stages.
Mid-fidelity mockups, with their added detail, bridge the gap for engineers and non-designer PMs, fostering a smoother handoff and informed feedback.
- Predictive Search: This functionality anticipates user queries, suggesting relevant components and information as they type, saving them time and effort.
- Filter Chips: Faceted navigation allows users to refine their search results based on specific criteria, facilitating a more targeted search experience.
- Grid & List Views: The ability to toggle between grid and list layouts caters to user preferences when browsing large categories of components.
- Categorized Search Results: Search results are grouped by category, enhancing organization and information discovery.
- Visual Results: Including visual previews alongside search results provides users with a clearer understanding of each component.
These features were well-received during user testing, demonstrating their effectiveness in helping users find what they need quickly and efficiently, regardless of their prior knowledge of the design system.
Our research revealed a critical need for improved component documentation. Over 90% of user interviewees expressed frustration with the current system's disorganized documentation, hindering their workflow.
A Solution-Oriented Approach:
The new design system offers a standardized structure for component documentation. This ensures consistency and simplifies the process for content contributors. Additionally, based on design review feedback, we implemented a tabbed interface for breaking down content, further enhancing usability.
Improved User Experience:
By providing clear, consistent, and well-organized documentation, we empower users to effectively understand and utilize the design system's components, ultimately streamlining their design and development processes.
Building Skills and Collaboration
As my mentors pointed out, I possess strong wireframing and prototyping skills. However, this internship allowed me to delve deeper into research and design leadership. Leading fellow interns on research and design tasks further honed my teamwork and communication abilities.
Gratitude and Appreciation
I am incredibly grateful to my mentors, Nathan, KP, and Ryan, for their guidance and support throughout the internship. Their expertise has significantly contributed to my professional development. Additionally, I would like to express my sincere appreciation to the intern team, Chloe, Vaishvi, and Hiba. I truly enjoyed collaborating with all of you, and I will miss our time working together.
