Sprout: Reimagined and Inclusive Design System
Experience Design, User Research, Product Design
Summer 2022
Collaborators: CC / VD / SL
Sprout is a design system intended for in-house users of an American online payroll and human resource technology provider based in Oklahoma City.
UX Techniques Used
-
Competitive Analysis
-
User Interviews
-
Competitive Usability Testing
-
Heuristic Evaluation
-
User Persona
-
User Flow
-
Information Architecture (Card Sort, TreeJack, etc)
-
Wireframing and Prototyping
-
Usability Testing and Iteration
My Role
-
UX Researcher
-
UI/UX Designer
-
Branding Design
Tools Used
-
Figma
-
Optimal Workshop
-
Microsoft Word and Excel
-
Confluence
Problem Statement
The current design system fails to deliver an overall positive user experience.
​
The component documentation that teams currently reference lives in disparate systems. What that means is that Separate teams own and manage these sets of documentation with different methods.
This separation leads to misunderstandings about the components, design patterns, and foundational guidelines. Users have difficulty discovering components and patterns. It also makes it challenging for contributors to keep documentation up-to-date and consistent.
Currently utilized by the Product and Development teams, the system does not make project completion efficient or accessible, which is crucial to a company like Paycom, who delivers products that better the lives of employees.
Goal Statement
The new design system should be a design tool that makes finding, understanding, and utilizing components for both designer and developer projects easier and more efficient while helping to facilitate conversations between design, development, and product managers.
​
Learning Opportunity
This project is a perfect opportunity for us to explore an intricate design system, research about existing systems and company outlook, and create exciting and intimate learning relationships throughout the project timeline. Creating a holistic design system that effectively serves a purpose to Paycom’s teams allows us to gauge a true professional experience while building business and technical knowledge.
Our process went about researching about existing systems and our current system, we followed the premis of three main questions:
-
What is a good design system?
-
How is our design system?
-
How can our system become a good system
01 Understand
This system needs to provide a single source of knowledge for design principles/foundations, design components and their usage, design patterns and their implementation, development specifications and the properties available.
These current set of systems are utilized by the product design and development team.
We envision a single system utilized by the entire company as a source to understand what our products are made of, how we speak to our products, and a source for onboarding new employees into our systems and products. experience with Paycom products.
Design System Audit
Opinion on Design Systems’ Performance
We have audited Paycom's design systems (consisted of Confluence Design System, Figma Components Library, and React UI Library) as of June 24th, 2022.
02 Observe
User and Stakeholder Interviews
Interview Overview
​
Our team generated a set of interview questions that would help us better understand the product-human interactions and where the design system’s flaws stood. The interviewees included product designers, developers, and stakeholders.
Interview Goals
The interviews aimed to not only better understand our current system but discover opportunities where we can expand and centralize usage in this new design system. Below are the goals for the two types of interviews we conducted:
Our interviews aimed to understand and better:
Stakeholders
-
The current workflow of design system users out
-
The methods in optimizing their workflow
-
Identify appropriate users and expand user types
-
Ensure we meet Paycom’s business goals
-
The stakeholder’s current attitudes toward system
-
The company’s expectations and needs of new system
-
Identify pain points of stakeholders as well as users that the stakeholders are aware of
Users (Designers and Developers)
-
The general working process of designers and developers
-
How designers and developers use design systems
-
Identify the pain points of using current systems
Interview Findings
The interviews demonstrated that the current design system that P--- utilizes fails to meet user needs, supporting our intentions in creating a new system.
After interviews with 20 employees, we discovered that the main problems user run into are poor unorganized information arhcitecture, existing information is not discoverable, and flawed working process. We also found that interactive visuals of the system helps users find what they need more easily. In the new system, the users demonstrated that they would like a centeralized system with well documentation.
Zoom Interviews Preparation Session with Product Design Interns
Zoom Interview Session with Stakeholder Screenshot
Here the stakeholder walks us through their main problems when navigating the design system.
Design System Pain Points
-
Documentation
-
Disorganization
-
Findability
-
Reliability
-
Information inconsistency
-
Gaps in communication
New Design System Needs
-
A centralized system
-
Provides examples of component usage
-
Clear Information Architecture
-
User Inclusivity
-
Serve as an educational tool
Competitor
Usability Testing
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, 1 developer, and 2 project manager, which are the main target user groups of the project we are currently working on. Each participants will have to complete 4 tasks on 2 different systems.
We generated the tasks based on the findings of our previous users interviews. This usability test aimed to find how users interact with comparative products, gather unbiased user opinions toward deisng system, and to excavate possible solutions to the issues users met in Paycom's design system.
Usability Testing Goals
The usability tests furthered our research process by comparing existing design systems. Users were tasked with a set of four tasks that aimed to help us figure out their working processes while navigating different design systems.
Our usability tests aimed to understand and better:
Users (Designers and Developers)
-
How users navigate unfamiliar design systems
-
Their painpoints and dislikes of these systems
-
Identify the pain points of familiarizing and navigating through the systems
​
We set two groups of tasks based on the purpose and function each users group need on a design system. While designers and project managers use the design system for searching for design standards and components they can use in their projects, developers use it to try out codes and check the version of components.
​
​
Research Driven Personas
"I really enjoyed working on my last project because I had everything I needed from product to get my work done. There was little to no back and forth with them or UI devs."
John Jacobs
Software Developer
Age: 30
Status: Single
Location: Oklahoma City
Degree: B.S. in Computer Science
John's Goals and Expectations:
-
To find the appropriate components quickly
-
To review his teammates code
-
To write clean code
-
To develop modules that work properly
John's Needs and Frustrations:
-
Having to constantly communicate with designers or UI devs to figure out component specs
-
Needs delieverables that make it obvious what the padding and components used are
-
Can’t tell the limitations of a component until after he starts using it on a project (needs clear documentation about components’ status/bugs/etc)
03 Define
New Design System Requirements
Interview and testing findings lead us to pinpointing the needs and intentions of the new design system. According to our research activities, 91% of current users deem the design systems they are now using in their daiy workign process as failing to meet their needs.
This research has been insightful in discovering what P--- designers, developers, and product managers need in a new deisgn system. Users such as Stacy Smith and John Jacobs need quick findability, reliability, accessibility, and autonomy to make updates in order to work more efficiently and consistently. Achieving these 5 goals for our users will help P--- employees create even better products for emplyees using our services.
We envision this process happening without the excessive communication and slow workflow that P--- designers and developers currently experience. This will dramatically improve P--- employee’s workplace satisfaction.
​
Findability: Ensure there is an efficient information retrieval process; and search engine optimization
Discoverability: Ensure that users have the ability to find any content as desired.
Reliability: Ensure users have faith in the internal systems and can refer to any part of the design system to build Paycom products.
Accessibility: Ensure universal access and an holistic approach when redesigning our system leads to benefits to every user
Autonomy: Ensure users can make informed decisions in their projects, improving on workplace satisfaction.
​
New Design System Intentions
​
-
Minimize decision making time
-
Minimize cognitive and visual overload
-
Minimize searching time
-
Minimize cross team repetitive and redundant communication
New Design System Needs
-
Centralized System
-
Examples of Component Usage
-
Clear Information Architecture
-
User Inclusivity
-
Educational Tools
Features Overview
The new design system will provide users with the abiity to find information quickly, whether that is by using the search bar, referencing visuals, or browsing through the systems organization of material. They should also be able to navigate the system with ease, and understand component usage and examples with the help of an interactive platform. Users are supposed to see what is the latest update, find the newest information on the system, edit content, and get access to related outward resources directly from the design system such as Figma, Github, and Jira.
​
-
Intuitive Searching: Find information quickly, Visualized information
-
Information Hierachy: Clear information heirachy
-
Playroom: Check how components work
-
Documentation: Component usage examples, Demostrates design standards
-
Changelog: Components updated information, Locate for each component
-
Immediacy: Access the latest code, Recognize the newest version of component
-
User Inclusive: Edited by mutiple contributors, Easily used by all users
-
Outward Resources: Linked to Figma, Github, and Jira
04 Ideate
Low Fidelity Wireframes
Horizontal header: provides users with clear site organization
Showcase of design system in use: gives users a sense of direction and pride when exploring new system
Visual showcase of 3 main pages: provides users easy access to the most frequently used pages
Vertical navigation bar with drop down arrows: collapsible navigation bar on left side of screen eliminates visual clutter while serving as a reliable mapping source
More wireframes below!
05 Prototype
Mid Fidelity Wireframes
After low fidelity testing and interviews, I generated a set of mid-fidelity wireframes for the most important pages of the new design system. This included the home page, component landing page, individual component page, and search and search results page.
06 Test
Final Combination Iteration
Below is the combination of intern designs after usability testing feedback.
07 Final Deliverable
Sprout Design System Final Presentation
Research and Testing Overview
Our key findings from both of initial research phase and prototyping phase concluded that:
Our final design system features:
00
Information Architecture
Rebuilt site map for better navigation
Based on our usability tests, card sorting, and treejack studies we were able to build the information architecture.
We created these top-level navigation categories based on the results from the top-level card sort study: Overivew, Foundations, Components, Patterns, Developer Guides, and Content Guidelines.
From the component-level card story study we created these categories: Indicators, Inputs, Buttons, Page Layout, Navigation, Modals and Drawers, and Media Display.
However, the treejack study results had low success rate. Users seems to not understand the low level navigation namings, and met obstacles when looking for a certain pages without using search function. This shows that the information architecture of the new design system still need further study of how users under the structure and namings of categories.
01
Effective and Predictive Search
Redesigned systems for easy findability
We discovered through our research that users need better findability of information, the review of our design process also revealed that both designers and developers are interested in predictive and categorized search functionalities.
Reviewers asked questions like “What will hap?he predictive search and the reviewers responded positively. So, our first and most important solution to aid in improving poor findability of the design system is a redesigned search function.
The information architecture study we conducted only had a 37% average success rate. This shows that there needs futher work done to make the architecture clearer. This also proves that the search bar is very important because it is one of the most intuitive ways of finding information in a system that has unclear navigation. Additionally, the use of filter chips and tags helps alleviate confusion when users look for poorly named components. We also found that 70% of participants in our design review found the predictive search helpful.
Search Results Page Features and Details
02
Visual Component Library
Redesigned component library with display options
Our second set of solutions focus on creating a more intuitive and convenient experience for users interacting with the component gallery, which is one of the design system’s main functions.
During our research, our team discovered that 80% of design review participants liked having a bookmarks feature to help them save commonly used pages in the design system. This data was also supported by interviews earlier on in our process, with one user saying “I have a list of pages that I need to favorite and I need to make myself a sticky note of them”.
Component Landing Page Features and Details
03
Reliable Component Documentation
Component usage documentation and status
The third main feature is to provide users with reliable component documentation. For the new design system, we reorganized the documentation and provided a structure of how individual components should be documented.
The previous research outcomes told us that the current system does not have a uniformed way to document contents, more then 90% of interviewees from our users interview mentioned that the unorganized documentation of components causes obstacles in their work. In the new system, we provided a single structure of how documentation should be organized for components. Contributors of the system can fill in the content in this format. We aslo got feedback from design reviews, breaking down content into different tabs is the way reviewers found most helpful. This further influenced our design of how the architecture of individual component pages should be.
Individual Component Page Features and Details
04
Reliable Component Documentation
Component usage documentation and status: Playroom
Users mentioned that the playroom and props are the two main features they would like to see in this section. The props has a higher priority than any other content. An interviewee mentioned that “What’s useful for us is having the example here... and also what values... like how do we alter/mess with it”. Another interviewee said “Props will be the most important thing here, I would like to see it at the top." Also, 90% of participants in our design review expressed a need for an interactive platform to work with components.
Individual Component Page: Implementation Tab Features and Details
05
A Welcoming and Organized Home Page
Clear and immediate understanding
Through out the research, we found the most important things that users will need and like to see on the home page will be search function, quick access to reusable UI pieces, instructions for new users, and updates.
Through out the research, we found the most important things that users will need and like to see on the home page will be search function, quick access to reusable UI pieces, instructions for new users, and updates.
At the top of the homepage, we included a large search bar that includes a way to filter the search as well. This is beacuse our research showed that users rely on the search functionality because users perfomed poorly during the treejack study. So, they are not able to find where specfic pages are located.
We included a link to the foundations, components, and patterns pages on the home page because we discovered that they are the most frequently used pages.
Also, the changelog and faq are linked on the homepage in order for users to quickly access them.
For new users and people who are not familiar with the design system, they can access the handbooks for designers and developers right from the homepage.
Lastly, users can see the latest announcements on the home page and know if there are system updates or other important information.
Home Page Features and Details
You can access the workable mid-fidelity prototype from Figma here.
​
Thank you for reading about Sprout: Reimagined and Inclusive Design System. If you have any questions , feel free to send me an email.
​
(The original documents of this project are confidential, apologies for the inconvenience.)