Chris
Griffin
ProjectsBlogRésuméAbout
Back
Google

Wallet Design System

Evolving the Wallet Design System — Google Wallet's design system built on Material 3 Expressive.

Wallet Design System
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

Side by side comparison of FOP Row component in Material 3 versus Material 3 Expressive.
Side by side comparison of FOP Row component in Material 3 versus Material 3 Expressive.
Side by side comparison of Wallet Tip component in Material 3 versus Material 3 Expressive.
Side by side comparison of Wallet Tip component in Material 3 versus Material 3 Expressive.
Side by side comparison of Pass List Item component in Material 3 versus Material 3 Expressive.
Side by side comparison of Pass List Item component in Material 3 versus Material 3 Expressive.
  • 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.

Nitro Design System