Overview
In my previous career, I experienced building a design system from zero to one at Snapask and improving the existing design system after I joined Swingvy. In this article, I'm going to share my approach and learnings throughout my experience of building a design system in two product teams.
Contribution
Structure the system
Build component from scratch
Improve component quality
Company
Snapask
Swingvy
My Goal
01
Structuring the design library to make components easily searchable.
02
Creating easy-to-maintain and reusable components for designers.
03
Designer is my user. I learn about their pain point, and continuously improving the components.
Empower Creativity
A design system enables designers to concentrate on problem-solving while entrusting consistency and usability matters to the design system.
My Approach
01
Structure the System
Define the map of our design system
02
Maximize Reusability
Build component with Atomic Design approach
03
Validate the System
Collect feedback from designers and iterate component continuously
01
Structure the System
Back in 2018 when I joined Snapask, our primary toolkit was Sketch + Zeplin. It marked the early stage of our design library.
At the time, we had multiple component libraries with the same color styles, and icons were scattered across different files, existing only in the files where they were utilized.
The original approach harmed the reusability of icons and color styles. Designers had to maintain these duplicate elements in multiple files.
I proposed the idea of a "Base" library to my team leader (later discovering Spotify used a similar approach). I created the "Base" design library, where all universal elements (icons, logos, illustrations) resided. Exclusive components and typography remained in each platform design library.
This streamlined maintenance, as universal elements only needed updates in one place and could be used throughout our product.
02
Maximize Reusability
To enhance component reusability, I adopted the Atomic Design approach. I crafted components starting from the smallest unit – the element – and then assembled them into larger components.
This method simplified component maintenance; a change to one element automatically reflected in all components containing that element.
Element
Component
Template
Category Name
See more
Course Name
Tutor Name
10 Lessons
HK$480
HK$2400
Tag Text
Course Name
Tutor Name
10 Lessons
HK$480
HK$2400
Tag Text
Example
Redesigning the Table Component
Not every component is as straightforward as a button or toggle
In January 2023, before joining Swingvy, I was tasked with redesigning their frequently used table component. Through quick Slack discussions, I discovered that designers found it challenging to modify the number of rows as it required detaching the table component, resulting in lost functionality of component.
My objective was to enhance the usability of the table component.
Tidy up current component
Table component has been created for quite some time, it was inherited from a Sketch library, harbored unnecessary or hidden layers and lacked Figma features like Auto Layout.
To enhance usability, I first cleaned up the component structure, applied Auto Layout and Component Property. Building on this foundation, I applied the Atomic Design approach, creating separate components for Header, Row presets, and Footer, then assembled them to form the redesigned Table component.
Document the Component
Considering the complexity of the Table component, I created a comprehensive step-by-step tutorial on its usage. And it indicated who is the go-to when designer encounter any problem (That’s me!).
Now, designers can set up the table component to meet their requirements. And after adjustments, detach the Row preset component to modify the number of rows.
Iterate continuously
Designers at Swingvy were pleased with the initial version and its documentation, but it is not the end for me! I believe there is a better way to do, without the needed to detach component at all.
After some research, I came up with the idea of swapping the Row component. In the final version, I introduced a "placeholder" component and provided designers with preset Row components. Now, designers can create their Row component in the local file without the need to detach. The added bonus? Data is now reusable!
03
Validate the System
I validate my components by directly engaging with fellow designers.
Given the small size of the design team, I share design system updates via messages or video, seeking feedback. Below is a review I received at the end of my probation period at Swingvy.
Thank you, Yujin.
The journey continue…
I am thrilled to have the opportunity to be a part of these design system projects, I learn so much and there's still much space to be improve, like I haven't include UX motion into design library, and I want to have more chance collaborate with engineers, making sure the pixel and code align perfectly, maybe there is a way designer can alter the design without the help from engineer?
And since the AI generation is here, is there way to automate all this process of building component? I am sure I will find out.
