END-TO-END DESIGN SYSTEM & TEAM COLLABORATION

END-TO-END DESIGN SYSTEM & TEAM COLLABORATION

Overview

Overview

Executive Summary

Executive Summary

As the company and engineering team grew exponentially, I saw the importance of creating a design system to streamline the process and boost efficiency and consistency. By taking the initiative, leading another designer, and working closely with lead engineers, we successfully convinced the Senior Stakeholders, created a 0-1 design system, and implemented it on the new product. 

• 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)
• Other Main Stakeholders:  Product Managers, SVP of Product

As the company and engineering team grew exponentially, I saw the importance of creating a design system to streamline the process and boost efficiency and consistency. By taking the initiative, leading another designer, and working closely with lead engineers, we successfully convinced the Senior Stakeholders, created a 0-1 design system, and implemented it on the new product. 

• 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)
• Other Main Stakeholders:  Product Managers, SVP of Product

Key Contributions

Key Contributions

• Initiative: Initiated and pushed the project from the design side
• Creation: Led another designer and created a 0-1 Design System and Design Pattern Library 
• Implementation: Support engineer teams for implementation 

• Initiative: Initiated and pushed the project from the design side
• Creation: Led another designer and created a 0-1 Design System and Design Pattern Library 
• Implementation: Support engineer teams for implementation

Identified the Problem

Identified the Problem

Facing the Challenge of Inconsistency and Low Efficiency

Facing the Challenge of Inconsistency and Low Efficiency

Within one year, the engineering team at Vault grew exponentially - from 2 engineer teams with about 30 engineers to 14 engineer teams and 120 engineers. We found it increasingly hard to maintain visual consistency while several teams working on different projects and business lines.

Within one year, the engineering team at Vault grew exponentially - from 2 engineer teams with about 30 engineers to 14 engineer teams and 120 engineers. We found it increasingly hard to maintain visual consistency while several teams working on different projects and business lines.

On the engineering side, the engineering teams didn’t have a shared component library. They found themselves creating and recreating components every time there were visual updates. On the design side, the design team had grown from 1 product designer to 2, with each designer working on different business lines and multiple projects simultaneously, we needed to figure out a better way to maintain consistency and speed up our design process.

On the engineering side, the engineering teams didn’t have a shared component library. They found themselves creating and recreating components every time there were visual updates. On the design side, the design team had grown from 1 product designer to 2, with each designer working on different business lines. Also, since each designer worked on multiple projects simultaneously, we needed to figure out a better way to maintain consistency and speed up our design process.

Limited and Outdated Design Library

Limited and Outdated Design Library

At that time, I was designing based on an inherited design library. It was created mainly for Man’s Health business. Given that Vault had expanded its businesses into covid-testing, mental health, clinical trials, etc., visually, I found it hard to implement for other business lines, as each product targeted a different group of end-users. Ideally, we should tailor the branding to the targeted audiences. 

Considering the technical constraints, the company needed a universal design system that we could quickly implement in each business line. In comparison, the current fonts and colors had a too strong personality. 

At that time, I was designing based on an inherited design library. It was created mainly for Man’s Health business. Given that Vault had expanded its businesses into covid-testing, mental health, clinical trials, etc., Visually, I found it hard to implement for other business lines, as each product targeted a different group of end-users. Ideally, we should tailor the branding to the targeted audiences. 

Considering the technical constraints, the company needed a universal design system that we could quickly implement in each business line. In comparison, the current fonts and colors have a too strong personality. 

The Journey of Winning Allies

The Journey of Winning Allies

The Lone Warrior

The Lone Warrior

Show instead of Tell

Show instead of Tell

One Step at A Time

One Step at A Time

Miracle did happen

Miracle did happen

Scale Up for the Benefits of All

Start Over for the Benefits of All

Over the Hurdles

Over the Hurdle

Here came the new set of challenges: 
1. Given it would be a team effort to make it happen, we need more engineers' buy-in.
2. Since we were all working on other projects, we had limited time and engineering resources. We need a design system that could save time instead of requiring a lot of time to build. 
3. On the design side, we also had limited design resources, given the other designer was new to the design system.

Solutions: 
1. We would consistently pitch and demo the idea in our weekly tech-all-hands meeting.
2. Leverage the power of a well-established design system, which means we need to give up the small design system I had already created, but considering the larger goal, I was happy to embrace that.
3. I would be the lead designer on this project and responsible for the most part, and the UI designer could contribute to a small portion of it.

Here came the new set of challenges: 
1. Given it would be a team effort to make it happen, we need more engineers' buy-in.
2. Since we were all working on other projects, we had limited time and engineering resources. We need a design system. that could save time instead of requiring a lot of time to build. 
3. On the design side, we also had limited design resources, given the other designer was new to the design system.

Solutions: 
1. We would consistently pitch and demo the idea in our weekly tech-all-hands meeting.
2. Leverage the power of a well-established design system, which means we need to give up the small design system I had already created, but considering the larger goal, I was happy to embrace that.
3. I would be the lead designer on this project and responsible for the most part, and the UI designer could contribute to a small portion of it.

