Mobile Design System
Create components and patterns for iOS and Android for our design system Tangram.
Our goal was ambitious: to build a unified system that would enable seamless experiences across both mobile and web, enhancing designers' confidence when creating for multiple native platforms.
Company Trade Me
Team Jenna Ritchie (Lead), Kate Bennett (Designer), Jamie Sanson (Android Tech Lead), Chris Hawkins (iOs Tech Lead)
Scope 1 Year
Trade Me’s mobile designers had to navigate three design systems: Apple’s HIG, Material Design, and our web system Tangram. time pressures meant iOS-first designs were often retrofitted for Android, leading to poor experiences and platform inconsistencies.
This multi-design-system approach meant only 27% of our designers were confident designing for both iOS and Android.
One System, Multi-Platform: A Unified Approach
I led the push to unify our mobile design approach. Creating one component system that supported both platforms without compromising on native usability, accessibility, or our brand identity.
What I did
Set a rule: no component was released unless it worked natively on both platforms to prevent divergence and design debt.
Worked closely with devs to refine component naming and structure—eventually reverting to native naming to support better handover.
Prioritized “cohesion over consistency”: We used platform defaults where possible to streamline development while maintaining brand alignment.
Made deliberate trade-offs (e.g., using system fonts on iOS) to reduce dev overhead without compromising the experience.
Baked in accessibility and dark mode from day one.
Designed a collaborative rollout: ran workshops, co-created components with designers, and launched monthly design Showcases to share progress, learnings, and new components.
10 months after the initial project kickoff 73% of our designers were confident or extremely confident about which components to use when designing for both our native platforms
Next project:
Welcome to Sharesies