The product I was working with already had a design system. There was some feedback though from team members saying they have issues using it. It was obvious that the system needs an update.

I started with examining the current design system to understand its strengths and weaknesses. After carefully analyzing its limitations and areas for improvement, I created a clear plan outlining what needs to be enhanced and how to achieve those improvements.

The Process



Facilitated a series of interviews with various users of the design system, including designers and developers. Received the feedback and suggestions for improvement from product owners and stakeholders. Consolidated and analyzed the feedback received from the interviews.  


Performed an audit of the design system, examining styles, patterns, and components to identify any inconsistencies, as well as usability and accessibility issues.


Compiled a summary of the primary pain points to be addressed, gained an understanding of the benefits of the update, and explored methods for measuring the success of the changes.

Define Scope

Define Scope

Define Scope


Developed a comprehensive implementation plan to guide the execution of the design system update.





Implement the changes on design and front end sides.

Research Highlights

Component Deficiencies

  • Some components are missing, while others remain unused

  • Inconsistencies in the look and feel of certain components between the front-end and design

Excessive Color Styles

  • The design system has an excessive number of color styles, with 70% of them going unused

Naming Challenges

  • The naming conventions differ between the design and front-end aspects, causing confusion

  • The current naming convention is not easily scalable, logical, or simple

Usability Issues

  • The design system is difficult to use, making it challenging for designers and developers to navigate

  • Managing a large number of styles is complicated and time-consuming

Accessibility Concerns

  • Small text size and insufficient contrast pose accessibility problems for users

  • Localization inconsistencies hinder effective internationalization

Pattern Inconsistencies

  • There are inconsistencies in the usage of patterns throughout the design system

These pain points highlight the need for a comprehensive overhaul of the design system to address these challenges and enhance its effectiveness and usability.

Customization Challenges

Since the product was a White Label solution, issues with design system directly influenced the customization abilities:

  • It is challenging to customize the product for clients

  • The existing design system limitations hinder the ability to adapt and tailor the product's appearance to meet the branding requirements of different clients

  • Lack of flexibility in the design system makes it difficult to achieve a seamless and consistent white label experience for clients, impacting the overall value and marketability of the product


Overall, a cumbersome, chaotic, and inconsistent design system undermines productivity, hampers collaboration, and negatively impacts the user experience.

Decreased Efficiency

Designers and developers struggle to navigate and utilize a disorganized and confusing design system. This leads to wasted time and effort spent searching for the right components, styles, and patterns, ultimately slowing down the design and development process.

Inconsistent User Experience

It confuses users, diminishes brand recognition, and undermine the overall cohesiveness of the product.

Higher Learning Curve

Requires a significant investment of time and effort for new team members to understand and use effectively. 

Increased Errors and Rework

Designers and developers struggle to make informed decisions, resulting in frequent rework and iterations to correct mistakes, further prolonging project timelines.

Diminished User Satisfaction

Users encounter usability issues, that leads to frustration, decreased user satisfaction, and potentially impact the product's reputation.


Refactoring the design system, taking into account the following issues:

  • Identify missing components and remove unused ones

  • Streamline the excessive number of color styles, discarding the unused 70%

  • Address the discrepancy in naming conventions between design and front-end

  • Evaluate the scalability, logic, and simplicity of the naming convention

  • Rectify inconsistencies in the look and feel of specific components between front-end and design

  • Enhance usability by making the design system more intuitive and user-friendly

Tackle accessibility concerns, such as

  • Addressing small text size and ensuring sufficient contrast for readability.

  • Resolving localization inconsistencies, set localization principles and rules

  • Rectifying inconsistencies in pattern usage throughout the design system, describe and document patterns

Customization Enhancements

  • Integrate design tokens into the design system to provide a standardized approach to defining and managing design properties, such as colors, typography, spacing, and more

  • Make the system more adaptable for clients requirements and future changes by implementing easy to navigate design tokens architecture

  • Streamline the customization process by clearly defining the styles and parameters of the system that can be customized and providing customers with a form as a customization tool at the initial stage

  • Conduct user testing and gather feedback from clients to refine and expand the design token system, ensuring it meets their customization needs effectively

Expected Outcome

Enhanced Usability and Navigation:

A user-friendly interface, making it easy for designers to navigate and utilize its resources. This will eliminate confusion and uncertainty, streamlining the design process.

Scalability and Customization Support

The updated design system will be designed with scalability in mind, allowing for efficient growth and expansion.

Accelerated Development and Time to Market

With a refined design system, development teams can work more efficiently, leveraging reusable components and standardized design elements. This will result in faster development cycles and shorter time to market for new features and updates.

Consistency Across Products

By enforcing standardized design patterns, components, and naming conventions, the design system will promote consistency in the user experience across various products and platforms. This will reinforce the brand identity and enhance user recognition and familiarity.

Improved Accessibility

The updated design system will prioritize accessibility considerations, ensuring that the product adheres to best practices for usability by individuals with disabilities.

These expected outcomes will contribute to a more efficient, consistent, and user-centric design and development process, ultimately delivering a superior product to both internal stakeholders and end-users.


In order to understand whether we achieved expected goals I set the following metrics to track:

  1. Consistency audit - to measure the level of interactive and visual consistency before and after the implementation of the design system

  2. Feedback from design system users (designers and developers), product managers and stakeholders

  3. Tracking the reuse of components through Figma Library Analytics

  4. Tracking the speed and number of iterations when implementing a new customization theme 



To address the disorganized color structure, I concentrated on the following updates:

  • Update colors according to the hue

  • Eliminate unused colors 

  • Update the naming convention for clarity and consistency

  • Improve navigation

  • Check and update color contrast for accessibility compliance

Hue Model

Existing colors do not always have the same hue

All colors are based on the same hue, within the same color line

Brand New Approach

Inversion for the Dark Theme

N. 1000 = N. 0

N. 900 = N. 100

N. 800 = N. 200

N. 700 = N. 300

N. 600 = N. 600

N. 300 = N. 700

Updated Structure

Colors divided into functional categories

  • All colors aligned within appropriate hue

  • Special category for data visualization supporting color blindness

  • Providing sufficient contrast (AAA) between all possible text and background colors combinations


  • Eliminate unused styles (H5, H6) 

  • Update the naming convention for clarity, consistency and scalability

  • Improve navigation


Standard approach in headers naming + T-shirt sizing for other styles, where M is base size (14):

  • Headline - H1, H2, H3, H4, H5, H6

  • Paragraph: L, M, S (light, heavy)

  • Label: L, M, S…

  • Link: L, M, S…

  • Button: L, M, S…


  • Updated font-family to improve readability

  • Improved scalability by implementing T-shirt size naming convention (except headers)

  • Created separate categories for buttons, links and labels

To gain access to the complete case study and explore the hidden details, please email me: