General Tracker Component Redesign
Mobile / Web experience design for
Project Overview
Key Outcome
The Tracker Redesign project aimed to unify and enhance how Chase customers monitor card benefits and progress across multiple products. By establishing a consistent framework and visual language, this component-level initiative addressed previous inconsistencies in messaging, interaction patterns, and design principles. As a result, users could more intuitively see how much benefit they had left to spend or how close they were to earning new rewards, driving clarity and confidence in their overall card usage.
This focused redesign not only improved user comprehension and engagement but also created a scalable, reusable tracker component adopted by several lines of business within Chase. The streamlined design and content guidelines reduced support calls and empowered product teams to roll out new or updated tracker experiences more efficiently, proving that a single component-level enhancement can have a far-reaching impact across an entire digital ecosystem.
Team
Chase CCB Connected Commerce
Rewards Product: Luke Jang
Designer: Franky Wang
Researcher: Ester Trujillo
Content editor: Camille Kail, Madeline Krone
Design Practices
Requirement Analysis & Problem Definition
User Research & Data Utilization
Comprehensive Design Handoff
Design Guideline Development
Cross-Business Component Iterations
Iterative Version Updates
Project Timeline
Design iteration and delivery
4/2024 - 8/2024
Phase 1 launched 10/2024
Phase 2 launched 12/2024
This portfolio has been prepared under the Non-Disclosure Agreement (NDA) policies of my current firm. Proprietary data, project details, and participant information have been excluded or anonymized to protect confidentiality. All content is presented solely to illustrate my design strategy and role in product development, without revealing any sensitive or protected information.
PROJECT BACKGROUND
Trackers play a crucial role in helping Chase customers monitor their progress—whether it’s tracking spending, unlocking new benefits, or managing limited-time rewards. However, as different digital product teams have introduced trackers over time, inconsistencies in UI, content, and interaction patterns created usability challenges. Customers often misunderstood tracker statuses, leading to frustration, reduced engagement, and increased support calls. Our goal was to standardize tracker experiences while ensuring flexibility for different product needs.
What do trackers do?
Trackers provide real-time updates on spending and rewards, giving cardholders immediate visibility into how much they’ve used or earned and nudging them toward offers they might otherwise miss. This constant, up-to-date awareness naturally leads to higher engagement—customers feel more informed, in control, and motivated to explore everything Chase has to offer.
By turning data into clear, actionable insights, trackers become the gateway to smarter decisions and deeper loyalty across the digital ecosystem.
Why is this important?
The need for a consistent and intuitive tracker redesign emerged from both qualitative and quantitative insights. VOC data, customer feedback, and engagement metrics indicated that inconsistencies in tracker design led to user confusion, misinterpretation, and unnecessary support calls.
User & operational pain points
Customers often voiced confusion about how much benefit or reward was left, largely because tracker experiences were introduced inconsistently by different product teams. These disjointed designs caused high design and tech debt, as there was no scalable design system component to keep layouts, interactions, and messaging in sync. In our customer feedback, call center complaints, and competitive analysis, we also discovered content inconsistencies—from vague tooltips to mismatched terminology—further muddling user comprehension and driving up operational costs. Without a unified framework to compare progress or remaining benefits, many users felt unsure about their status, leading to repeated support calls and lower overall satisfaction.
Strategic opportunity
Building a scalable component guideline to increase efficiency and reduce future workload for the quad.
Enhancing clarity and engagement through better content and UI refinements.
Chase’s holistic digital design uplift
A strategic opportunity emerged from uniting fragmented trackers under a single, scalable component—one that would increase efficiency, reduce design and technical overhead, and deliver a more cohesive user experience. By aligning with Chase’s holistic digital design uplift, this approach aimed to enhance clarity and engagement through refined content, modernized UI, and consistent visual cues across all product lines.
USER RESEARCH & TESTING
Testing Approach
Before defining the new design, we needed to understand how users perceived and interacted with trackers. Our research focused on two key dimensions: how customers mentally model progress (gaining vs. depleting) and how well they comprehend tracker updates.
Mental Models
Is it more important for participants to know what they need to do first or what they can earn first?
Performance
& Comprehension
Do participants understand what the text is conveying?
Do they understand what the visual is conveying?
Methodology
A/B testing
Unmoderated Survey (~100)
Moderated 1:1 usability testing (10)
Behavioral analytics
We wanted to see if participants cared more about what they had left to earn or what they’d already used, as well as how effectively they could interpret text and visuals at a glance. We ran moderated one-on-one usability sessions with around ten people, then broadened our reach with a larger, unmoderated survey of about a hundred participants. We also conducted A/B testing and analyzed user behavior metrics. Our goal was to find the best way to visually represent tracker progress—balancing text, graphics, and the user’s own mental model of how they gain or deplete a benefit.
Research Interests
Sample Use Cases
Annual Travel Credit Tracker
(Sapphire Reserve)
New Account Bonus Tracker
(Freedom Flex)
Southwest Early Bird Check-in Benefit Tracker
(Southwest Priority Card)
In the early stages of this project, we focused on information architecture (IA) and content strategy rather than visual design. To do this, we selected three distinct credit card scenarios—Annual Travel Credit (Sapphire Reserve), New Account Bonus (Freedom Flex), and Early Bird Check-in (Southwest Priority)—and created multiple tracker variations for each.
These low-fidelity prototypes avoided any polished UI elements so we could test mental models and comprehension directly. By comparing how users interpreted different content hierarchies and progress indicators, we gained critical insight into which tracker attributes resonated most—and laid a stronger foundation for future design enhancements.
What we tested
The sample screens above are some examples of the trackers we put in front of participants. One version displayed how much benefit was remaining, while another focused on how much had been used. We asked which perspective felt more intuitive. We also tested how we might phrase the content for gaining trackers—did users want to see what they needed to do first or what they stood to earn? On top of that, we explored whether text-only trackers or a combination of text and visuals performed better. By studying how participants reacted to each variation, we figured out which elements they relied on most to understand their status.
RESEARCH INSIGHTS
These findings revealed two major mental models.
First, when people view rewards, they assume they start from zero and fill up to earn a payoff—like a progress bar that reaches completion. But when people think of benefits, they assume they start at 100% and deplete as they use it, like a perk they can spend down over time. This difference was crucial because if we mismatched the model—say, showing a ‘filling up’ graphic for a depleting benefit—users got confused.
Consistent content & messaging patterns
Customers expected the text + graphic displays to mark their progress at-a-glance and help them reach their goals, though goals varied.
Along with that, participants overwhelmingly preferred trackers that integrated both text and visuals, because it gave them a quick, at-a-glance understanding of how much they had left and what total benefit they started with. They especially valued a progress bar for visually indicating how close they were to their goal. We also discovered that it helped to place all necessary text in a single spot, so people weren’t hunting around the screen for more info.
Visual cue & messaging insights
User testing highlighted 4 essential insights that informed our tracker design. First, participants consistently wanted to see how much benefit remained, making it easier to plan their next steps. They also appreciated knowing the total amount available for quick comparison. Visual elements, like a progress bar, helped them intuitively grasp how far they’d come, and keeping content in one place increased comprehension. These findings guided us to emphasize clarity, consistency, and straightforward visuals in the final tracker experience.
DESIGN EXECUTION & ITERATION
New Tracker UX Model
Armed with these insights, I proposed a new UX model featuring two types of trackers: depleting and gaining. For a depleting tracker—like a travel credit—users would see how much remains. For a gaining tracker—such as a new account bonus—users would see how much progress they’ve made so far.
Depleting Trackers
Travel credit usage
Membership status expiration
Gaining Trackers
New account bonus
Points accumulation
Consistent content & messaging patterns
I also established consistent content and messaging patterns, laying out guidelines on what do’s and don’ts each tracker type should follow. This allowed teams across Chase to easily build or update their trackers in line with best practices. Everything from the recommended wording to the color coding of the progress bar was standardized, ensuring we wouldn’t repeat past inconsistencies.
Iterative Testing & Refinements
Once we had the initial framework, we continued refining the UI layouts to improve scanability and comprehension. We discovered a structured tile format worked best in desktop environments, but we also tested bottom-sheet expansion on mobile, which gave users quick access without cluttering the main screen. We introduced clearer color and progress indicators—like a brand-aligned color palette for depleting vs. gaining—and made the design flexible enough to adapt to multiple credit card features.
Below is a before-and-after comparison of how a travel credit tracker and new account bonus tracker evolved from cluttered text to a more concise, visually intuitive display.
Refined UI layouts based on comprehension studies, settling on a structured tile format that improved scanability.
Introduced consistent color & progress indicators to make tracker statuses intuitive.
Optimized mobile vs. desktop experiences to fit different user needs
DESIGN DELIVERY
Scalable Tracker Framework establishment
Trackers delivered post guideline setup
Other guideline/component delivery
POST-LAUNCH IMPACT
TAKEAWAYS