Good Finance Design System 1.0
Increase handover efficiency by 20% through the development of a unified system from scratch.
Intro
As our product team grew, we shifted from Sketch to Figma for better collaboration. However, lacking a single source of truth for design foundations caused communication challenges. To solve this, we implemented a unified design system, streamlining processes and enhancing developer collaboration.
My Role
UX Designer
Project Type
Design System
Timeline
Apr 2022 - Oct 2022
Team
Senior UXUI Designer - Sandra. Mobile (iOS & Android) - Yuta, Yu Xiáng, Josie, Claire.
Responsibilities
Develop design system principles and structure for consistency and efficiency.
Create a Figma component library, managing version control and updates for the design system.
Coordinate with iOS & Android development teams for system integration.
Impact of Project
One Small Step For Design, One Giant Leap For The Team
The implementation of the new design system resulted in a 20% increase in efficiency and a 25% reduction in UI-related bugs. These improvements were measured through project time tracking and bug reports collected over a six-month period before and after the design system was introduced.
To understand the problem, we talked to the entire product team, including UX/UI designers, Product Managers, and developers, to identify critical issues stemming from the lack of a design system that affect our internal workflow processes and external user experiences:
Disorganized Filing System
The lack of a comprehensive component library and scattered documentation slowed workflows and caused misunderstandings among team members.
Same Components, Different Behavior
Quality tests later revealed inconsistent component behaviors, highlighting a misalignment between developers and designers that led to varied user experiences on iOS and Android.
Various Formats of Writing
A major issue in our app is the inconsistency in writing formats, causing content writers and product designers to use varying styles.
Systemize and establish the company's first Figma Design System component library, centralizing all app components for streamlined team collaboration, on-time delivery, and design consistency.
We held biweekly syncs with the iOS and Android mobile teams, aligning on component updates and clarifying documentation. These focused check-ins balanced our time between design system development and other ongoing projects, keeping everything in sync amid a busy schedule.
Design Systems Structure - Think Like LEGO
Our design system structure comprises 'Principles', 'Foundation', 'Tokens', 'Components', and 'Layouts'. 'Principles' serve as the framework for all design decisions, whereas 'Foundation' encompasses fundamental design elements. 'Tokens' ensure visual consistency, 'Components' are reusable UI elements for creating various interfaces, and 'Layouts' offer blueprints for arranging components, thus streamlining the design process within our Product Design team.
Core Design Principles - Ingrain Value From the Start
At our workshop, we brought together 15 colleagues from various departments to collaboratively establish the guiding framework for our Design System. This cross-functional effort ensured the system met the needs of developers, designers, marketing, and customer support teams alike. From this process, we formulated core design principles: 'Make it Reusable & Scalable,' 'Make it Clear,' and 'Make it Efficient.'
Documentation - Keeping the Team Aligned
Pre-design system era, components were scattered across project files, leading to difficulties in locating and managing them. Consequently, there was no centralized place for designers and developers to access specific details.
To solve this problem, we created a component library in Figma, and documented the design system through two approaches: "How to Write and Organize" and "How to Build a Component". The former provides clear guidelines on file organization and writing. The latter offered instructions for designing components with responsive design and consistent naming system.
UX Writing Guidelines - Creating Experience Between the Lines
The UX writing guidelines cover 'Writing Formats' and 'Writing Personality,' establishing clear standards for consistency across our team. These include specifics on terminology (e.g., 'WiFi' vs. 'WIFI'), date and currency formats (NTD, TWD, $), and bilingual numeric and word integration (Traditional Chinese and English). I also defined 'Tone by Situation' to tailor writing styles to different user scenarios and experiences.
We communicated with the Mobile and Brand team to provide them with an understanding of how the design system was organized and applied in their respective domains. This allowed us to gather valuable feedback from each team, enabling them to share their insights, suggestions, and concerns.
Develop a Iteration Workflow
In order to continuously improve the design system, we remained open to requests and contributions from various teams. Therefore, to ensure consistency, we developed a process for building or enhancing components, regardless of whether the requests came from external teams or our own.
Team Impact
Initially, developers revisited all components, which eventually led to increased productivity across our team:
Developers freed up more time developing, reducing the likelihood of bugs.
QA team identify inconsistencies more efficiently between iOS and Android devices.
Designers invested more time in identifying problems, research, idea generation, and high-fidelity refinements.
With the design system, we allowed the team to focus on solving customer problems.
Here is a glimpse into the workflow utilizing the design system (Note: This is a sped-up version, as it still takes about 5 minutes to design)
How Might I Have Done it Differently?
Looking back, setting up a feedback channel for team members to report issues, suggest improvements, and share experiences with the design system could have enhanced communication and facilitated ongoing refinements. Additionally, considering the long-term vision, I would split the foundations and components into separate library files, enhancing modularity.
It's a Never Ending Process
Building a design system is a continuous process that evolves alongside the team and end-user needs. Therefore, we need to design for the long term to make sure it is constantly adapting to new needs of the company and end-users.
Never Forget the End User
Even though we created it for internal usage within the company, we always circle back to the actual users. Sometimes, I momentarily lose sight of whom I'm designing for, but once I remember, it becomes easier to make design decisions, especially when facing challenges.
Structural Thinking From LEGO
Like LEGO blocks, everything starts with something small. Building a design system may not yield immediate effects, its value lies in streamlining workflows, fostering consistency, ultimately leading to improved user experiences and more efficient product delivery.
Next Project
Royal College Of Art Portfolio
Learning the Design & Research Process
In 2020, I pursued my passion for design at the Royal College of Art's Graduate Diploma of Art and Design. During this time, I learned three important lessons...
