Chase Spending Summary

Interaction design

Mobile

Web

Data visualization

Chase Spending Summary

Interaction design

Mobile

Web

Data visualization

Chase Spending Summary

Interaction design

Mobile

Web

Data visualization

Chase Spending Summary

Interaction design

Mobile

Web

Data visualization

Chase Spending Summary

Interaction design

Mobile

Web

Data visualization

My role:

UX designer

Timeline

Feb 2023 - present

Team

1 UX designer

2 Content writers

3 PMs,

3 Engineer teams (iOS, web, Android)

1 UX researcher

Overview:

Spending Summary is an existing tool launched three years ago. Over the time, we observed there are several areas of improvement, and I have been assigned to be the only designer.


The mission of Spending Summary is to provide a simple and integrated experience to help customers understand, track, and plan their spending. Several new features have been added to Spending Summary to enhance the user experience. These include a new data visualization, spending breakdown by merchants, and the ability to exclude and recategorize transactions.

Overall satisfaction

0%

Monthly active users

3.0M

(as of Jan 2024)

Retention

0%

Context

Context

What is Spending Summary?

Spending Summary is a tool that showcases users an aggregate view of their total spending across all Chase checking accounts, credit cards, and externally linked accounts. The goal of the tool is to help customers track and better manage their spending, Users can view their spending information by breaking it down into categories, merchants, and spending amounts. The tool also allows a comparison of users’ spending versus their income and eventually helps them spend within their means.

Spending Summary & Net Activity

In previous version, the Spending Summary was part of the Net Activity experience, which shows the customers their cash flow for the month to date. The tool does this by subtracting the users’ spending from their income. Users are able to learn if they spent more than their current income.


However, users expressed the concern that the data visualization is hard to understand, and the experience is too limited, which does not help users fully understand their spending.

Problem statement

Users seek a clearer comprehension of their spending. The current tool proves unhelpful. There is a demand for an improved tool with a simpler chart to help users better understand their spending behavior.

Users seek a clearer comprehension of their spending. The current tool proves unhelpful. There is a demand for an improved tool with a simpler chart to help users better understand their spending behavior.

Based on user research, we identified 3 UX problems related to Complexity, Data inaccuracy, and Limited features across the tool—

Complexity

Customers struggle to understand the terminologies, making it difficult for them to interpret the chart. Users without direct deposit from Chase do not find the chart useful.

Data inaccuracy

The tool often times categorizes transactions incorrectly. Users find it frustrating when things are not labeled correctly and there is no way to adjust them.

Limited features

Customers demand more features. Users expressed the need for non-recurring, top spent and frequently visited merchant information that are not offered.

5

2 years ago

It would be good to work in non-recurring but frequent expenses like coffee at Starbucks every morning. I don’t know if this functionality is in the app and I would love to see it as a part of this experience.

3

2 years ago

I need to change the category of some transactions.

5

2 years ago

It's almost useful, except somehow it's not recognizing or even letting me manually add my largest expense, my mortgage payment, to the budget. As they say "you had one job..."

2

2 years ago

It is confusing at first sight, but it makes more sense after having the context. Don’t actually know what it means when I first looked at it. My first impression was it that the money spent from the budgeting category?

4

2 years ago

The tool regularly categorizes transactions incorrectly. It is useless and difficult to use this tool correctly because things just aren’t labeled correctly and there’s no way to correct them.

1

2 years ago

Your tool doesn’t work. I keep trying to reclassify transactions but nothing happens and it’s really hard to use when it’s completely inaccurate. It would be wonderful, if it would work properly.

Discovery

Discovery

Understanding our users

In contrast to Chase Budget, the power users for Spending Summary are reactive users. They are less likely to spend time setting u a budget, or actively monitor their spending. Instead, they prefer a simpler, automated experience without any effort.

Behavior

Behavior

Behavior

Only looks for reassurance that their financial standing is good.

Likely heavily dependent on things like autopay features.

“Make it as easy as possible.”

Financial type

Financial type

Financial type

Log onto the Chase app occasionally to check balances and transactions.

Tends to spend more than they actually save.

Looking for ways to spend less.

Competitive audit

Next, to better understand how other budgeting tools work, we conducted a competitive audit of a few competitors’ app. This helped us analyze strengths and pain points for each of the budgeting features, and identify opportunities and areas for improvements.

Synthesize

Synthesize

Core task & key opportunities

As a team, we listed out all the features provided by current Spending Summary, and identified opportunities based on user feedback.

Perceived emotions

We evaluated user emotions by analyzing the user journey map and determined the desired takeaway from the enhanced experience.

Value vs complexity

We collaborated with the engineering and product teams to assess the effort and customer value of each feature, defining our MVP experience.

Final designs

New data visualization & new timeframe selector

