Wallet Design System
Evolving the Wallet Design System, Google Wallet's design system built on Material 3 Expressive.
When
2024 – Present
Platform
Android • Web
Technologies
Figma
At a Glance
The challenge
A new design language
Migrate Wallet's design system from Material 3 to M3 Expressive without breaking user trust.
My role
Systems designer
On Wallet's Design Systems team — driving component, pattern, and documentation updates for the migration.
The impact
Set the standard
The calls we made during the migration now shape how Wallet's product teams design and build.
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.
Built on Material 3
Wallet's design system was based on Google's existing M3 framework.
Rolling out across Google
M3 Expressive expanding to every Google product.
More than a visual refresh
Tokens, components, and guidelines all needed rethinking.
Trust is the product
It's a financial product, so confusion or regressions aren't acceptable.
Material 3 Expressive
Google's design language refreshed 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 should reinforce user confidence in the product.
Token-first migration
Update tokens first (color, type, spacing), then propagate to components.
Parity before expression
Reach functional parity first, then layer in enhancements. Existing flows can't regress.
Document as you go
Capture decisions in real time so the rest of the team can adopt them without re-litigating.
Validate with engineers
Co-validate components against implementation constraints early.
Process
The same five steps, repeated for every component in the library.
Audit
Inventory components, tokens, and guidelines against M3 Expressive specs.
Map
Track what needs updates, replacements, or net-new additions.
Migrate
Update the Figma library, starting with tokens, 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% migrated
All WDS components moved to M3 Expressive.
Faster handoff
Co-validated components shortened designer-to-engineer cycles.
Clear migration paths
Consistent adoption across every Wallet surface.
Patterns picked up elsewhere
Migration approaches reused by other Google product teams.
Final Thoughts
This work is ongoing. WDS keeps changing as M3 Expressive matures, and the calls we made during the migration are now baked into how Wallet's product teams design and build.
Contact
I'm available for full-time and contract design systems work.
Start a conversation