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.
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.
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,000+ offers across Chase-branded cards and partner platforms—enabling rapid deployment while maintaining consistency.
Fragmentation at Scale
Why invisible benefits and inconsistent patterns were blocking growth
-
Invisible Value
Many offers weren't being displayed because no applicable design pattern existed for them. Research showed a strong business case: increased visibility of trackable benefits would drive higher loyalty, engagement, and redemption rates. But without consistent tracking patterns, product teams couldn't launch new offers at scale.
-
Fragmented Ecosystem
As I designed initial tracker concepts, the scope of the problem became clear. Teams across Chase had independently built tracking interfaces for their specific use cases—welcome bonuses, category caps, statement credits, points balances—each with different visual treatments, information hierarchies, and interaction patterns. Customers experienced jarring inconsistency depending on which offer they viewed or which partner platform they used.
-
No Systematic Approach
Every new offer launch required custom design work. Teams lacked clear guidance on information density, progress visualization, urgency signaling, or when to show what level of detail. Some trackers were too minimal, leaving users confused about requirements. Others overwhelmed users with dense information blocks. There was no shared language or reusable components.
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.
This framework became the connective tissue that allowed diverse tracker types to feel cohesive while serving different user needs.
Skim, Dip, Dive Framework
Layered information that adapts to user intent and context
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.
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.
- →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.
- →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.
- →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.
- →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.
- →Points balance and cash value
- →Permanent benefits (lounge access)
- →Always-on category bonuses
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.
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
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.
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.
Quarterly Goals
Visualize progress across multiple discrete segments. Customer has completed 3 of 4 quarterly goals for Q4 2025.
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.
While progress trackers focus on building toward a goal, depletion trackers address the opposite need — tracking what's being consumed.
Depletion Trackers
Annual Travel Credit
Monitor remaining annual travel credit. Customer has used $250 of their $300 credit, with $50 remaining before the January reset.
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.
Not every benefit requires progress tracking. Some benefits are always-on and just need clear status visibility.
Status Trackers
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.
Priority Pass Access
Display permanent benefit status with usage tracking. Customer has unlimited lounge access with 12 visits used year-to-date.
Rotating Bonus Categories
Display which bonus categories are currently active. Categories rotate quarterly with new activations taking effect January 1st.
Credit Utilization
Display circular progress for percentage-based metrics. Customer is using 28% of their $10,000 credit limit—within the recommended 30% threshold.
Some benefits span multiple levels of achievement, requiring trackers that communicate both current status and what's ahead.
Multi-Tier Trackers
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.
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).
When customers need to evaluate options side by side, comparison trackers provide the structure to make informed decisions.
Comparison Trackers
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.
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.
One Place for Every Offer
Centralizing all of a customer's trackable benefits into a single, card-aware destination
The Skim/Dip/Dive framework and five tracker categories solved the design problem — how to present any individual offer consistently. But a bigger UX problem remained: customers had no single place to see ALL their available offers, bonuses, and benefits across their cards. Welcome bonuses, statement credits, category spending caps, and portfolio offers were scattered across different screens and features in the app. A customer with multiple Chase cards had no way to get a unified view of what was available to them.
The Tracker Hub is a dedicated destination within the Chase mobile app that aggregates every trackable offer across a customer's card portfolio into one view. At the top, an account selector lets users switch between their cards. Below, a tab system organizes offers by status — Active, Earned, and Expired — each rendered using the Skim/Dip/Dive patterns from the design system. The hub supports complex offer types including bundled offers (multiple requirements grouped under one reward), multi-tier bonuses (spend thresholds that unlock progressively larger rewards), and transaction + spend hurdle combinations.
The hub needed to handle significant complexity without overwhelming users. I designed it with progressive disclosure at its core: the default view shows Skim-level summaries for all offers (progress bars, key metrics, deadlines), with tap-to-expand into Dip and Dive detail. A tab-based navigation separates offer statuses so users can quickly orient to what matters most. The account selector was critical — many customers have 2-3 Chase cards, and the hub needed to feel like "your card's offers" rather than a generic offers page. Skeleton loaders handle async data fetching, and error states were designed per-offer-type so a single API failure doesn't collapse the entire view.
The Tracker Hub supports 6+ distinct offer types — from simple single-hurdle spend bonuses to complex bundled offers with multiple concurrent requirements. Each type uses the standardized tracker components from the design system, but the hub's architecture handles the orchestration: which offers to show, how to prioritize them, how to handle partial data, and how to surface urgency when deadlines approach.
Drag to see what the system changed
The same three offers, rendered the way teams used to ship them — and the way the design system renders them now.
▾