Redesigned and systematized Chase's tracker components across 50 card products, establishing a scalable framework adopted by 5+ business lines.

Client

JPMorgan Chase

Year

2024

Timeframe

6 months

Role

Lead UX Designer

Outcome

60M+ users impacted · Adopted across 5 LOBs · 50 card products · Reduced call volume + design overhead

WEB

NATIVE

DESIGN SYSTEM

Track every step, measure every outcome.

Trackers looked like a small UI pattern. But across Chase products, they were quietly doing a big job: helping customers understand what they had earned, what they had left, and what action to take next. The problem was not that one tracker was broken. The problem was that every tracker was solving the same question differently.

0%
COMPLETE
100%
65%
50%
1
2
3
4
5
THE PROBLEM
19+
distinct tracker implementations across Chase products

19 trackers. One broken promise.

I once spent an afternoon counting. Across Chase's product ecosystem: 19 distinct tracker implementations. Same interaction model. Eight teams. All building the same thing from scratch, each slightly differently, each convinced theirs was right.

None of them were wrong, exactly. That was the problem.

A tracker makes a promise — this is where you are, this is where you're going, the system knows the difference. When that promise looks different across every product, users don't think "bad UX." They think: I don't trust this bank.

At 45 million cardholders, inconsistency isn't a design debt. It's a business risk wearing a UI.

Legacy tracker examples: cross-product audit

Legacy tracker examples: cross-product audit

3 trackers from different products, similar logic

3 trackers from different products, similar logic

Pain point 01
Disjointed tracker experiences

Each team designed in isolation. The result: 19 implementations of the same concept, none of them talking to each other — or to the user consistently.

Pain point 02
No scalable design system component

There was no shared foundation to build from. Every new tracker meant starting over — more design work, more engineering rework, more time nobody had.

Pain point 03
Content inconsistencies

Vague tooltips. Mismatched terminology. Progress bars that meant different things on different cards. Users were confused — and calling the support line to say so.

So we stopped patching. And started asking why.

THE DISCOVERY

The real problem was fragmentation.

Each team had solved the same problem independently — because there was no shared starting point. The inconsistency wasn't visible inside any single product. It lived in the gaps between them.

By searching keyword "Tracker" in the design org main folder
By searching keyword "Tracker" in the design org main folder
01
User trust
Subtle inconsistency across flows erodes confidence in the platform — not in any single screen, but in the system as a whole.
02
Developer time
The building blocks exist — charts, text, CTAs, tiles — but without a shared pattern or usage guide, every team assembles them differently. Same system, different outcomes.
03
Design velocity
New teams spending weeks on a solved problem instead of building on shared foundations.
04
Learning curve
New customers adapting 8 versions of one pattern. The cost multiplies every time someone joins Chase.

Fix it once at the system level. The benefit multiplies automatically.

THE RESEARCH

We didn't guess. We ran the study.

Before touching a single component, we needed to understand how users actually thought about trackers — and what 'understanding' even looked like at scale.

How we did it
Moderated 1:1
×5 sessions
Deep-dive usability sessions to surface mental models and comprehension gaps in real time.
Unmoderated Survey
~100 respondents
Scaled validation of the patterns we surfaced in moderated sessions.
A/B Testing
Quantitative
Head-to-head comparison of content hierarchies and visual treatments.
Behavioral Analytics
Ongoing
Drop-off patterns and engagement signals across existing tracker surfaces.
What we were really asking
Mental Models
"Is it more important to see what you've earned — or what you still have left to use?"
Performance & Comprehension
"Do users understand what the tracker is telling them — at a glance, without reading every word?"
What we tested it on
Chase Sapphire Reserve
Annual Travel Credit Tracker
Chase Freedom Flex
New Account Bonus Tracker
Southwest Priority
Early Bird Check-in Tracker
THE INSIGHT

Turns out, users think about money in two completely different ways.

The research didn't just tell us what users preferred. It revealed a fundamental difference in how people mentally model value — and that changed everything.

fills up →
piggy bank
You start at zero. You earn your way up.
When users think about earning, they picture a progress bar filling toward a goal. Every action moves them closer. The payoff feels rewarding — because it is.
"If I take action, I can earn a reward."
← depletes
fuel gauge
You start at full. You spend it down.
Users feel this like a budget. It's already yours — you just have to use it before it expires. The mental model is depletion, not accumulation.
"A perk from this card is available for me to use."
What the data confirmed
Remaining amount matters most
Users prioritize how much is left — not what they've already used. It's about planning the next step, not reviewing the past.
Total amount as a reference point
Showing the starting total helps users gauge progress. Without it, 'remaining' has no context.
Progress bars are emotionally effective
Participants instinctively associated a filling bar with forward momentum and reward. It carries motivational weight that text alone doesn't.
One place for all the information
When content was scattered, comprehension dropped. Consolidating everything in a single location dramatically improved clarity.

