Stakeholder
Engineering manager
4 mobile engineers
Graphic designer
Client
Role
Product Designer
Scope
Design Token,
Material UI Kit,
Dark Mode,
Figma Variables
Timeline
Jun 2025 - Jul 2025
Overview
As a sole designer on the team, I collaborated with engineers and managers to evolve existing Material UI Kit, establishing design tokens and processes between design and engineering team for efficient workflow.
This reduced major rebrand effort of DollarWise app by 50%, streamlined design to engineering processes, and enhanced visual consistency of overall products.
Impact
Ship new brand update 2X faster
Reduced dark mode design implementation time by 50%
Consolidated 4 disjointed color schemes into 1 unified color system
Established a foundation for scalable design system.
Challenge
- Critical Issue: Growing design-to-development mismatch and design debt.
- Stakeholder Impact: Delayed product delivery timeline.
- Product Impact: Increased cost in communication and debugging, slowing down the release date.
How might we address the growing design debt and design-to-engineering gap without slowing down MVP delivery timeline?
Solution
Establishing Token Architecture with Figma Variables
The most valuable impact of the design token was that it sped up the rebranding and enabled us to ship 2x faster compared to the previous update.
Simplified token system in Figma Variables
Rebranded DollarWise Design System using new token structure
How did I get there?
Discovery
I spoke with both mobile engineers and engineering manager to understand their workflows and pain points.
I've also delved into their code to understand where the design misalignment would be coming from.
Simplifying Tokens into 3-tiered Architecture
I simplified the token structure into 3-tiered layer to maintain both structure and flexibility
The goal here was to create a shared language between design and engineering teams, so I coordinated with developers to come up with appropriate taxonomy. After a discussion, we decided to modified our token name based on Material 3 Color Roles
To keep the system lean and iterate incrementally, I decided to implement tokens on color token first, and incrementally adopt variables across typography, spacing, and radius.
Testing for Accessibility
With the new brand color being light emerald green, ensuring each primitive token meet WCAG color contrast ratio was crucial.
Optimizing for Dark Mode Design
Integrating Figma Variables into all the components in the library reduced the dark mode design time down to a simple few clicks. This not only sped up the design iteration but also significantly reduced the design mismatch.
Right Amount of Constraints - Private & Public Variables
One change we made with Figma variable was to keep the Primitive layer as private and only expose Semantic layer to the product consuming the design.
To keep the design token naming consistent with coding standard when iterating on production design
Allow designers to quickly iterate on design without having to think about which tokens to choose.
Documentation & Educating the Team
In order for a system to be effective, easy-to-understand documentation and proactively evangelizing how to use token system was crucial.
I met with engineers and managers to go through how to update and maintain the tokens talked to them about the process.
I have also visual-oriented documentation so that everyone could understand how tokens are structured within DollarWise Design System.
Lesson Learned
The hardest, yet the most rewarding part of the process was getting the buy-in from and aligning with developers
Design system isn’t so much about the components but more about building the culture and the process between team.
You don’t have to have a complete design system to make the team more productive.
