How's it possible?
The accelerated development of this design system was driven by rigorous testing and fast-paced, one-week design sprints. I was working closely with a team of 8 designers and 4 frontend devs, we built a feedback loop that balanced creativity with technical feasibility.
Nothing is ever perfect, so we applied the “steal like an artist” philosophy that borrows smart design patterns and component logic from frameworks like Tailwind CSS & ShadCDN to create a clean, efficient, and scalable design system (currently under NDA so shhh… I can only share this much).
— PART 1
The need for tidying up
Backstory
When I joined CarDoctor, I suddenly found myself wearing every hat - strategist, senior, and decision-maker. I had a lot of creative control, but also lots of responsibilities placed on my shoulder. The first thing that caught my eye was the disconnect between design and code that made the product feel outdated and inconsistent.
At the time, everything was a patchwork of visual trends, copying popular fintech apps in Vietnam without truly understanding user needs and just ticking off stakeholder requests.
Therefore, I wanted to create something cleaner and more balanced, using ample white space and visual harmony to help CarDoctor rise above the forest of lookalike apps in the Vietnamese market.
Audit
One of the biggest challenges I faced while designing CarDoctor’s platform was the growing inconsistency between the design and the live product. Something felt off - were the developers working with a different set of assets?
To confirm, I ran a quick audit, and the results spoke for themselves: the product was a patchwork of mismatched elements, with multiple versions of buttons, badges, and components scattered across the system.
Problem 1:
Inconsistent styles and elements
The system had disorganized variants of the same elements: buttons, icons and unpolished color theory, leading to a confusing experience that made people drop off from the home screen.
Problem 2:
Misalignment with local context
CarDoctor is part of Systematic Functions, a larger ecosystem that also serves the Korean market. However, instead of building a dedicated system, the design team had borrowed components directly from the incomplete Korean product’s design system.
Laziness didn't pay off well as it was a nightmare for developers.
Problem 3:
No clear guidelines or ownership
There were no guiding principles, documentation, or governance — resulting in ad-hoc decisions and inconsistent product evolution, just a collection of reused components. Below is everything we had at the moment.
— PART 2
The new (classic) design system
Contextual inquiries
To make sure the design system worked for real people, I sat down for contextual inquiries with both designers and frontend developers. I asked what slowed them down, and watched how they interacted with the design library in real time. Those conversations revealed pain points we never saw in Figma: missing states, unclear naming, and gaps in documentation, that set the basis for the elements of the new design system as follows:
Visual and style guidelines
I began by defining a type scale that improved readability across all screens, introduced a balanced color system for contrast and accessibility, and established consistent grid styles and iconography. Color semantics across tokens were also laid out.
Everything was documented so the entire design and dev team could follow the same playbook.
Buttons, spacing and labelling
There were dozens of different button styles, each slightly different in color, shape, or spacing, and some used the same master components from a different file.
Was that everyone had been designing in isolation?
Sp, we categorized every existing button, found the patterns that actually worked, and rebuilt them into a single, flexible button system with clear spacing, labelling rules and responsive states.
Tokens and Variables
In early 2024, I stumbled across Figma’s new Variables feature, and felt that it would really be helpful. That was exactly what we needed to upscale our system.
Before that, updating colors or typography meant manual changes across countless components.
We implemented a token-based structure that defined tokens for context that automatically cascaded through every component.
The magic of variables
How carefully setting these up means you can change the font across the whole document in just 5 seconds.
— PART 3
The magic of psychology
Stay tuned for more!
Heads up, we’re getting into the brain hacks behind design systems — aka UX psychology. How do spacing tweaks, choices, and component patterns make users feel at ease, guide their attention, and actually make them take action? Spoiler: it’s not magic though, it’s science :)
