Chase Budget Feature Redesign

Background

Project Objectives: In redesigning the budget control feature, our team hopes to 1) make saving money easier by revamping the feature to be more user-friendly and straightforward, and 2) cultivate better spending habits among young adults

Target Users: Our team has decided to use young adults (between 18-24 years old) as our target user. We believe young adults are an ideal target user for the following reasons.

1. Quantity of Users
   In the United States, credit card ownership is the most prevalent among young adults: around 67% of the 18-24 years old age group owns credit cards.

2. Access to Users
   As our team is comprised of college students, we have easy and plentiful access to members of our target user. Our team has access to over 30,000 UCSD students, and with the help of social media platforms like Instagram and Facebook, we are able to reach more people within the age range of 18-24 years old.

3. Magnitude of User Need
   From our own experiences and casual observations, our team believes that there is a significantly large unmet need among young adults to budget spending on a daily basis.
   If successful, our team believes that we are well-positioned to deliver extremely impactful solutions for millions of Chase credit card owners to help regulate their spending. We also believe we can help young adults cultivate better spending habits what will benefit them in the long-term.

User Goals: Users (young adults with Chase credit cards) should be able to:

1. easily locate the budget control feature in application

2. customize limits on both spending in each category and total expenditure in simple steps

3. view notifications and summaries on spending intuitively

4. improve spending habits over time

Why this idea? Young adults between the age of 18-24 tend to make many high-cost purchases, such as concert and festival tickets, a new laptop for school and work, and even a car to commute between difference places. And as young adults and credit card users ourselves, we recognize that the ease of swiping away and not worrying about paying back at the moment makes it extremely difficult to budget our spending and save up for expensive items we actually need.

In addition, budget control features in all of the most popular bank applications ( Chase, Bank of America, and Wells Fargo) are not only hidden but also often mixed together with security alerts. We suspect that this placement is intentional because banks do not want to limit users’ spending. However, impulsive spending leads to poor credit scores which is both harmful for the user and the bank. While some people may resort to bookkeeping by hand or separate applications to keep track of spending, we believe there should be an easier method built inside the bank mobile application to provide this service.

Research Methods & Findings

Research Goals:

1. Find out how users control their spending to save up for high-cost purchases

2. Investigate the cause of the budget control feature in Chase application not being noticed/used

3. Determine the most needed and effective ways to help users control their spending

Research Methods:

1. Survey: Our team sent out a online Google Form survey and received responses from 81 people. The purpose of the survey was to collect answers and document preferences from a diverse group of people in order to locate pain points and come up with more specific interview questions.

2. Direct Observations: Our team directly observed 9 Chase mobile application users while they performed a list of simple tasks, such as setting up spending limits. We chose not to intervene in the interactions between the users and the application, unless the users were unable to perform the actions after multiple attempts. This gave us an opportunity to see the users’ expectations for the feature and the gap between expectations and reality. After directly observing these 9 users, we followed up with them afterwards to ask them more questions about their interaction.

3. Interviews: Our team conducted 9 one-on-one interviews after direct observations on the same users. We wanted to understand the reasonings behind their actions and find out what they enjoy about the current feature and what they wish to add on and change about the current feature.

Major Findings:

1. 64.5% of the participants were not aware of the existence of budget control feature inside their bank app

2. 70% of the of the survey participants reported they tend to use their “brain power” to keep track of daily spending

Problem Statement

Chase mobile application currently lacks but needs a simple and intuitive budget control feature to help users between the age of 18-24 allocate spending wisely in order to save for high-cost purchases.

Based on the 9 one-on-one interviews we conducted, all of the observants struggled with locating the budget control feature on Chase mobile app. In addition, we found that young adults with stable incomes are better at managing money that they have fewer impulsive purchases than those who are still in school. This discrepancy made us realize that equipping young adults with more user-friendly budget control tools can help them reduce unnecessary expenses. Almost all of our interviewees would like to see a summary of well-categorized transactions and believe this feature could help them prepare better for upcoming high-cost purchases.

Competitive Audit

For our competitive audit, we decided to compare Chase’s budget control feature with the ones in Bank of America and Discover as well as two other budgeting apps, Mint and Acorns.

Based on our research findings, we found that when it comes to finance management, people prefer to download and use personal finance apps instead of to take advantages of the budget control features in their bank’s mobile application. We believe this is because 1) budget control features in bank apps are generally very hidden and inconspicuous, and 2)budgeting apps like Mint and Acorns allow users to better customize their budget/saving goals and provide more comprehensive statistics on their income vs. expenses as well.

After conducting the above analysis, we hope to pull the strengths from these finance management apps and learn from the mistakes in other banking apps by highlighting the budget control feature in our redesign, allowing users to personalize budget limits based on their spending habits, and adding more intuitive and easy-to-understand visualizations of statistics as well.

