Design System Revamp

Design System Revamp

Design System Revamp

Design System Revamp

🕑 Timeline

Apr 2023 - Sep 2023

🚀 Responsibility

Design system

🏢 Company

Carousell

Overview

This project focused on enhancing the consistency and usability of our design system across all platforms, aiming to improve workflow efficiency for both designers and engineers.

We established a structured process—including component assessment, updates, reviews, implementation, and sharing—to ensure alignment between design and development. Additionally, we redesigned the layout of the Figma library to improve navigation and better bridge the gap between design and implementation.

Impact For Designers:

↗ 32% increase component coverage rate in the design file

↘ 11% decrease design-to-development handoff time

Impact For Engineers:

Positive feedback on navigating easily in the design system files to locate component and consistency between the design components and the codebase, which streamlined implementation

Understanding the current situation

At the start of this project,
we surveyed engineers about their pain points and we further held a workshop with designers to gather feedback.

Many designers detached and modified components due to a lack of flexibility in existing components, and even experienced designers struggled to find what they needed in the library.

Pain Points from Initial Research

Lack of consistency

  • Lack of clear guidelines and documentation.

  • Components are difficult to reuse due to outdated Figma features.

  • No defined process for updating and maintaining the design system, leading to misalignment between design and development.

Poor discoverability

  • No links between design and codebase making it difficult for engineers to find reusable code.

  • Difficulty in searching for components by name.

  • Limited visibility for designers to track changes in components.

Poor Communication

  • Inconsistent terminology leads to confusion over component names.

  • Fragmented communication channels result in missed messages and reduced team cohesion.

  • A lack of structured feedback hindered improvements and caused delays in the design process.

We decided to audit the Button component first, as it is widely used across all platforms. We reviewed its usage and documented any inconsistencies or issues.

First, we invited one of the developers to join our trail run, we did an assessment for current production. So as to identify the gap between implementation and design system.

We discovered:

  1. Components were not updated with the latest features of Figma, such as auto layout and properties. As a result, they lacked the flexibility to meet designer's need.

  2. Documentation was outdated and incomplete, which was meant to guide us on how to use certain components.

As a result, designers often create UIs that are slightly different and hand them off to developers. This lack of a clear single source of truth results in an increasing gap between implementation and design.

And we also curious how other companies are doing

We conducted research on how other companies approached their design systems, and also reading some articles that addressing this topic.

To sum up,

→ We took action by updating the component using Figma’s newly released features at the time

(Note: this case study was completed a few years ago, and these features are now standard in Figma).


→ We also embedded documentation (previously in Notion) directly within the Figma file, as it proved more convenient and efficient to keep all resources in one place for easier access and collaboration.


→ To further support consistency between design and development, we included a link to the component code base as well.

To sum up,

→ We took action by updating the component using Figma’s newly released features at the time

(Note: this case study was completed a few years ago, and these features are now standard in Figma).


→ We also embedded documentation (previously in Notion) directly within the Figma file, as it proved more convenient and efficient to keep all resources in one place for easier access and collaboration.


→ To further support consistency between design and development, we included a link to the component code base as well.

Let's do this

After sharing the trial run - button component with the team and senior management, we received positive feedabck, Based on this success, we planned to roll out the same approach to other components in the system.


I led the revamp project and set the foundation for future expansion before leaving the company.

Things I did

Created a spreadsheet to assign component ownership based on team usage, and used it to track progress and ensure accountability throughout the revamp process.

Created a spreadsheet to assign component ownership based on team usage, and used it to track progress and ensure accountability throughout the revamp process.

Created a spreadsheet to assign component ownership based on team usage, and used it to track progress and ensure accountability throughout the revamp process.

Further create a detailed handbook and defined process to ensure everyone is aligned of how to update the design system

Further create a detailed handbook and defined process to ensure everyone is aligned of how to update the design system

Further create a detailed handbook and defined process to ensure everyone is aligned of how to update the design system

We have established a weekly announcement in Slack to keep the team and all stakeholders aligned and informed with the update

We have established a weekly announcement in Slack to keep the team and all stakeholders aligned and informed with the update

We have established a weekly announcement in Slack to keep the team and all stakeholders aligned and informed with the update

Some details

Inside the Figma file, we maximized the benefits of features like properties and variants, enhancing the flexibility and usability of the design components.

We annotate codebase information directly within the Figma file, making it easy for engineers to locate and reuse the relevant code.

We have organized the structure of the design file and incorporated documentation alongside the components. In the updated version (After), the documentation is displayed on the left side, while the variants are presented on the right side of the image.

Impact

11%

11%

Decrease of design-to-development handoff time

32%

32%

component coverage rate in design file

component coverage rate in design file

Although it's still WIP, we continue to make improvements and have exciting updates planned for the future!

Although it's still WIP, we continue to make improvements and have exciting updates planned for the future!

Plans including:

  • Rolling out color tokens with semantic naming

  • Extending the revamping efforts to font styles, spacing and shadows

Reflection

Reflection

Throughout the project, I gained a valuable understanding of the importance of communication and collaboration. It is essential not to work in isolation but rather engage with other team members. In particular, since our users are product designers, it is crucial to understand their thoughts and expectations.

Revamping a design system cannot be achieved single-handedly; it requires a collaborative effort. Trusting team members and assigning ownership are vital aspects of this process. We learn and improve through iterations, establishing a healthy design system that is sustainable, comprehensive, optimized, and capable of handling future requirements.

It is important to recognize that there is no one-size-fits-all design system. We must consider our unique circumstances and leverage existing implementations to develop solutions that truly address our specific case.

Throughout the project, I gained a valuable understanding of the importance of communication and collaboration. It is essential not to work in isolation but rather engage with other team members. In particular, since our users are product designers, it is crucial to understand their thoughts and expectations.

Revamping a design system cannot be achieved single-handedly; it requires a collaborative effort. Trusting team members and assigning ownership are vital aspects of this process. We learn and improve through iterations, establishing a healthy design system that is sustainable, comprehensive, optimized, and capable of handling future requirements.

It is important to recognize that there is no one-size-fits-all design system. We must consider our unique circumstances and leverage existing implementations to develop solutions that truly address our specific case.

Next

Sign-Up Flow Overhaul

Copied!

Copyright © 2025 by Ryan Chang

Copied!

Copyright © 2025 by Ryan Chang

Copied!

Copyright © 2025 by Ryan Chang

Top ↑