Chase Mobile Rewards & Benefits Dashboard

A mobile dashboard for credit card rewards & benefits information

Shipped Project   Mobile App  UX Design


Chase credit card is well-known for its rewards program that offers great value and benefits. However, as a framed-in web page, currently, the mobile rewards experience is not as user friendly. Information is very hard to find with a separate set of navigation. The inconsistent design pattern very often confuses users. And the long loading time is more and more becoming a blocker for users to reward themselves easy and fast through the app.

• Phase I: Apr - May 2019 (6 weeks)
Phase II: Dec - Apr 2020 (in progress, 5 months)

My Contribution
Phase I (shipped): Led and delivered design from end to end
Phase II (in progress): Led design exploration and direction with two leads

iOS & Android mobile app

Under the initiative to re-design the mobile rewards experience, I led the design effort, with first phase (this page) focusing on building a consolidated view to surface key rewards features. Project goal is to increase mobile traffic and customer's engagement with the rewards features and benefits content.

Framed-in page
Native dashboard
(1st phase)
Vision design
(2nd phase)

The challenge

Work backwards with business stakeholders

With the first phase, I was asked to create a consolidated viewpoint for the primary rewards and benefits contents, which contains four parts:

- Rewards balance and activity
- Benefits
- Ways to earn rewards
- Ways to redeem rewards

Simple as it could look like, there’re some challenges in this phase. Looking out for some early exploration work, the business team at Chase went to a design agency to get some exploration work done before coming to us, the in-house mobile design team, and our product owners were pretty sold on the idea of the agency. However, after taking a closer look into each of these sections and collecting findings from customers, I believe we need to re-think the screen structure and propose back to the business team with a more solid and intentional design that could scale and fit with the rest of the app.

Proposal from the design agency

The process

/ The discovery

What are our customers’ most important jobs and existing painpoints on the rewards page?

To figure out what are the users' primary tasks, I collected data of the current features usage on Chase rewards website, and did guerilla research with Chase internal employees who have either Chase Sapphire, Freedom, or Ink cards. The top 3 tasks that were mentioned most are:

Check my points
Redeem my points for cashback/travel
Check my card benefits

People think of rewards points as “extra money”. Although they only redeem their points once every couple months, they check the rewards balance very often and need it to be easily accessible.

People save their points for travel and larger purchases. When it comes to redeeming points, they value the balance between efficiency and getting rewarded. They already work for their money and feel entitled to get more from their purchases. Basically, redeem behaviors fall into two categories - task-focused and explorer.

We were surprised about people’s low awareness of their card benefits, part of which due to the poor discoverability of it on the website. Card benefits is important, but finding them is not intuitive and most failed. Users may attempt to search for benefits 1 - 2 times, but they’ll quickly abandon the attempts if not easy.

/ Problem Statement

Based on what we learnt from customers, we were able to define the problem statement.

How could we design a native mobile reward experience to help customers easily uncover reward features and complete tasks fast?

/ User tasks

Audit current user task flow to incorporate enhancement

As an entry point to the framed-in web experience already exists on the app, I started with auditing the current user task flow to see how to fit the enhancement. Based on what we learnt, we were able to identify five tasks of users:

1. Check rewards balance;
2. Check rewards activity;
3. Redeem rewards for cash back, travel, etc;
4. Check how to earn more rewards;
5. Check card benefits.

Except "check rewards balance", all the remaining experience are sitting in the framed-in web experience. Therefore, we have two big design tasks:

1. Design a consolidated view to host these features;
2. Enhance the current entry point to accomodate new features.

/ The design

Start with dashboard design

I started with the dashboard design first, with the assumption that users would prefer to come to a consolidated viewport to complete all the above tasks.

I explored three directions (image below) - a structured layout with top navigation; a one-page layout with long-scroll; a semi-structured layout to anchor content below rewards balance.

Finally, we decided to go with the the third option, as it gives rewards balance the most prominence, and also provide a clear structure for users to access what they need fast.

Zooming out - Use dashboard design to inform the entry point

After getting an idea about what the dashboard screen looks like, I switched focus to the entry point.

As current users are familiar with accessing reward information from both the "more menu" on account tile and the "rewards tile" on the account dashboard screen, we kept this placement as the entry point to the new native dashboard. While on the rewards tile, we enhanced it to surface necessary information - a quick access to a redeem option and the current entry point to the web page experience.

Zooming in - Benefits is seen as different from rewards points

We put this design in front of users to test our assumption. One thing that we kept hearing from users is that most didn’t see benefits fit into the dashboard, as it's different from the rewards system.

“Ultimate Rewards is my point system. It shows me how many points I have. Benefits is more about what my card provides to me. It comes with the card.”

This led to a major design decision - separating benefits from rewards, and give benefits its own screen for users to quickly check benefits when in need.

This also brought change to the entry point design.

Final design

/ The results

This enhancement was released in September 2019. Two months after release, we've seen a great traffic increase on both rewards redemption and card benefits.

Mobile traffic to Cash back redemption are up 28% MoM from Sep to Oct.

Mobile traffic to Card benefits are up 167% from Sep to Nov.

/ Next steps

With the good results we've seen from this 6-week design project, this ends up being an excellent opportunity for us designers within Chase to kick off a much bigger and cross-function initiative to bring the rewards experience to the next level.

In the second phase, we started from the ground to look into this part of experience from a higher level - credit card user profile and other account profile, and strive to deliver a design foundation that's more scalable, contextual, and personalized.

In this next phase, design focus includes:

- Redefine the IA of a Rewards experience with the new app structure;
- Deep dive into benefits to deliver design to increase engagement;
- Explore rewards concept that applies to the entire banking products.

/ More projects