Design System

Objectives

Recently, we completed the "unification project" of Calvin Klein and Tommy Hilfiger, where we built the same code base for two e-commerce platforms while differentiating their visual brand styles. This means that all designers are now required to create two matching design files, one for each brand.

This required a complete re-thinking of the design system to ensure that the brand components were more aligned and compatible with each other.

My Role

Initiated and led a complete refactoring of the dual-brand design system to enhance its usability and effectiveness.
Established a collaborative process to engage all team members in maintaining and evolving the design system.

Challenge: How can we update our design system to enhance the unified design process?

During the unification project, the design team transitioned into a dual-brand team. This meant that the number of components to manage increased significantly, causing the time needed to create a design to more than double.

This change presented several challenges in the current design system:

Over time, significant discrepancies accumulated between CK and TH libraries and between Figma and the Storybook.
Locating components and variants from two separate design libraries became a time-consuming task.
There was a lack of centralised guidelines for managing and maintaining the design system.

Process

The four-step process was planned to identify our current problems and develop sustainable solutions for our team.

Step 1: Identifying discrepancies

To conduct a thorough review of the existing components, I created a spreadsheet that listed all the components and their variants in both Figma and Storybook.

Three different types of issues were identified:
• Inconsistent component/variant names
• Missing components/variants
• Outdated components/variants

Step 2: Introducing rules and guidelines

After identifying the problems with the existing design system, we established common guidelines between the libraries to ensure that the components were built and presented consistently.

Based on the team's input on their current pain points, I proposed a set of guidelines that covered naming conventions, presentation of components and variants, and the process for creating a new component.

The team then reviewed, refined, and approved these guidelines together, which created a shared vision for how the design system would be managed and maintained.

Step 3: Cleaning up the deslgn library according to the guidelines.

I recruited another designer in the team to assist me in the clean-up process. First, we deep-cleaned all the existing components to remove discrepancies and improve quality. Next, we reorganised the file structure of both design libraries to improve visibility and presentation of the components.

Step 4: Implementing a continuous maintenance system

We created a comprehensive list of the remaining tasks, including adding missing components and reviewing outdated components.

To clarify the tasks and ensure accountability, we included the component name, task type (add, review, or update), assignee, priority, and status in the list. This helped streamline the process of sharing the responsibility of maintaining the design system.

Results

The design system has been optimised to support the dual-brand design process, resulting in significant improvements to the design workflow.

Enhancement #1: Findability

In the dual-brand design workflow, designers need to be able to quickly and easily find the right components for both brands. To achieve this, the following enhancements have been implemented.

• Clear and consistent component names
• Keeping all variants in one component
• Simple and straightforward paths
• Storybook link on every Figma component
• Improved searchability with additional tags in the component description

Enhancement #2: Usability

Components should reflect their responsive behaviors and allow for easy selection of possible variations. To achieve this, we applied following enhancements on each component.

• Implementing auto-layout and position constraints
• Utilising variants and properties
• Ensuring clean layer structure

Enhancement #3: Communication

Designers should have clear visibility into all existing variants of components within the design libraries. Clear and concise documentation of design intentions, invisible component behaviors, and the current development status help other designers make informed decisions.

Enhancement #4: Compatibility

Creating a dual brand design can be done in just a few clicks, by perfectly matching the layers and variant properties of the components.

Building a collaborative and sustainable process

In the current phase of introducing the new collaborative process, we have found the following strategies to be effective:

Providing clear rules and guidelines with plenty of examples.
Setting up a Design System Task Board to assign and track maintenance tasks.
Including alignment of potential dependencies as subtasks.
Appointing two (out of eight) designers as "Design System Police" to ensure compliance.

And the journey goes on

The success of this project depends on making the changes a part of everyone's daily routine. Close observation of team dynamics and iterating the process would be crucial for success.

The next step is to systematise the review of component update requests, making it easy for anyone to determine if the component has been built correctly. This will bring us one step closer to an autonomous and collaborative management of the design system.