Confidential Project
This project was completed during my time at JPMorgan Chase and is subject to a non-disclosure agreement. Specific details, metrics, and visuals have been generalized or omitted to protect proprietary information. The work presented represents my contributions and process while respecting confidentiality requirements.

Offer Tracking Design System

Building a scalable design system for tracking experiences across credit card offers, benefits, and rewards—enabling teams to deliver consistent, user-centered experiences at enterprise scale.

Role Product Designer
Company JPMorgan Chase
Scope 1,350+ Offers Tracked
Design Systems Enterprise UX FinTech Web
Skim • Dip • Dive Framework
9:41
📶
🔋
Your offers & benefits
Skim
Progress
New account bonus
40%
$2,000 of $5,000 spent
Travel credit
$50 left
5% cash back
Active
Quick-scan status
9:41
📶
🔋
Your offers & benefits
Dip
New account bonus
Spend by: May 1, 2026
✈️
Travel credit
$50 of $300 left
🍽️
5% cash back
3 categories
Essential details
9:41
📶
🔋
Dive
New account bonus
Spend by: May 1, 2026
Spend $5,000 within 3 months from account opening to earn 60,000 bonus points
Spending goal $5,000
Bonus points 60,000 pts
Days remaining 45 days
Recent qualifying activity
Grocery Store • $45.23
Dec 20
Restaurant • $32.50
Dec 18
Full analytics & tracking
01 — Overview

From Invisible to Visible

Transforming how millions of customers discover and track their credit card benefits

Chase had a visibility problem. Customers were missing out on valuable benefits not because they weren't interested, but because they couldn't see what was available or track their progress toward rewards. Without proper tracking interfaces, offers sat dormant—invisible to the users who needed them most.

What started as a straightforward design request—"create trackers so users can monitor their benefits"—revealed a deeper systemic issue. As I began designing tracking experiences for specific offers, I uncovered widespread inconsistencies across the Chase ecosystem. Different teams had built isolated solutions, each with their own patterns, terminology, and interaction models. The lack of cohesion wasn't just a design problem—it was actively preventing new offers from launching.

1,350+ Offers Supported
3 Engagement Tiers
5 Tracker Categories

I transformed this tactical project into a strategic design system initiative. The result: a comprehensive tracking framework that established scalable patterns, flexible UI components, and clear interaction models. This system now supports 1,350+ offers across Chase-branded cards and partner platforms—enabling rapid deployment while maintaining consistency.

02 — The Problem

Fragmentation at Scale

Why invisible benefits and inconsistent patterns were blocking growth

03 — The Approach

Building Systems, Not Screens

How I transformed tactical design requests into a strategic framework

Audit First, Design Second

Before creating new patterns, I conducted a comprehensive ecosystem audit. I catalogued every existing tracking interface across Chase-owned platforms and co-branded partner sites, documenting inconsistencies in visual design, information architecture, interaction patterns, and terminology.

This audit revealed the true scope: teams were solving the same problems in wildly different ways.

From Patterns to Framework

The audit exposed a deeper insight—trackers weren't just inconsistent, they lacked conceptual structure. Teams were treating all trackers the same, whether they were progress-toward-a-goal (welcome bonus), consumption-of-a-resource (statement credit), or status-only-reference (points balance).

I created a five-category system that brought clarity to this complexity, establishing distinct design principles for each tracker type.

"To solve the information density problem, I created the Skim/Dip/Dive framework—a three-tiered system that gives teams clear guidance on what information to show at each engagement level."

This framework became the connective tissue that allowed diverse tracker types to feel cohesive while serving different user needs.

04 — The Solution

Skim, Dip, Dive Framework

Layered information that adapts to user intent and context

The Information Layering Approach

A three-tiered framework that balances information density with usability. This approach gives teams a clear, reusable model for structuring tracking experiences based on user intent—from quick status checks to comprehensive analytics.

Skim: At-a-Glance Status

Minimal information for quick scans—status indicators, key metrics, and progress bars. Optimized for users who just want to check if they're on track without diving into details.

Dip: Contextual Details

Mid-level information revealing offer terms, deadlines, and progress breakdowns. Designed for users who need clarity on specific requirements without overwhelming detail.