UX Flows

Our team is planning on redesigning the original feature of setting alert/notification and extending a new feature displaying budget snapshot that includes current spending analysis and past & current spending comparison page. Instead of having Chase system sending users alerts simply for security reasons, in our redesign, we encourage people to set up their own budget notifications for total spending limit and category limits to manage their spending habits in a more comprehensive manner.

In our redesign, users can access their budget snapshot from both the home page and the left hamburger menu. Similar to the design on BOA and Mint, we will have a clickable pie chart that displays the amount spent on each category (e.g. 27% spent on food and grocery). Once the user clicks on a specific slice of the pie chart, an option to "view transactions" will show up that can take the user to all recent transactions under this category as well.

We designed to have our extending feature displayed on the homepage so that our targeting user like Emily, representing the beginners group, will not overlook this key feature of the app and it will constantly remind her of the existence of budget control feature that can help her become more financially responsible. We also aim to have all our budget saving related features to stay as compact as possible. Unlike Acorns app which has too many scattered features across the app, we provide our target user like Brandon with a more straight-forward access to all the potential assessments this app provides. Finally, our budget snapshot feature that contains interactive statistical graphs will grant users like Taylor with a more personalized, visually appealing experiences while comparing and contrasting her spending trends on a regular basis.

Paper Prototypes

Since most of the people we talked to expressed their preference to see their spending analysis right when they enter the app, our team decided to place “Budget Snapshot” button on the home page.

After arriving at this decision, our team started to build low-fidelity paper prototypes following the same user flow but with two different UIs. This allowed us to bring the two prototypes to users for A/B testing then further iterate based on users’ responses.

Similarities between the two prototypes:
To resolve the previously discovered issue of scattered budget control features, both Prototype A and B present a CTA button called “Budget Snapshot” on the top of Chase home screen. “Budget Snapshot” page reports the spending analysis with various charts based on the time period as well the the specific account depending on the the user’s choice, allowing the user to visualize their spending history and habit. This page also consists of buttons that lead to the “Manage Budget” page as well as the “Recent Transaction” page so that all the related features are connected.

Differences between the two prototypes:
Since the two paper prototypes follow the same user flow, the main differences are all within the UIs: Prototype A follows the current Chase design more closely to avoid unfamiliarity whereas Prototype B explores more creative solutions.
On the home page, Prototype A strictly follows the current Chase home page design, simply replacing the “Daily Snapshot” in the original design, whereas Prototype B includes a subtle line chart in the background to better signify what “Budget Snapshot” entails. With this change, we wanted to explore which representation is more intuitive and inviting for users to enter the page.

Upon entering the “Budget Snapshot” page, Prototype A asks the user to select the time period and account in a drop-down filter menu, while Prototype B displays the options as buttons below the line graph. Below the line graph, Prototype A provides an interactive pie chart while Prototype B uses a static circular chart. By clicking on each slice of Prototype A’s pie chart, users will be prompted with the spending on that category with the option to view recent transaction on that category as well. On the other hand, although the circular chart in Prototype B doesn’t have interactive elements, it allows the user to view all information in one setting. With this difference in design, we wanted to find out 1) if users would even realize Prototype A’s pie chart is clickable, and 2) if users would prefer one over the other.

And last but not least, for “Manage Budget” page, Prototype A partitions “Total Spending Limit” and “Category Spending Limit” by putting them in two tabs, while Prototype B combines the two more naturally in a sliding bar. On top of that, Prototype A lays out all the information required to set up budget limit in one page whereas Prototype B wraps “Calculate Budget Limit” in a popup window that will only show up if the user clicks on the button. With this difference, we hoped to test 1) whether users prefer seeing everything on one page or seeing a less information-heavy UI, and 2) if hiding the “Calculate Budget Limit ” behind a button would discourage users from using this feature.

Testing Method:
We adopted A/B testing as the testing method since it is the most fitted when it comes to comparing two prototype with the same user flow but different UI designs. We conducted A/B testing on four of our friends: Taly, Cheeo, Roy, and Yvonne. All of them fall into our target community: Chase users between the age of 18-24. We asked them to perform the following tasks on both Prototype A and B: 1) find the spending analysis in the app, 2) view today’s spending analysis on Card A, 3) view recent transactions on the category they spend the most amount of money on, and 4) set that total budget to $800/payment cycle.

Insights Based On User Response/Interaction:

