Native Mobile Design System
I championed an organization-wide Figma migration that powered the creation of our native mobile app design system. This formed a single source of truth for app experiences which improved workflows and allowed us to expedite a rebrand. {2020-2021}
My Role
Stakeholder Management
Strategy
Mapping of all screens & components
Wireframes
Player-coach
Tools
The Impact
Single source of truth
Aided to maintain consistency and coherence, ensuring a seamless and unified user experience across iOS and Android.
Figma Migration
Catalyst for transitioning the entire organization to Figma, promoting a more efficient and unified design ecosystem.
Designer/ Dev workflows
Improved collaboration with product, design and engineers and accelerated the product development process.
Expedited Rebrand Efforts
Played a pivotal role in accelerating a successful rebranding initiative.
40+ Native mobile components
The Problem
Market research had revealed that when our customers downloaded the app they were also more engaged with the program as a whole. In light of that, in 2020 we inherited the design and build of our mobile app from external agencies. Unfortunately, we also inherited disorganized or missing wireframes. There were no centralized repositories for design assets, there were inconsistent app identities across platforms and there were prolonged timelines due to custom component coding.
​
Then, the brand team launched a rebrand initiative. And as the design lead I was now faced with redesigning the entire app. The opportunity cost of not prioritizing our mobile app was glaring and I knew that we needed to make significant changes if we were going be successful. Meeting the high demands of the rebrand in a short period of time was a daunting task but I also recognized it as an opportunity to demonstrate how powerful a design system could be. So I took it!
​
​
Our Users
4+ Designers
9 Engineers
2 Publishers
Our Design system aimed to be accessible, reusable, collaborative and flexible
Breaking down complexity with process
01
Designers and engineers align on foundational elements:
-
Do we really need a new component?
-
Name of the component
-
What might it look like
-
Custom or native?
Design Criteria
.png){kind=small}
02
A critical session for designers to pressure test components with help from outside stakeholders:
-
Get better alignment across web and app
Design Reviews
03
From documentation to Figma:
-
What are all the states and styles we need to support?
-
What are the component's properties in Figma versus it's properties in Android and iOS?
-
How do the specs change between Android and iOS?
Detailed Design
04
Delivering components to both designers and engineers:
-
How do we unify components and styles across platforms?
-
How do we deliver platform-specific components to designers?
Handoff
Implementation
-
Incorporated development of components into weekly sprints.
-
Design system was integrated into design and development workflows.
-
Created clear governance policies in collaboration with other designers, developers and engineers.
Lessons Learned
-
Cross-functional design systems require buy-in at the highest organizational level.
-
Without a dedicated team and resources, design systems can become outdated and less effective over time.
-
Upfront very clear documentation of component expectations can reduce significant rework for both designers and engineers.