Made MUI Our Own

Made MUI Our Own

As more engineers got excited about it, we sought advice from those who had worked on design systems before. After several discussions, we decided to use Google’s MUI as the foundation. I immediately created a roadmap for the other designer and me to implement our current branding and make it our own. The UI designer helped with colors, and I worked on everything else.

As more engineers got excited about it, we sought advice from those who had worked on design systems before. After several discussions, we decided to use Google’s MUI as the foundation. I immediately created a roadmap for the other designer and me to implement our current branding and make it our own. The UI designer helped with colors, and I worked on everything else.

One thing I wish we could do at that time was to replace the font with a more readable san-serif, but given the time constraints, we wouldn’t be able to rebrand at that time. But we made the original Vault blue a bit softer on the eye. According to the feedback from usability testing, the original Vault blue was too sharp and caused eye strain on users.

One thing I wish we could do at that time was to replace the font with a more readable san-serif, but given the time constraints, we wouldn’t be able to rebrand at that time. But we made the original Vault blue a bit softer on the eye. According to the feedback from usability testing, the original Vault blue was too sharp and caused eye strain on users.

Redesign the Components for Better Accessibility 

Redesign the Components for Better Accessibility 

Another challenge I encountered when working on the design system was the input field. As a health company, the input field was one of the essential components, for we had a lot of forms. The input field was also a central component of the digital health systems. 

Google’s MUI had three input field styles. Visually it looks great, but its interaction posted some issues on accessibility. Based on my understanding, with the label inside the input field, screen readers might fail to pick up the text for users who use screen readers to understand the context. 

Another challenge I encountered when working on the design system was the input field. As a health company, the input field was one of the essential components, for we had a lot of forms. The input field was also a central component of the digital health systems. 

Google’s MUI had three input field styles. Visually it looks great, but its interaction posted some issues on accessibility. Based on my understanding, with the label inside the input field, screen readers might fail to pick up the text for users who use screen readers to understand the context. 

Implementation & Iteration

Implementation & Iteration

Implementing the Design System in a Business Winning Product Demo 

Implementing the Design System in a Business Winning Product Demo 

Shortly after creating the new design system, I was tasked with creating 3 high-fidelity prototypes within one week from low-fi wireframes for a product idea demo (which helped us win a critical business partnership, you can find the case study here). Considering the constraints, I decided to put the new design system into use right at the beginning of the project and aimed to iterate the design system based on actual product needs. 

By doing that, I could put more time into rethinking the wireframes, speeding up the process for high-fi design, and creating prototypes within the time frame. Most importantly, the design system was alive by being implemented into an actual project.

Shortly after creating the new design system, I was tasked with creating 3 high-fidelity prototypes within one week from low-fi wireframes for a product idea demo (which helped us win a critical business partnership, you can find the case study here). Considering the constraints, I decided to put the new design system into use right at the beginning of the project and aimed to iterate the design system based on actual product needs. 

By doing that, I could put more time into rethinking the wireframes, speeding up the process for high-fi design, and creating prototypes within the time frame. Most importantly, the design system was alive by being implemented into an actual project.

Facilitating Design and Engineer Communication

Facilitating Design and Engineer Communication

When handing off the design and the design system, to help engineers jump start quickly, in addition to the stand-alone design system file, I pointed out all the components and unique design patterns I used within each engineer handoff Figma page. 

When handing off the design and the design system, to help engineers jump start quickly, I pointed out all the existing components from the design system and unique design patterns I created for this particular feature within each engineer handoff Figma page. 

In addition, I created an independent Figma file to include all the components used in this particular product. I also made a new slack channel called #design-system-react to facilitate the communication between design and engineering. Our engineers loved this support. 

In addition, I created an independent Figma file to include all the components used in the product. I also made a new slack channel called #design-system-react to facilitate the communication between design and engineering. Our engineers loved this support. 

Learnings

Learnings

1. Design system is like a garden

1. Design system is like a garden

The more I worked on the Design System, the more I felt it was like a garden. In the beginning, I strived for consistency. Once I started implementing it, I soon realized it needed to be organic. Like nature and gardening, you take care of it by consistently maintaining it, but you also need to give it room to breathe, experiment with new ideas, and even break and rebuild part of it. 

The more I worked on DS, the more I felt it was like a garden. In the beginning, I strived for consistency. Once I started implementing it, I soon realized it needed to be organic. Like nature and gardening, you take care of it by consistently updating and aligning it with the product. But you also need to give it room to breathe, experiment with new ideas, and even break down and rebuild part of it. 

2. It’s always a team effort

2. It’s always a team effort

I know the design system won’t see the light without the lead engineer pushing from the engineering side. It indeed required a team’s efforts to make it happen and to see it grow. I really appreciate my engineer pal. It's a great pleasure to create something from nothing. 

I know the design system won’t see the light without the lead engineer pushing from the engineering side. It indeed required a team’s efforts to make it happen and to see it grow. 

Browse More Projects

Browse More Projects