Google

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

Wallet home in Material 3 (left) versus Material 3 Expressive (right), showing the visual language shift driving the migration.

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.

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

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

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 the View Header (Status) component in Material 3 versus Material 3 Expressive.

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.