1. Problem 1: “Budget Snapshot” didn’t get noticed
   While we were conducting interviews in the first round, almost all of our interviewees mentioned they would like to have this budget analysis feature to be obvious enough so it encourages them to constantly tab on the button and utilize this feature. In this way, we built both of our paper prototype by arranging this budget feature on the very top of each homepage. However, as our user-finding have mentioned, evaluators showed similar pattern by clicking into the specific card/account to look for budget analysis before even noticing the budget snapshot button.
   
   Solution/Plan for next steps:
   Thus, we will be adding another access point to budget analysis feature inside of each card/account tab. Then, when users are directed to budget analysis feature, the displaying graphs will corresponds to this account information specifically.

2. Problem 2: Repetitive graphs and charts
   We found 2/4 of our evaluators reflected that having both an interactive pie chart and a bar chart of total spending by category seems to be redundant. In fact, our original design is to have bar chart showing the budget limitation that user has set for each category which the interactive pie chart cannot fully reflect. Also, if a user has not set up the budget limitation for each category yet, the bar chart section will not show up. It seems like our design idea is not fully conveyed in our our paper prototype.
   
   Solution/Plan for next steps:
   For the next step, we will be combining bar chart into the interactive pie chart and figure out a better way to illustrate not only the percentage the user has spent on each category, but also the the budget limit one has set up for each category in one graph. Thus, we can make the budget snapshot page much more concise with minimal functions so that users will not get too overwhelmed.

3. Problem 3: Complicated input fields
   Users complained that the “Calculate Budget Limit” feature is be too difficult to use. Although asking for the user’s saving goal and days left until they need to reach that goal is reasonable, asking for the user’s monthly income isn’t helpful because it’s too complicated to estimate. And by the time users arrive at this input field, they would be too impatient to complete the calculation.
   
   Solution/Plan for next steps:
   Instead of providing a feature to calculate the budget limit for the user, we will let the user decide their own limit. What we will do is to give smart warnings when users are approaching their budget limit and automatically adjust the budget limit for upcoming weeks/months if users exceed it.

Final Prototype

Before finalizing our design, we conducted more user testings on 4 people to 1) make sure we were on the right track and 2) receive feedbacks on how to further improve user experience. Since our previous user testings with low-fidelity prototypes, we noticed a significant improvement with recognizing our “Budget Snapshot” CTA button, largely due to the added graphics in the background that signified that button should lead to some sort of data analysis. Upon entering the “Budget Snapshot”, all of the users breezed through the user flow. However, almost all of them except for one had troubles interpreting our pie chart, particularly with the white dotted lines. When comparing the alternative screens against our main design, most of the users preferred the alternative data visualization but missed the switch tab on the alternative UI for “Manage Budgets” page.

Since the last iteration, we mainly updated two interfaces based on the feedback we received: the graphic behind the “Budget Snapshot” CTA button on the home page, and the data visualization on the “Budget Snapshot” page.

In the old “Home Page” design, we added a graphic consisted of curves and bars to signify that clicking on this would lead to some sort of data analysis on the user’s budget. Although the graphics did draw users’ attention during our user testings, the instructor pointed out that the design didn’t match with Chase’s brand and overall style. So in our new design, we took inspirations from Chase’s current “Today’s Snapshot” graphs and created a yellow gradient line chart that is minimalistic yet eye-catching at the same time.

In our old “Budget Snapshot” design, we received a lot of constructive criticism and feedback on our data visualizations from both our users and the instructor. So in our new design, we first made a subtle edit in the top graph by changing the budget limit lines to red following conventions in design (red implies warning) and changing the exceeded amount to bright orange.
In the bottom half of this page, we changed our creative but confusing pie chart to a more traditional but easy-to-understand donut-shaped one, where the outer slices indicate different categories and their proportion, the center always displays the total spending, and the information in the pop-up window right beneath the graph changes depending on which slice the user clicks on. Below the pie chart, we decided to use a horizontal bar chart to indicate the budget limit placed on each category and how well the user is doing at spending within the budget.

Conclusion

Although I did anticipated most the challenges embedded in this project after selecting the prompt, I struggled most with narrowing down the scope during the initial design stage. Because the prompt we chose was so applicable in so many different contexts, we didn’t know if we should refine the scope based on contexts or user groups. After many back-and-forth discussions, we arrived at the decision to limit our user groups to young adults, mostly because it was the easiest for us as designers to emphasize and also the easiest to find volunteers to conduct user testings on.

Another big challenge we faced was when we were designing the “Calculate Budget Limit” page: we spent hours after hours trying to figure out how to make this smart function (that supposedly would be able to calculate the user’s budget limit for them based on a few inputs) as easy to understand and easy to use as possible. However, after interviewing multiple people regarding their opinions on this feature, we decided to abort it and instead adopt a smart feature that could automatically adapt each month’s budget limit to the user’s spending habits.

The entire design process involved giving up on many ideas that we thought were very creative and novel, but it taught me that as a designer I shouldn’t force my personal preferences on users at the cost of sacrificing usability.