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
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.
THE PROBLEM
23
distinct tracker compoment implementations across Chase products
Broken trackers. Broken promise.
I once spent an afternoon counting. Across Chase's product ecosystem: 23 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.
Pain point 01
Disjointed tracker experiences
Each team designed in isolation. The result: 23 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.
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
Every team rebuilding the same logic, slightly differently. Multiplied across 12 products, the wasted effort compounds.
03
Design velocity
New teams spending weeks on a solved problem instead of building on shared foundations.
04
Onboarding
New designers learning 8 versions of one pattern. The cost multiplies every time someone joins the team.
Fix it once at the system level. The benefit multiplies automatically.
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 →
Rewards
You start at zero. You earn your way up.
When users think about rewards, they picture a progress bar filling toward a goal. Every action moves them closer. The payoff feels earned — because it is.
"If I take action, I can earn a reward."
← depletes
Benefits
You start at full. You spend it down.
Benefits feel 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.
Before & After
Before
After
Same component. Different logic. For the first time, the design system knew the difference.