Design System
Design System Transformation @Mercatus
As company grow and people come and go, design system remains. Mercatus needed a design system to ensure consistency across designs. As the lead designer responsible for creating and managing a design system, I had the opportunity to explore and improve the existing design infrastructure.
✨Highlights
Lead designer in creating & managing a robust design system
Played a key role to the UX Guide. Provided documentation for established design rules.
Integrated design tokens into the workflow
Ensured accessibility was prioritized when creating components
Mentored designers across the organization globally, empower them to create and maintain their own design systems
Mercatus is a fully integrated SaaS eCommerce platform used by 100s of grocery stores globally serving millions of customer.
We powered the web and react native mobile apps, fulfill online orders for pickup and delivery, personalize rewards and loyalty offers, and ultimately achieve omni-channel profitability.
Year
2022 - 2024
Role
Design System Librarian
Tools
Figma (Sketch Previously)
Challenges
Design Consistency: Design produced by team members are inconsistent in font styles and colors. Overtime, the design outputs are not standardized and starting to lose quality.
Non-Standardized Components creates chaos within designs when scaling.
Lack of Documentation leads to inefficient design hand-off between designers & engineers. Engineers are confused about what to follow, e.g. one color value is in Hex code while another value is in token name. The final product does not match with the design.
Foundations, Components & Variables
As the “design system librarian” of the team, my “simple” task was to create everything from the ground up as the previous design system quickly gone out of dates and no longer can be used. To fix the problem, I followed a four-step approach to tackle it:
Audit all design files to find common themes
Going over design files can be time-intense, however it is a must-do process before everything else. I used a checklist to go over each design element like “typography”, “color”, “drop shadows”, “spacing”, etc. So I know what to look for when I was in these files.
This audit revealed valuable insights about the current status quo and highlighted the opportunities to create a unified design language.
Review with the team
I established regular check-ins within the team to discuss the progress of design system evolution. After completing the audit, I presented to the team with the findings and provided suggestions based on my prior research. These meetings allows my team mates to contribute their perspectives and ensured everyone felt ownership during the process.
Once the team reached consensus, I moved forward to the creation process.
Creation
The foundation of this phase was creating a structured and organized system for the future. I developed styles with semantic naming conventions to ensure intuitive use across the team. Rather than maintaining separate but similar components.
Related components are merged into a single component that has prop settings with documentation.
Notably, for the first time, design tokens were taken into account using Figma native variables when creating new design elements.
Update the design files that was recently handed off, ensuring alignment with our new system standard.
Collaboration
A design system isn’t complete without the involvement of our dev team. To align our goals and ensure a seamless match between code and design, I set up regular meetings with engineers to collaborate on our approach.
Our design team does not have a dedicated developer, but I made sure to keep the conversation going. Through continuous collaboration with engineers, we’ve made significant improvements to ensure alignment across teams and maintain a consistent system.
The UX Guide
Our team created a UX guide for the entire organization to reference. We structured the Design System into three categories “Foundations”, “Components” and “UX Patterns”.
The goal is simple - To ensure all the UX rules are documented and accessible. Even as a small team, we update the guide weekly to keep it up to date.
Example pages of the UX guide
It’s funny how the same thing can have so many different names - Is it “Pickup” or “Pick Up”? Is it “Checkout” or “Check Out”? Unlike elephant, we tend to forget. This was a perfect opportunity for us to scandalize the vernacular within the organization.
To solve this issue, we created a dedicated page “Glossary”. Not only general terms are documented, we categorized all the terms into “Shopping Feature”, “UI Element”, “User Type”, “UX Concept” and “Workflow” to make them easier to find and use.
We also included a link to our Slack channel allowing anyone in the organization to contribute and help keep our glossary up to date.
Spread Knowledge of Design System to the Global Organization
Mercatus got acquired. As a result, we now have designers all over the globe.
As the first team to have a working design system running, I was tasked to spread the knowledge to designers globally. I set up the meeting, made a schedule and follow up with them on a weekly basis to ensure they understand the process.
It was an learning opportunity for me to mentor other designers by showing them the real power of design systems and how we manage it through Figma.
Design System is ALWAYS Evolving
A design system is never static—it constantly evolves. That’s why I stay up to date with the latest trends, Figma updates, and best practices to continuously improve it. This not only benefits the team I work with but also adds value to the company from a business perspective.
“Brand is an exceptional UI/UX designer with a strong curiosity for user needs and a clear expertise in tokenization and design systems. His dedication and progress earned him the affectionate nickname "Master Librarian."
– Michelle MacMillan, UX Designer @Mercatus