Client
Zen Locum
Timeframe
Jun 2023 - Sep 2023
Client
Design System, Accessibility Design
How Might We Establish Consistency in a Growing Product Ecosystem?
When I joined Zen Locum as Product Design Lead, I inherited a 2-year-old product serving over 8,000 active users. With no style guide, brand guidelines, or organised design files, inconsistencies in the design language and codebase created friction across teams. As the company grew, these challenges became more apparent, highlighting the need for a robust design system to ensure quality, efficiency, and accessibility.
Identifying the Problem: Conducting a Component Audit
To understand the extent of the inconsistencies, I conducted a comprehensive component audit. Using Brad Frost’s interface inventory method as inspiration, I collaborated with the team to examine different parts of the product, identifying redundant, outdated, and conflicting components.
This audit uncovered significant issues, including duplicated components, inconsistent states across web and native applications, and a cluttered codebase. It was evident that establishing a centralised design system would be critical to addressing these gaps and creating a cohesive user experience.
Evaluating Accessibility Standards
Accessibility was a top priority for the design system. I conducted a thorough audit of existing components to assess their compliance with WCAG 2.2 standards. Using tools like Stark in Figma, I evaluated contrast ratios, typography legibility, and interactive elements. This analysis revealed several areas that fell short of accessibility requirements, such as low-contrast buttons and poorly defined focus states. These insights shaped the accessibility-first approach I embedded into the design system.
More than 80% of Zen Locum's existing component's didn't meet WCAG 2.2 standards
Strategising the Implementation
To tackle these challenges effectively, I worked closely with the product and delivery manager to develop a phased strategy focused on scalability and ease of adoption:
Foundational Elements First: I prioritised designing core components, such as typography, colour palettes, and grids, which would serve as the building blocks for the system.
Collaboration with Developers: I partnered with engineers early on to ensure alignment between design and code, reducing friction during implementation.
Documentation Integration: I assisted with integrating the Figma design system with Zeroheight for detailed guidelines and set up a repository in Storybook to keep the design and code in sync.
Design Process: Building and Testing Components
Foundational Elements
I began by focusing on the foundational components, such as colour palettes, typography, grids, spacing, and buttons. These elements served as the building blocks for a cohesive design language. Using Figma, I created a unified UI kit that merged existing variations into a streamlined system.
Key actions included:
Researching established design systems for inspiration and best practices.
Analysing use cases identified during the audit to ensure the design system met real-world needs.
Consolidating and simplifying colour schemes, reducing them to nine shades per hue to maintain clarity and consistency.
Frequently Used Components
With the foundational elements in place, I prioritised designing the most frequently used components for both light and dark modes on web applications.
I leveraged Figma’s auto-layout feature to ensure all components were responsive across different devices and layouts.
I designed for multiple states, such as hover, focus, error, and disabled, to cover all user scenarios.
I ensured accessibility compliance with WCAG AA standards, using tools like the Stark plugin to validate designs.
When Figma introduced the Variants feature, I implemented it to create component sets with custom properties, making the system more intuitive to use and maintain.
Maintaining the System
To ensure longevity and adaptability, I established a process for maintaining the design system. I integrated the design system with Zeroheight, which allowed me to attach detailed documentation directly to Figma components. This documentation included best practices, usage guidelines, and accessibility standards, making the system transparent and user-friendly for the entire team.
On the development side, I worked with engineers to create a component repository using Storybook. This allowed the design and codebase to stay perfectly in sync, ensuring seamless updates and reusability across projects.
Due to privacy reasons, this is not a screenshot from the Zen Locum component repository.
The Road Ahead
The design system transformed how Zen Locum approached design and development, improving efficiency, consistency, and accessibility. It laid a scalable foundation to support the company’s growth and empowered the team to deliver seamless user experiences.
Looking ahead, I plan to expand the library with more complex components, align with marketing for branding integration, and establish regular syncs to keep the system up-to-date. The ultimate goal is to maintain a living design system that evolves alongside the product and its users.
