Context

Overview

When I joined KKCompany, the company was rebranding and revamping its main product, KKBOX. At the same time, the new design lead transitioned the team from Sketch to Figma. These changes led the design team to rebuild the design system and workflow. Below are examples of what we accomplished and how we executed them.

‍

Problem

Accumulated design debt, leading to imperfections in the user experience and design process

After 20 years of growth and innovation, the lack of design refactoring has led to the accumulation of design debt.

• Disorganized design assets → Uncertainty about component usage and version control
• Bulky and unclear hand-off documents → Increased cross-team communication costs
• Lack of centralized and documented design standards → Difficulty understanding the rationale behind design decisions

Solution

Improving across three levels: design team, cross-departmental partners, and the organization

We can take three key actions to reverse the issue:

• Develop a hand-off system to improve workflow efficiency and stop designers from accumulating more inconsistencies
• Conduct a design system inventory to identify inconsistent components between design and development
• Establish a design guideline to document brand and product standards, ensuring accessibility across the organization

Outcome

1. Design Ops – Defining “I’m Done”

To reduce inconsistencies in hand-off documents and improve workflow efficiency, I developed a Figma hand-off template. I interviewed four engineers about their pain points in reading design specifications and incorporated their insights into the template design. I also held a workshop to train designers on its use.

‍

2. UI Components Library

Next, we moved on to building the design system. We conducted a UI inventory and transformed every UI component into reusable assets. Designers can now reuse these components to improve efficiency and maintain consistency with the latest version.

‍

3. Semantic color

We also established a semantic color system to align all platforms (iOS, Android, and desktop), enabling a more structured approach to color management. This system also simplified the hand-off process, as UI no longer needed separate light and dark mode designs.

‍

4.Design Guideline - KKBOX XD Playbook

Finally, to ensure long-term consistency in a multi-designer workflow, we created a comprehensive design guideline. This prevents design-system-related decisions from being scattered across different project files and helps new designers onboard faster.