About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
About Me
I'm a twenty six years old designer form Taiwan who recently got a master's degree from the Digital Media program at Northeastern University. My concentration of design are user experience, user interface, and interactive design. Or people may known as websites, applications, and platforms.
KKBOX Design System
By establishing the design system
- Accelerated the design hand-off efficiency
- Standardized the design consistency
- Visualized and regulated the design debt
# Design System # UI Design
Background
It was an interesting time when I joined KKBOX. The company is trying to rebrand and revamp the product. Also, the new design lead switched the design tool from Sketch to Figma. For the above reasons, I was lucky enough to participate in the rebuilding of the design system. Below are a few examples of what we have done and how we have done it.
The Problem
Design Debt
- Too many UI variants. Don’t know which is the newest version.
- Messy design files. Don’t know where have I used this component.
- Bulky and incomprehensible hand-off document. Extra communication cost between cross-functional teams.
- Unsynchronized guidelines without documentation. Accumulate inconsistency.
Cost Communication Time / Human resources / Product consistency
Solution
It’s impossible to drop everything on our hand and fix the debt that we’re facing. So, while we keep proceeding with the projects we have, there are three important things we can do to turn things over. Firstly, develop a system (Design Ops) in order to stop designers from accumulating design debt. Secondly, conduct a design system inventory to visualize and point out the debt that we have. Lastly, we have to keep this issue in mind and try to fix a little part of it while we have the chance and resources during a project.
01
Design Ops - Define what's "I'm done"
Not only hand-off the design to engineers / PMs, designers must form a better design process by syncing up the design decisions with stakeholders and design team before done.
Make sure the files are well labeled and organized by providing templates. Maintain hand-off documents' clearness and readability for other designers and collaborating teams.
Figma File Template
Hand-off Document Template
02
UI Components Library
Conducted UI inventory and built every UI components into reusable assets. Designers can reuse the components to improve efficiency and also make sure that we're consistently using the newest version. If needed, we can also update the UI in all files at once by modifying the master component.
UI Components Library
03
Semantic Color
There were three different semantic color systems in different platforms' (iOS / Android / Desktop) code base of our product. However, there isn't a unified version. By establishing the semantic color system, we aligned all platforms' system. It strengthened the product consistency and simplified the hand-off process by not providing different themes (Light / dark mode). Also, it enhanced the flexibility of color modification.
Semantic Color Guideline
Semantic Color
04
Design Guideline - KKBOX XD Playbook
In order to form a consistent product with several designers working together, there should be a well-documented design guideline. So that design-system-related decisions won't be scattered around in different project files. And newly onboard designers could get into the swing easily. In our case, another purpose is to visualize our design debt.
KKBOX XD Playbook
Outcomes
Consensus of design debt
Design team members would all have a consensus of not keep accumulating design debt
Product consistency
Product would have a stable consistency which provide a consistent experience for users
Minimize communication for uncertainty
Systemize and defining everything would help lessen the cost of communicate back and forth