Offer Tracking Design System

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.

While progress trackers focus on building toward a goal, depletion 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.

Some benefits span multiple levels of achievement, requiring trackers that communicate both current status and what's ahead.

When customers need to evaluate options side by side, comparison trackers provide the structure to make informed decisions.

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.

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.