BUILDING A DESIGN SYSTEM:
Leading the team transition to Figma by creating a new Mobile App Design System
Client
Total Wine & More
Date
Ongoing
My Role
Lead Product Designer for the new mobile app Figma Design System. Responsibilities include tracking and cataloging previous design systems, creating all new system elements including typography, button styles, atoms, molecules, and full screen setups for the mobile app team, and constant collaboration with developers and product owners to ensure the new system works in the most efficient way possible.
Project Overview
When our Product Design team decided to make the transition to Figma as our primary design software, we knew the process would involve creating a new, more comprehensive design system. As the Lead Designer on the Total Wine & More Mobile App, I decided to take on the task of creating a new design system to assist with this transition.
The Challenge
With a comprehensive design system already in place in a different software system, we really needed to take a step back to see what elements were working and what were not, in order to make informed decisions moving forward. And, of course, this work needed to happen alongside and during existing sprints and product launches.
Should we utilize elements of the system and try to rename and relabel, or should we just start from scratch?
Would this new system work for the developers more than previous iterations?
How might we ensure that the learning curve for new developers and product designers remains low as they begin to use this new design system?
Can we utilize Figma as a software to the best of its ability in order to create an easy and intuitive process?
The new mobile app design system was ultimately created from a blank canvas - a very freeing feeling!
Results
The new mobile app design system was ultimately created from a blank canvas - a very freeing feeling, yet slightly daunting at the same time! As someone who loves organizing chaos, I found comfort in the creation of all of those icons, buttons, cells, and molecules.
There has been something so satisfying about starting this project and working on it over time. I have made quite a few mistakes - forcing myself to revisit and rework elements I never thought I’d have to touch again once established. But my design process improved! And it’s such a gratifying feeling knowing new designers and developers who join the team will have an easy-to-understand design system created in Figma.
Building Blocks of the New System
Blocks eventually made way for screens, and screens provide a solid foundation for new features and product launches.