Dive: Comprehensive View

Full transaction history, detailed terms, eligibility criteria, and FAQs. Built for power users and complex scenarios requiring complete transparency.

05 — Tracker Categories

Five Types That Scale

From one-size-fits-all to purpose-built patterns

The ecosystem audit revealed that teams were treating all trackers as functionally identical. But a welcome bonus tracker (progress toward earning) has fundamentally different needs than a statement credit tracker (consumption of limited resource) or a points balance tracker (status-only reference). Users needed different information, at different times, with different urgency.

I created a five-category system that brought conceptual clarity to this complexity. Rather than one-size-fits-all patterns, each category has distinct design principles governing visual treatment, urgency signaling, information hierarchy, and interaction patterns. This system became the foundation that allowed teams to quickly identify which pattern to use for any new offer—turning an ambiguous design question into a straightforward classification decision.

📈 Progress Trackers

Track user journey toward earning rewards or reaching spending thresholds. Show accumulation over time with clear finish line.

Use Cases
  • Welcome bonus spend requirements
  • Quarterly category spending caps
  • Milestone/tiered bonus progress

📉 Depletion Trackers

Monitor consumption of limited credits or resources. Emphasize what remains and create urgency around expiration to prevent waste.

Use Cases
  • Annual statement credits ($200 airline)
  • Monthly recurring credits ($25 digital)
  • Quarterly partner credits ($75 retail)

🎯 Multi-Tier Trackers

Display both spending progress AND rewards earned across multiple achievement levels. Dual-tracking shows current tier and upcoming milestones.

Use Cases
  • Progressive bonus structures
  • Tiered annual spending bonuses
  • Loyalty tier advancement

⚖️ Comparison Trackers

Compare performance across two time periods to reveal trends and growth. Show both absolute difference and percentage change.

Use Cases
  • Year-over-year points earned
  • Quarter-over-quarter spending
  • Period performance analytics

ℹ️ Status Trackers

Display current state of benefits, balances, or eligibility without requiring action. Informational reference users check periodically.

Use Cases
  • Points balance and cash value
  • Permanent benefits (lounge access)
  • Always-on category bonuses
06 — Pattern Showcase

Skim, Dip, Dive in Action

Production-ready patterns across all five tracker categories

The following examples demonstrate the framework in practice. Each pattern shows how the five tracker categories work across all three information tiers—from quick-scan status checks (Skim) to comprehensive analytics (Dive). Toggle between tiers to see how the layered approach adapts to different user needs while maintaining consistency.

Production-Ready Patterns

These aren't just design concepts—they're production-ready patterns now deployed across Chase and partner platforms, enabling teams to launch new offers with confidence that the experience will be consistent, scalable, and familiar to customers.

Progress Trackers

Progress Tracker

New Account Bonus

Track spending progress toward earning a new account bonus. Customer needs to spend $5,000 by May 1, 2026 to earn the reward.

Progress
New account bonus
40%
$2,000 of $5,000
New account bonus
Spend by: May 1, 2026
New account bonus
Spend by: May 1, 2026
Spend $5,000 by May 1, 2026 to earn bonus reward
Requirement $5,000
Days left 120 days
Progress Tracker

Quarterly Category Bonus

Track quarterly category spending caps. Customer has spent $1,200 toward the $1,500 dining category limit for Q1, earning 6,000 bonus points.

Progress
5% Dining bonus
80%
$1,200 of $1,500 cap
5% Dining Category
Q1 2026 • Resets Mar 31
5% Dining Category
Q1 2026 • Resets Mar 31
Earn 5% back on dining purchases up to $1,500 per quarter
Points earned 6,000 pts
Max possible 7,500 pts
Progress Tracker

Quarterly Goals

Visualize progress across multiple discrete segments. Customer has completed 3 of 4 quarterly goals for Q4 2025.

Progress
Quarterly goals
4
3 of 4 complete
Quarterly goals
Q4 2025 progress
Quarterly goals
Q4 2025 progress
Complete all 4 quarterly goals to earn bonus reward
Quarter ends Dec 31, 2025
Completion reward $50 bonus
Progress Tracker

