Working in the design team, I noticed designers were using loosely defined styles and ad-hoc components, leading to inconsistency and maintenance issues as the product scope expanded. We recognized the need for a comprehensive design system. I led the creation of 8 token types, drafted guidelines for 10+ components, held 5 workshops on design system principles, and integrated feedback from cross-functional teams. The Success tracking section outlines the positive outcomes.
Stakeholders:
Goal:
Principles:
We started with design tokens because they are the foundation of components. In this way, it saves us the update work when we create components.
My contribution:
We recognize that components are crucial for scalability. Building on the components designed by our team, we have begun developing guidelines to help select the right components during the design process.
My contribution:
When a design token or component guideline is created, we invite feedback from other designers and front-end developers, typically through Figma comments.
Example 1: Further elaboration
The front-end team asked about how the input chip enters edit mode. This is mentioned in the guideline, but without specific instructions. I later added keyboard interaction instructions to the guideline where edit mode is mentioned.
Example 2: Conflicts with existing implementation
After reviewing the Combo box component, the front-end team brought up that this component doesn't allow custom input values in implementation, while our design guidelines state that it does. After considering the technical difficulties, we decided to introduce Autocomplete to handle custom values in order to avoid disrupting the already implemented Combo box component.
Example 3: Design system iteration
Visual designers once mentioned that they found it difficult to use the Select component because they needed a leading icon, but the component appeared to only support a trailing icon. In fact, the leading icon is a hidden property, but I acknowledged that it wasn't straightforward to discover this. As a solution, I incorporated a Variants section into the Specifications sheet to showcase all the possible options.
Workshop 1: Accessibility
In this workshop, I demonstrated how to create accessible components and color tokens, using over 30 examples. Accessibility is one of the core principles of our design system, so it's crucial for designers to keep it in mind when creating and maintaining the system.
"I really liked the presentation so far on accessibility! Very helpful, I wasn't aware of some of the things 🙂" — Danica Uy (Visual designer)
Workshop 2: Component craft — The When and How
During this workshop, I discussed with other designers the optimal use of components and variants, as well as strategies for minimizing maintenance. The workshop provided the design team with ideas into not only creating components but also leveraging Figma's component configurations to cater to specific design needs.
"#high-five to @Celine.L for sharing very informative tips on how to go about optimizing our components even further, can't wait to do some work around it" — Yvonne Liu (Lead visual designer)
Upcoming workshop: Leverage variables for design consistency
** Example component: Action bar
** Used the example of Schedule page
** Limited to mobile app only for the ease of counting
The main tool we use to create the design system is Figma. As Figma introduces new features constantly, we quickly adopt the most efficient way. For example, by creating font-family variables and utilizing modes, we increase the speed of updating the app significantly. This inspires me to always stay informed with tool updates.
At the beginning of this project, we focused more on creation. After we had a few things, we realized that the adoption rate didn't change much compared to before. So we started to spread the news while creating design guidelines. By having more people using tokens and components, we get to adjust the content before too much content is produced.
.webp)
