“It [really does] depends.”
The perfect design process doesn’t exist–each project warrants different tools, methodologies, and processes. As a seasoned designer, I have to evaluate business goals to ensure a project’s success and figure out the best solution for a design problem.
Tools: Figma, Storybook
Research Methods: A mix of User Interviews, Concept Testing, Usability Testing
Research & Collaboration
- Conduct user interviews with different stakeholders to understand challenges with the current or lack of design process
- Conduct user interviews with platform users to understand how they use the apps, and what are their jobs-to-be-done (JTBDs) to help inform design
- Collaboration with developers to create a shared and reusable component library to help developers and designers across the organization. A shared component library will help accelerate the development of multiple platform experiences with reusable and modular UI elements.
Results
Consistency
Time Saved
Adoption Rate
- From a design front, the new component library helped us bring consistency in design, improved collaboration across the organization, and greatly saved time and effort on projects across different teams.
- From the development front, the new component library led to a more streamlined, standardized development process, reduced the amount of code duplications, and improved collaboration across teams.
Perform Audits
First, I took stock of the current design elements across the different platforms. Then I consolidated the different usages and tried to understand the intention behind these choices. I faced several issues while designing and developing these components, including inconsistent padding, margins, button size, spaces between elements, typography choices, varying page layout structures, and even labeling and taxonomy.
Identifying Inconsistencies in the Design System
Define Standards
Brand guidelines + digital platform guidelines
How do we ensure a set of rules and standards that communicate how the brand should be represented? And how do we extend those brand guidelines across digital experiences?
Results
Consistency
Satisfaction
- As an extension of the brand’s guidelines, we defined how the brand is articulated through digital experiences. Examples include logo usage, consistent copywriting, and color usage across platforms.
Setting the Brand Guidelines
WCAG accessibility standards
How do we ensure that the code we deploy is written per the WCAG accessibility standards to make our experiences more accessible to people with disabilities?
- To ensure the design meets accessibility standards for a diverse user base, we had to cover basic accessibility: ensure sufficient color contrast, accessible navigation, use meaningful labels and tags, and aria-label for non-text objects, and more.
Prioritization
Part of the rollout strategy was to quickly stand up the design system so that teams could point to the new UI component library. I had to prioritize based on impact vs value. We started with the implementation of atoms and molecules components first, then I conducted a design QA in phases to help ensure consistency across the different platforms. I had to make trade-offs and deprioritize features such as light mode, widgets & data visualization, to focus on foundational work first.
Iterative Design
Designed with designers and developers in mind
- Using the atomic design framework to easily compartmentalize design/dev components, starting with the smallest atom component to build upon each other to form complex designs.
- This framework helped me rethink how to organize the design system to make our workflows more efficient. How I describe this framework to the team: is to think of the smallest components in your design system, these are called atoms. Just like real scientific atoms, there’s no way to break it down even further. Items like buttons, and icons standalone as is. You would then group atoms to form molecules; group molecules to form organisms and so forth. Then you have templates and page layouts to help design the structure once and reuse wherever it is applicable.
Using the Atomic Framework to organize the Design System
Results
Usage
Consistency
Time Saved
With predefined components, I could rapidly create mockups and prototypes, reserving more time and effort for feature exploration and ideation. This also made validating ideas more rapid, since I don’t have to focus on designing each UI element again.
Choosing Material UI (MUI)
We chose MUI library as a starting point to help increase development velocity on React and reduce the time it takes to bring a product to market. This way we can focus on experiences that make the biggest impact and value like crafting visual and functional data tables.
