Offer Tracking Design System

Before this initiative, most Chase credit card offers simply weren't visible to customers. There was no tracking interface — no place to see your new account bonus progress, your annual travel credit balance, or your category spending toward a quarterly cap. If an offer did exist in the system, getting it in front of customers required months of custom design and engineering work, each time from scratch. Teams weren't slow — they were stuck. The result was a backlog of dormant offers that never launched, and millions of customers who didn't know what their card was doing for them.

What started as a request to design a few tracker screens revealed the real problem: every team that had attempted to build tracking experiences had done so independently, without coordination. No shared patterns, no shared language, no shared components. The ask wasn't just to design trackers. It was to build the system that would make offer tracking possible at all.

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.

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

The three tiers map directly to surfaces: Skim is designed for overview pages like the card dashboard and Benefits tab — surfaces with many competing elements. Dip is for the Tracker Hub itself — a card-focused surface where offers are the primary content. Dive is the individual offer detail page, dedicated to a single tracker.

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 four-category framework 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 framework 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.

The following examples demonstrate the framework in practice. Each pattern shows how the four 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.

While spend & earn trackers focus on building toward a goal, usage trackers address the opposite need — tracking what's being consumed.

Not every benefit requires progress tracking. Some benefits are always-on and just need clear status visibility.

Multi-tier is a sub-pattern of Spend & Earn: some benefits span multiple levels of achievement, requiring trackers that communicate both current status and what's ahead.

When earning a benefit depends on specific behaviors rather than spend, action trackers make the next step obvious and show which required actions are already done.

The Skim/Dip/Dive framework and four 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. This was the first time Chase had a single, card-aware destination for all trackable offers. Previously, that view simply didn't exist.

Building the Tracker Hub solved the destination problem — but a destination is useless if customers can't find it. The Chase mobile app has multiple surfaces where customers interact with their cards: the Card Overview Detail (OVD) page, the home feed, notification banners, and the EMOB (Early Month on Book) onboarding flow. Each surface represented an opportunity to surface tracker information and drive users into the hub. The design challenge was determining what information to show at each entry point, how much to reveal versus tease, and how to create a consistent "thread" that pulls users deeper.

I designed entry points across four key surfaces, each calibrated to its context. On the Card OVD (the primary card management screen), tracker tiles sit prominently below the card art — showing Skim-level summaries of the customer's most relevant offers with a "Track your progress" CTA that opens the full hub. For limited-time incentives, a banner pattern with urgency signaling (countdown, amber accent) surfaces above the fold to drive time-sensitive action. On the EMOB smart checklist (which new cardholders see in their first weeks), the tracker entry point is woven into the onboarding flow — encouraging customers to start tracking from Day 0. And for portfolio-wide offers, entry points surface on the home feed as awareness-building tiles.

Each entry point follows three rules: (1) Show just enough to create intent — a progress bar, a key metric, or a deadline — without duplicating the hub's full content; (2) Every entry point leads to the same Tracker Hub destination, building a consistent mental model of "where my offers live"; (3) Entry points are context-sensitive — a new cardholder sees their NABO progress prominently, while a tenured cardholder sees their portfolio offers and category spending. This ensures the right information reaches the right user at the right moment.

Working across 1,000+ 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.

The Tracker Hub taught me that components are only half the story. A design system gives you the building blocks, but without a coherent destination and clear discovery paths, those blocks remain scattered across the product. Designing the hub and entry points was really about designing the system of navigation — ensuring that no matter where a customer starts in the app, their most relevant offers are always within reach.