This became the logic engine behind every design decision that followed.

THE DESIGN

Two mental models. Two tracker types. One system.

The insight wasn't just academic. It gave us a design framework with real constraints — and real freedom within those constraints.

fills up →
Gaining Trackers
Start at zero. Earn your way up.
When users are accumulating toward a reward, progress is motivating. The design responds: empty bar, forward momentum, a clear payoff at the finish line.
New Account Bonus points accumulation
Spend-to-earn milestones
Early Bird Check-in benefit (Southwest)
Show the goal. Progress is the hook.
← depletes
Depleting Trackers
Start at full. Count down.
When users have a benefit to spend, they think in terms of what's left. The design follows: full bar at the start, visual depletion as they use it, urgency as it nears zero.
Annual Travel Credit (Sapphire Reserve)
Cash back from 5% quarterly bonuses
Tiered-bonus milestones from spending
Show the ceiling. The remaining balance is the story.
Design Translation
Before
After

Same component. Different logic. For the first time, the design system knew the difference.

THE DELIVERY

Not a component. A standard.

The goal was never to ship one tracker. It was to make sure no team at Chase would ever have to build a tracker from scratch again.

01
Tracker Component Library
A modular, scalable component designed to live outside any single product — and inside Chase's design system. Built to be adapted, not rebuilt.
02
Content & Messaging Guidelines
A structured copy framework with consistent tone, terminology, and formatting across all tracker types. Depleting and gaining, each with their own content logic.
03
Adoption Playbook
Detailed implementation documentation for designers, engineers, and content teams across Chase — including Ultimate Rewards, home loans, and business payments.

Adopted by 5+ teams within 6 months

THE IMPACT

60MM users. One source of truth. And we're just getting started.

60MM+
Chase app and chase.com users now experiencing a consistent tracker system
47
credit card and debit card products benefiting from consistent tracker experiences
5+
Chase lines of business that adopted the tracker model across their products
What changed
Improved user satisfaction
Post-release research showed higher clarity in understanding tracker progress, leading to measurably increased engagement across card products.
Reduced support call volume
A more intuitive tracker system reduced confusion-related inquiries, directly cutting operational costs.
Expanded adoption across Chase LOBs
Investment banking, home loans, and business payment teams adopted the tracker model — far beyond the original scope.
Increased efficiency for product and tech
A reusable, scalable component reduced design and engineering workload, enabling faster development cycles across the organization.
EXAMPLES OF NEW TRACKER USAGES
01
02
03
04
05
06
WHAT'S NEXT

AI is now inside the system.

The foundation is built. The next chapter uses it as a data source.

AI-powered tracker analysis
In progress
Measuring what the system actually does
Using AI to analyze usage efficiency, user retention rates, and satisfaction conversion across all Chase tracker implementations — turning the design system into a living performance dataset.
AI-driven component archive
In progress
A tracker atlas for the entire Chase ecosystem
Building an AI-powered library that collects every tracker use case across Chase products and credit cards — creating a matrix of horizontal product comparisons and vertical card-level tracking profiles. The system documents itself.

A component-level decision. An ecosystem-wide result.

All data shown as of Q3 2025, with NDA compliance.

CONFIDENTIALITY NOTICE

This case study contains information regarding project details and design exploration. To comply with non-disclosure agreements (NDAs), certain sensitive data—including specific merchant partner identities and proprietary metrics—has been redacted or modified. Additionally, while the core design strategy, collaborative processes, and analytical methodologies remain accurate to the original project, specific UI elements and final design outcomes shown here may differ from the launched product.

Should you require further clarification or wish to discuss the project in greater detail, please feel free to reach out to me directly.

CONFIDENTIALITY NOTICE

This case study contains information regarding project details and design exploration. To comply with non-disclosure agreements (NDAs), certain sensitive data—including specific merchant partner identities and proprietary metrics—has been redacted or modified. Additionally, while the core design strategy, collaborative processes, and analytical methodologies remain accurate to the original project, specific UI elements and final design outcomes shown here may differ from the launched product.

Should you require further clarification or wish to discuss the project in greater detail, please feel free to reach out to me directly.

Open to Senior & UX Lead roles
Let's make
Franky Wang · 2026
Open to Sr & UX Lead roles
Let's make
Franky Wang · 2026
Open to Senior & UX Lead roles
Let's make
Franky Wang · 2026
Open to Senior & UX Lead roles
Let's make
Franky Wang · 2026
Open to Senior & UX Lead roles
Let's make
Franky Wang · 2026