Introducing a new data visualization for easier comparison of spending versus income. Users can switch between the 'spending only' view and the 'income & spend' view. The new timeframe and account selector allow users to customize their preferences and view spending on a monthly, quarterly, and yearly basis.


We also added a 'See chart as table' view, allowing screen reader users to better understand their spending.

Merchant information

Based on the feedback, users wanted a merchant view other than categories. We added information on the most visited and most spent view of the merchants, providing insights about each vendor to help users to cut back.

Re-categorize & exclude transaction

One of the biggest pain points we aimed to solve is allowing users to modify transaction details when something is not correct. In the new experience, users can exclude a transaction from their spending to avoid any data inaccuracy caused by the system.


In addition, users can re-categorize a transaction that might be labeled incorrectly.

Web version

Old

New

Old

New

Old

New

Old

New

Old

New

Old

New

Old

New

Old

New

Usability test

Research overview

We conducted two unmoderated testing sessions with 20 Chase customers to:


  • Understand how participants use the information presented on the spending summary.

  • Identify which data visualization helps participants understand their spending best.

  • Understand how participants react to different layouts of the merchant tile.


Participants were asked to review concepts for the spending summary feature and respond to questions related to the information and visuals within the concepts. They were also asked questions related to the spending insights that they find most valuable and useful.

Area of success

Appreciation of the ability to add and remove income from the chart

The charts helped participants to understand their spending

It was clear to participants that there are two separate tabs to click

Area of improvement

Would like an easy way to switch across different timeframes

“x” was unclear some thought it was referring to rewards points or offers

Scrolling through the tiles felt ”cumbersome” and “disruptive”

Side-by-side bar chart

Participants expressed that they preferred concept 1 because it made it easier for them to compare their income because of the consistent format, and they also appreciated the income toggle.

Carousel vs list

Participants consistently ranked the list view higher than the carousel view in terms of comprehension and preference.
Participants appreciated having the logos present within the concepts.

- Information was clear and easy to understand
- Provides a full picture immediately
- Less effort was required to digest all the information

Summary

Summary

Our impact has been positive. We are seeing an increase in engagement, retention, and customer satisfaction. —

OSAT score

78% increase

48%

27%

Monthly active users

2x increase

3.2M (as of Jan 2024)

1.6M

Retention

23% increase

27%

22%

Summary

JPMorgan Chase & Co. - Empowered Award (Q4 2023)

FinTech Breakthrough Awards - Best Personal Finance Product (2023)

My contribution

My contribution

  1. Led the entire design cycle, created mobile & web designs, and ensure consistency throughout the entire user experience.


  2. Collaborated with cross-functional teams across all stages, from early research, ideation, and design, to execution and delivery.


  3. Actively involved in desk checks and VQAs with the development team to ensure the product aligns with the design.

What’s next?

What’s next?

  1. Bill Forecast

  2. Web redesign

  3. Visual uplift

  4. Dark mode

  5. More...

Final designs

New data visualization & new timeframe selector

Introducing a new data visualization for easier comparison of spending versus income. Users can switch between the spending only view and income & spend view. The new timeframe and account selector allow users to change their preferences and view their monthly, quarterly and yearly spending.


We also added a ‘See chart as table’ view which allow screen reader users to have a better understanding of their spending.

Merchant information

Based on the feedback, users wanted a merchant view other than categories. We added information on the most visited and most spent view of the merchants, providing insights about each vendor to help users to cut back.

Re-categorize & exclude transaction

One of the biggest pain point we try to solve is to allow users to modify transaction details when something is not correct. In the new experience, users can exclude a transaction from their spending tp avoid any data inaccuracy caused by the system.


In addition, users can re-categorize a transaction that might be labeled incorrectly.

Web version

Old

New

Old

New

Old

New

Old

New

© 2024 Kevin Zhang · All rights reserved

Usability test

Research overview

We conducted two unmoderated testing sessions with 20 Chase customers to:


  • Understand how participants use the information presented on the spending summary.

  • Identify which data visualization helps participants understand their spending best.

  • Understand how participants react to different layouts of the merchant tile.


Participants were asked to review concepts for the spending summary feature and respond to questions related to the information and visuals within the concepts. They were also asked questions related to the spending insights that they find most valuable and useful.

Area of success

Appreciation of the ability to add and remove income from the chart

The charts helped participants to understand their spending

It was clear to participants that there are two separate tabs to click

Area of improvement

Would like an easy way to switch across different timeframes

“x” was unclear some thought it was referring to rewards points or offers

Scrolling through the tiles felt ”cumbersome” and “disruptive”

Side-by-side bar chart

Participants expressed that they preferred concept 1 because it made it easier for them to compare their income because of the consistent format, and they also appreciated the income toggle.

Carousel vs list

Participants consistently ranked the list view higher than the carousel view in terms of comprehension and preference.
Participants appreciated having the logos present within the concepts.

- Information was clear and easy to understand
- Provides a full picture immediately
- Less effort was required to digest all the information