Quarterly Cash Back Earnings

Track cash back earned toward quarterly spending cap. Customer has earned $60 of $75 maximum across dining, gas, and grocery categories.

Progress
Quarterly cash back
$60
Earned
$15 left to earn
Q4 Cash Back Earnings
5% on $1,500 cap • Q4 2025
🍽️
$28
$18
🛒
$14
Q4 Cash Back Earnings
5% on $1,500 cap • Q4 2025
Earn 5% cash back on up to $1,500 in combined purchases across three categories
🍽️
Dining
$560 spent
$28
Gas
$360 spent
$18
🛒
Grocery
$280 spent
$14
Total spending $1,200 of $1,500
Quarter ends Dec 31, 2025

Depletion Trackers

Depletion Tracker

Annual Travel Credit

Monitor remaining annual travel credit. Customer has used $250 of their $300 credit, with $50 remaining before the January reset.

Depletion
Travel credit
$50
Remaining
$250 of $300 used
Annual travel credit
Resets: Jan 1, 2026
Annual travel credit
Resets: Jan 1, 2026
Use your $300 annual travel credit on eligible purchases
Total credit $300
Days until reset 38 days
Depletion Tracker

Monthly Streaming Credit

Track monthly use-it-or-lose-it credit with urgency. Customer has $10 of $20 streaming credit left with only 5 days before it resets.

Depletion
Streaming credit
$10
Remaining
Expires in 5 days
Monthly Streaming Credit
Resets: Jan 1, 2026
Monthly Streaming Credit
Resets: Jan 1, 2026
Use your $20 monthly streaming credit before it expires
Total credit $20
Days until reset 5 days

Status Trackers

Status Tracker

Premium Card Benefits

Display active card benefits and their current status. Customer has Platinum tier with 5 active perks including lounge access and travel credits.

Card Status
Platinum
Premium tier
Active Benefits
5 perks
Premium Card Benefits
Platinum tier • Active
✈️
Lounge Access
🛡️
Trip Insurance
🎫
Concierge
🏨
Hotel Status
Premium Card Benefits
Platinum tier • Active since Jan 2024
✈️
Priority Pass Lounge Access
Unlimited visits • 1,300+ locations
🛡️
Trip Cancellation Insurance
Up to $10,000 per trip
🎫
24/7 Concierge Service
Travel & lifestyle assistance
🏨
Elite Hotel Status
Gold tier at major chains
Member since Jan 2024
Annual fee $695
Status Tracker

Priority Pass Access

Display permanent benefit status with usage tracking. Customer has unlimited lounge access with 12 visits used year-to-date.

Status
Priority Pass
✈️
UNLIMITED
12 visits this year
Priority Pass Membership
Active • Unlimited access
✈️ UNLIMITED ACCESS
1,300+ lounges worldwide
12
Visits YTD
No Limit
Priority Pass Membership
Active • Unlimited access
Access 1,300+ airport lounges worldwide with complimentary food, drinks, and Wi-Fi
✈️ UNLIMITED ACCESS
1,300+ lounges worldwide
Visits this year 12 visits
Last visit Dec 15, 2025
Most visited LAX Terminal 6
Status Tracker

Rotating Bonus Categories

Display which bonus categories are currently active. Categories rotate quarterly with new activations taking effect January 1st.

Status
Q4 Bonus categories
🍽️
🛒
ACTIVE
Through Dec 31
Q4 2025 Bonus Categories
Rotates quarterly • Jan 1 - Dec 31
CURRENTLY ACTIVE
Through Dec 31, 2025
🍽️
Dining
Gas
🛒
Grocery
Q4 2025 Bonus Categories
Rotates quarterly • Jan 1 - Dec 31
Active categories for Q4 2025 bonus earnings. Categories rotate each quarter - check back in January for new selections.
✓ CURRENTLY ACTIVE
Through Dec 31, 2025
🍽️
Dining
Restaurants & food delivery
Gas stations
Fuel purchases at stations
🛒
Grocery stores
Supermarkets & grocery
Next rotation Jan 1, 2026
Categories refresh Quarterly
Status Tracker

