Summary

Summary

As the company and engineering team rapidly expanded, I identified the need for a design system to streamline processes, enhance consistency, and boost efficiency. Taking the initiative, I collaborated closely with lead engineers, persuading senior stakeholders to support the creation and implementation of a new design system from the ground up (0-1).

• Timeline: January 2022 - June 2022
• Role: Lead Product Designer
• Multidisciplinary Team: 1 UI Designer, 1 UX researcher, 1 Engineer Lead, 2 Engineer Managers, 14 Engineer Teams (120 engineers)
• Main Stakeholders:  Product Managers, SVP of Product

As the company and engineering team rapidly expanded, I identified the need for a design system to streamline processes, enhance consistency, and boost efficiency. Taking the initiative, I collaborated closely with lead engineers, persuading senior stakeholders to support the creation and implementation of a new design system from the ground up (0-1).

Timeline: January 2022 - June 2022
Role: Lead Product Designer
Multidisciplinary Team: 1 UI Designer, 1 UX researcher, 1 Engineer Lead, 2 Engineer Managers, 14 Engineer Teams (120 engineers)
Main Stakeholders:  Product Managers, SVP of Product

Key contributions

Key Contributions

Spearheaded the project from the design side.

Spearheaded the project from the design side.

Led the creation of a new Design System and Pattern Library.

Led the creation of a new Design System and Pattern Library.

Supported engineering teams through system implementation.

Supported engineering teams through system implementation.

Within a year, the engineering team grew from 30 to 120 engineers across 14 teams, working on various business lines. Without a shared component library, engineers repeatedly recreated components, leading to inefficiencies.

On the design side, we faced similar challenges. With only two product designers working on multiple projects, visual consistency became harder to maintain.

Within a year, the engineering team grew from 30 to 120 engineers across 14 teams, working on various business lines. Without a shared component library, engineers repeatedly recreated components, leading to inefficiencies.

On the design side, we faced similar challenges. With only two product designers working on multiple projects, visual consistency became harder to maintain.

We were using an inherited design library designed for a single business vertical—men’s health—which didn’t adapt well to Vault’s expanding services in areas like mental health, COVID testing, and clinical trials.

The strong branding and limited components were no longer sufficient for diverse user groups. We needed a universal design system that could be quickly implemented across business lines while addressing technical constraints.

We were using an inherited design library designed for a single business vertical—men’s health—which didn’t adapt well to Vault’s expanding services in areas like mental health, COVID testing, and clinical trials.

The strong branding and limited components were no longer sufficient for diverse user groups. We needed a universal design system that could be quickly implemented across business lines while addressing technical constraints.

Gaining allies

Gaining allies

Engineer buy-in

Engineer buy-in

We decided to build upon Google’s Material UI (MUI) to expedite the process. This allowed us to focus on customization rather than starting from scratch.

I outlined a roadmap, and the UI Designer and I worked on adapting the design system to align with our branding. Although we couldn’t rebrand entirely due to time constraints, we softened Vault’s original blue and improved its accessibility, based on feedback from usability testing.

To expedite the process, we decided to build upon Google’s Material UI (MUI). This allowed us to focus on customization rather than starting from scratch.

I outlined a roadmap, and the UI Designer and I worked on adapting the design system to align with our branding. Although we couldn’t rebrand entirely due to time constraints, we softened Vault’s original blue and improved its accessibility, based on feedback from usability testing.

Another challenge arose with input fields, a critical component for our health-related forms. MUI’s default input fields had accessibility issues, particularly with screen readers.

After consulting with our UX Researcher and an engineer specializing in inputs, I redesigned the input fields to meet A11y guidelines while ensuring they worked across all business lines.

Another challenge arose with input fields, a critical component for our health-related forms. MUI’s default input fields had accessibility issues, particularly with screen readers.

After consulting with our UX Researcher and an engineer specializing in inputs, I redesigned the input fields to meet A11y guidelines while ensuring they worked across all business lines.

Product demo success

Product demo success

Shortly after the design system was created, I used it to develop 3 high-fidelity prototypes for a product demo, which helped us win a critical business partnership. 

By integrating the design system early in the project, I was able to streamline the process, focusing on wireframe iterations and delivering the prototypes within tight deadlines. The system proved its value by being successfully implemented in a live product.

Shortly after the design system was created, I used it to develop 3 high-fidelity prototypes for a product demo, which helped us win a critical business partnership. 

By integrating the design system early in the project, I was able to streamline the process, focusing on wireframe iterations and delivering the prototypes within tight deadlines. The system proved its value by being successfully implemented in a live product.

To ensure smooth collaboration with engineers, I created a dedicated Figma file for the design system and a separate file for components used in specific products.

Additionally, I set up a Slack channel, #design-system-react, to facilitate ongoing communication between design and engineering. This transparency and support were greatly appreciated by the engineers.

To ensure smooth collaboration with engineers, I created a dedicated Figma file for the design system and a separate file for components used in specific products.

Additionally, I set up a Slack channel, #design-system-react, to facilitate ongoing communication between design and engineering. This transparency and support were greatly appreciated by the engineers.

A design system is like a garden

A design system is like a garden

A design system needs both consistency and flexibility. It requires continuous maintenance, but also room for experimentation and iteration. Like a garden, it grows and evolves organically, adapting to new challenges and opportunities.

A design system needs both consistency and flexibility. It requires continuous maintenance, but also room for experimentation and iteration. Like a garden, it grows and evolves organically, adapting to new challenges and opportunities.

It’s always a team effort

It’s always a team effort

The success of this project was due to collaboration between design and engineering. Without the lead engineer’s support and the collective efforts of the team, the design system wouldn’t have come to life. Building something from nothing was a rewarding and collaborative journey.

The success of this project was due to collaboration between design and engineering. Without the lead engineer’s support and the collective efforts of the team, the design system wouldn’t have come to life. Building something from nothing was a rewarding and collaborative journey.

More Projects

Browse More Projects