Wallet Design System
Evolving the Wallet Design System — Google Wallet's design system built on Material 3 Expressive.
When
- 2024 – Present
Platform
- Android
- Web
Expertise
- Design Systems Design
Tools and Tech
- Figma
Background
Google Wallet is a digital wallet platform that allows users to store payment cards, loyalty cards, boarding passes, event tickets, and digital keys on their Android devices.
The Challenge
Migrating Wallet's design system to a new design language without breaking user trust.
- Wallet Design System was built on Material 3
- Google rolling out M3 Expressive across all products
- Not just a visual refresh: tokens, components, and guidelines all needed rethinking
- Financial product = zero tolerance for confusion or regression
My Role
As UX Designer on the Design Systems team at Google Wallet, I supported design systems work for the M3 to M3 Expressive migration for the Wallet Design System.
- Drove system updates across core components, patterns, and documentation
- Maintained the component library, design tokens, and usage guidelines
- Partnered with engineers and the Material Design team on implementation
- Authored migration documentation and onboarding resources
Material 3 Expressive
The next evolution of Google's design language across phone, tablet, foldable, and watch.
Color
Expanded dynamic color with more tonal range and emphasis options.
Motion
Expressive motion patterns that communicate hierarchy and state.
Typography
Updated type scale with bolder contrast between display and body.
Migration Principles
Preserve trust — Expressive changes must reinforce, not undermine, user confidence.
Token-first migration — Update tokens first (color, type, spacing), then propagate to components.
Parity before expression — Achieve functional parity first, then layer in enhancements. No regressions.
Document as you go — Capture every decision in real time to ease team adoption.
Validate with engineers — Co-validate components against implementation constraints early.
Process
Audit → Map → Migrate → Validate → Document
Audit — Inventory all components, tokens, and guidelines against M3 Expressive specs.
Map — Track what needs updates, replacements, or net-new additions.
Migrate — Update Figma library: tokens first, then atoms, then complex components.
Validate — QA migrated components across real Wallet surfaces with engineering.
Document — Update usage guidelines, migration notes, and onboarding resources.
Results
- 100% of WDS components migrated to M3 Expressive
- Faster designer-to-engineer handoff through co-validated components
- Clear migration paths enabled consistent adoption across Wallet surfaces
- Cross-Google influence: best practices shared with other product teams
Final Thoughts
This work is ongoing. The Wallet Design System continues to evolve as M3 Expressive matures — and every decision made during migration shapes how Wallet's product teams design and build going forward.