Credit Utilization

Display circular progress for percentage-based metrics. Customer is using 28% of their $10,000 credit limit—within the recommended 30% threshold.

Status
Credit utilization
28%
Excellent • $2,800 used
Credit utilization
As of Dec 26, 2025
28%
Excellent standing
Credit utilization
As of Dec 26, 2025
Keep utilization below 30% to maintain excellent credit health
28%
Excellent standing
Total credit limit $10,000
Recommended max $3,000 (30%)

Multi-Tier Trackers

Multi-Tier Tracker

Elite Status Progress

Track progress across multiple status tiers with milestone markers. Customer has earned 35,000 points (Gold tier) and needs 15,000 more to reach Platinum.

Multi-Tier
Elite status
SIL
GLD
PLT
DIA
Gold tier • 15k to Platinum
Elite status
Current tier: Gold
Silver
Gold
Platinum
Diamond
Elite status
Current tier: Gold
Earn 50,000 points to reach Platinum tier and unlock exclusive benefits
Silver
Gold
Platinum
Diamond
Current benefits 5 active
Platinum threshold 50,000 points
Multi-Tier Tracker

Tiered Account Bonus

Track progress toward multiple bonus tiers with independent deadlines. Customer missed Tier 1 (May 1 deadline), but has spent $8,000 toward Tier 2 ($10k by Aug 1) and is still eligible for Tier 3 ($15k by Nov 1).

Multi-Tier
Account bonus
80%
To tier 2
1 missed • 2 active
Tiered Account Bonus
$8,000 spent • Next: Aug 1
$5k
10k pts
Missed
$10k
20k pts
Aug 1
Active
$15k
30k pts
Nov 1
Upcoming
Tiered Account Bonus
$8,000 spent • Next tier: Aug 1
Spend $2,000 more by Aug 1 to earn 20,000 bonus points
$5k
10k pts
Missed
$10k
20k pts
Aug 1
Active
$15k
30k pts
Nov 1
Upcoming
Next deadline Aug 1 (45 days)
Max potential 50k pts

Comparison Trackers

Comparison Tracker

Month-over-Month Spending

Compare spending across time periods with dual progress bars. November spending was $4,200 compared to October's $3,750—a 12% increase.

Comparison
Monthly spending
Nov vs Oct
$3.8k
OCT
$4.2k
NOV
↑ 12%
Monthly spending
November vs October
Nov
$4,200
Oct
$3,750
↑ 12%
+$450 increase
Monthly spending
November vs October
Spending increased by $450 compared to last month
Nov
$4,200
Oct
$3,750
↑ 12%
+$450 increase
Top category Dining (+18%)
Avg. transaction $87.50
Comparison Tracker

Year-over-Year Points

Compare points earned across years with dual progress bars. Customer earned 48,500 points this year compared to 32,000 points last year—a 52% increase.

Comparison
Annual points
2025 vs 2024
32k
2024
48.5k
2025
↑ 52%
Annual points
2025 vs 2024
2025
48,500
2024
32,000
↑ 52%
+16,500 points
Annual points
2025 vs 2024
You earned 16,500 more points this year compared to last year
2025
48,500
2024
32,000
↑ 52%
+16,500 points
Top earning category Travel (12,400 pts)
Biggest improvement Dining (+8,200 pts)
07 — Design System

Components & Infrastructure

Building reusable patterns that scale across teams and platforms

08 — Impact

Measurable Outcomes

How the framework transformed offer visibility and team velocity

09 — Reflection

Key Learnings

What this project taught me about designing systems at enterprise scale

"Design systems aren't just about components—they're about solving organizational problems. The Skim/Dip/Dive framework didn't just create UI consistency; it gave teams a shared mental model for thinking about information architecture at scale."

Working across 1,350+ offers and multiple partner platforms reinforced the importance of designing flexible systems rather than rigid templates. The most successful patterns were those that could adapt to diverse contexts while maintaining core consistency.

Perhaps most importantly, I learned that enterprise design impact isn't always measured in individual user flows—sometimes the biggest wins come from eliminating fragmentation and creating shared solutions that lift all experiences simultaneously.