Rebuilding the design system to unify 4 platforms
4 months
KKCompany
Component Development
Guideline Documentation
Tool adoption workshop
Designers
[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 from the ground up—including components, semantic colors, workflows, and cross-team alignment.
Within this transition, I owned several system foundations and collaborated on broader library and guideline development.
What I led
- Created the end-to-end handoff template that standardized how designers and engineers worked together.
- Ran co-learning workshops to help the design team adopt Figma efficiently.
- Built the semantic color structure and aligned it with the engineering token system.
What we co-built
- Reconstructed ~30% of the component library as part of the system team.
- Contributed ~40% of the design guidelines and established core standards across components, usage patterns, and interactions.
[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
[Delivery]
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 - KKCompany 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.
Thanks for reading.
