Capital One Budgeting Feature
The Capital One app shows basic income and expense tracking but lacks a comprehensive budgeting tool, preventing users from categorizing transactions or analyzing their spending.
Problem
A more detailed budgeting tool in the Capital One mobile app that lets users categorize transactions, set spending limits, and view detailed spending breakdowns.
Solution
UX Designer
UX Researcher
Visual Designer
My Role
Tools
Figma
Lyssna
FigJam
Timeline
75 hours
Research
Competitive Analysis
I performed a competitive analysis of both banking apps that have budgeting features and standalone budgeting apps, since both have features that I might want to incorporate into the Capital One budgeting feature.
Interviews
I wanted to interview people with a Capital One account to find out about their experiences with the app, and to help determine if a personal budgeting feature would be useful. I also wanted to interview people who use budgeting features within other bank accounts, standalone budgeting apps, and other budgeting systems (including non-digital ones) to find out what works and doesn’t work for users.
I wanted the find out what features are essential to users in a banking app, and the biggest challenges for people when it comes to using a banking app and to budgeting in general. If they use the Capital One app, I wanted to find out if they find the money in / money out feature helpful, and what other data they would like to see.
Interview Findings
Overview
I interviewed 5 people who all had experience with using budgeting apps, either standalone apps or budgeting features within their bank accounts. Four of the five had a Capital One account.
Observations
Two interviewees said that the idea of sitting down and making a budget seemed overwhelming to them. Two interviewees had made a budget in the past but stopped, one because she wasn’t able to keep up with it, and one because his income and spending became relatively predictable.
All interviewees who used Capital One either didn’t know the money in / money out feature was there, or didn’t use it
Two interviewees cited unexpected expenses as one of the most challenging parts of sticking to a budget.
Pain points
Most external budgeting apps cost money, which is frustrating for people who are trying to save money
The Capital one app doesn’t have a way to show users where their money is going, other than a basic money in / money out feature
Checking a budgeting app every day feels like just another thing to do for some people
Some banking and budgeting apps have poor or cluttered UI
Analysis
Affinity Mapping
I used an affinity map to structure insights gathered from interviews, aiming to identify the most valuable features for a budgeting feature and to develop a detailed user persona based on these findings.
Click here to view affinity map.
While looking through all my data points and observations from my interviews, I found that all observations fit into one of nine categories:
Features of banking apps users would like to have
Existing banking app features that users like
How users use banking apps
Experiences with standalone budgeting apps
Essential features of banking apps
Reasons for budgeting
What users dislike about banking apps
Systems users use for budgeting (further broken down into digital and non-digital systems)
Challenges (further broken down into challenges with banking and budgeting apps, and challenges with budgeting in general)
Persona
Based on the data I gathered from my interviews and affinity mapping, I developed a persona who already uses the Capital One app and wants to get a handle on her finances, but feels overwhelmed by the process of making a budget and doesn’t want to pay for a budgeting app.
Problem Statement
With my persona as a guide, I developed a problem statement that encapsulated the primary challenges users face, then reframed the problem statement into a "How Might We?" question.
Problem: Unlike many other banks, like Chase and Ally, the Capital One banking app doesn’t have many features to help users with budgeting their money. It only has a basic feature that shows the user’s “money in” and “money out” for a set timeframe. Many Capital One users expressed a desire for more detailed budgeting features within the app, such as the ability to categorize their transactions, create their own spending categories, and see their spending habits at a glance. Attempts to budget on their own are often overwhelming and time-consuming. Independent budgeting apps often cost money, and become an additional app that users have to check.
How might we allow users of the Capital One app to budget their money directly in the app, in a way that is easy and intuitive, and helps them plan for unexpected expenses?
Features
Once I identified the "How Might We?" question derived from my problem statement, I compiled a list of must-have and nice-to-have features aimed at effectively addressing this question.
-
At-a-glance pie chart of spending habits
When the user clicks on their account, there’s a pie chart below their account balance showing how much they spent in different categories that month. They can also look at their spending from different months or a different timeframe (the past six months, year, etc.)
Supporting Research: Interviewees expressed a desire to see their spending at a glance in a prominent place, instead of having to dig for it like they do in some apps. One interviewee said she likes simple visuals with few numbers
Spending categories automatically assigned to transactions
The app has the ability to recognize the category of most transactions (travel, dining, utilities, groceries, etc.)
Supporting Research: Interviewees wanted to be able to budget within their banking app instead of paying for an outside budgeting app
Drop-down next to transaction to change spending category
Sometimes the app might categorize a transaction in the wrong category, so users can assign it to a different category
Supporting Research: Interviewees who did have budgeting in their banking app found that sometimes the app didn’t correctly categorize transactions
“Add new category” option in drop down
Users can add a new category to assign transactions to if it’s not already one of the predefined categories
Supporting Research: Interviewees wanted to be able to add their own budgeting categories for transactions that don’t necessarily fit the pre-defined categories
-
“Manage budget” option underneath account balance
Right now, when the user clicks on their account, right below their account balance it says “I want to...” and there are icons to click on for various tasks, like “pay bills.” I would add a new icon that says “manage budget” which would take users to a screen that lets them set spending limits for different categories and put money into savings buckets
Supporting Research: Interviewees wanted the ability to categorize their savings and set spending limits for categories, and these tasks could probably be under a general “manage budget” category instead of separate tasks
Ability to set spending limits for categories
Users can assign a spending limit to a category for the month, and they would get a notification when they are getting close to the limit in that category or have passed the limit
Supporting Research: Interviewees expressed a desire to set spending limits for different categories to help with budgeting
Ability to organize money into different categories
Users can set up savings buckets and put money into different categories
Supporting Research: One interviewee said he budgeted by having multiple savings accounts for different things, and that it would be easier to have one savings account and put the money into different categories
User Flows
After making a list of features, I developed user flows for various budgeting tasks. I originally planned to have both “spending limits” and “savings buckets” under a general “manage budget” option.
Legend
User Flow 1: Assigning a different category to a transaction
User Flow 2: Manage Budget
Task Flows
I then broke out the task flows for three different tasks from my user flows.
Legend
Task Flow 1: Creating a new spending category and assigning it to a transaction
Task Flow 2: Creating a custom savings bucket and adding money to it
Task Flow 3: Setting a spending limit for a particular category
Design and Testing
Low-fidelity Wireframes
My first wireframes were basic sketches showing how the user would complete each of the three task flows I decided to test.
Mid-fidelity Wireframes
Based on my low-fidelity sketches, I developed mid-fidelity wireframes to test with users. I wanted to make sure I tested early on before moving on to high-fi wireframes.
Click here to view mid-fidelity wireframes.
User Testing: Mid-Fidelity Wireframes
Summary
I tested 3 different flows in my budgeting feature for the Capital One app: adding a custom spending category to a transaction in the checking account, creating a custom savings bucket and adding money to it, and changing a spending limit for a budget category.
Methodology
I tested 5 users on the user flow. I set up the user flow in Lyssna so that all the clicks would be recorded. I also had the users share their screen with me while they went through the test so I could see where they were. I had them all rate how easy the task was on a scale of 1 to 5, with 1 being the hardest and 5 the easiest.
Results
In the first flow, several users took awhile to figure out that they needed to click on a transaction in order to change the budgeting category. Some of them clicked on “Manage Budget” or “View all” before scrolling down and selecting a transaction. Most users completed the flow easily after selecting a transaction.
In the second flow, some users took awhile to figure out that they needed to click “manage budget” in order to get to the Savings Buckets page, but others knew that’s where they had to click. Most users completed the flow easily after clicking “Manage budget.”
The third flow was the most confusing for all users, and had the highest number of mis-clicks (52%). Most users had trouble finding the “adjust limit” link since it was small. Several users suggested making in bigger or bolder, or changing it to a button.
Iterations
Text changes
Add the text “click on transaction to change category” above the Recent Transactions list
Visual Changes
Have separate icons for Spending Limits and Savings Buckets, instead of having them both under Manage Budget
On the Spending Limits page, make “adjust limit” much bigger, or change it to a button
On the Spending Limits page, add more space around the budget categories
Functionality Changes
Put Spending Limits and Savings Buckets on separate screens, and have Spending Limits in the checking account and Savings Buckets in the savings account.
Sample Iterations
Before
After
High-Fidelity Wireframes
After making the iterations from my mid-fi tests, which didn’t include any branding so that users would focus on the functionality, I developed high-fidelity wireframes. I used the Capital One branding, and added some icons and colors that were necessary for the budgeting feature and consistent with the brand.
Click here to view high-fidelity wireframes.
User Testing – High-fidelity wireframes
After making the iterations from my mid-fidelity tests and developing high-fidelity wireframes, I tested the same flows with the high-fi wireframes with 5 users.
Measuring success
I decided I would consider the test a success if the users reach the end screens of each flow with minimal confusion and minimal clicks. Specifically, I would consider it a success if users are able to do the following:
Quickly figure out that they need to click on a transaction in the first flow in order to change the budgeting category
Find the “Savings Buckets” and “Spending Limits” menu items quickly in the savings and checking accounts respectively, and know that’s where they need to click
Find the “adjust limit” link easily when adjusting a spending limit
Questions for users during testing
How easy was it for you to figure out where to click?
Was anything confusing?
What do you think of the colors assigned to the budgeting categories?
If you tested the mid-fi wireframes for this project, How does the ease of completing these tasks compare to the mid-fis?
Test Results – High-fidelity wireframes
In the first flow, where users were supposed to click on the “Hotel” transaction, some users took awhile to figure out they had to click on the transaction to change the spending category, since the text telling them to do so was small.
In the second flow, users who had tested the mid-fi wireframes said that the “adjust limit” link was much easier to find since it was bigger. However, several users also said that the arrow marker looked like a slider that could be moved. One user thought the “Add new” button on the spending limits page might be a way to adjust the spending limit, instead of a way to add a new category.
In the third flow, one user said that it would be better to be able to create a new savings bucket and add money to it at the same time, so that there would be fewer clicks.
Iterations
Visual Changes
Remove the arrows on the spending limits screens since they look like a slider that can be moved
Text Changes
Make “click on transaction to change spending category” text above transaction list bigger
On the spending limits page, change the “Add New” button to “Add New Category”
Functionality Changes
Allow the user to create a new spending bucket and add money to it at the same time
Sample Iterations
Before
After
Final UI Kit
I developed a UI kit for the elements I added to the Capital One app. After completing the testing of the high-fidelity wireframes, I incorporated the changes that came up through testing.
Final Product
Reflection and Next Steps
This project helped me learn how to work within certain constraints. I was working with an established brand that already had its own color palette and UI elements, plus limited space to add a new feature. I had to make sure everything I added was consistent with the brand. For example, I had to make sure any buttons I added were the same size and had the same look and feel as buttons that were already in the app.
I also had to figure out where to put elements like the icons for the Savings Buckets and Spending Limits pages, and the pie chart showing the breakdown of spending. These elements needed to be seamlessly integrated into the app without taking away or hiding any other important elements. There was also limited space for some of the elements I added, such as the spending category labels for the transactions. I had to make sure the labels were big enough to read without taking up too much space.
One thing that was challenging was creating a color palette for the spending categories with colors that went well together, but were also different from the Capital One brand colors and were colorblind safe, and that stood out but didn’t clash too much with the other elements. I tried to avoid red and green for that color palette, since those colors are associated with “money in” and “money out" in banking apps respectively, and I didn’t want the colors to have any other connotations.
I also ended up making some changes as I worked through the project and got feedback. Originally, I was using Capital One brand colors for the spending categories, but got feedback that those colors were too limiting, since some people might have more spending categories than brand colors. Additionally, some of the brand colors were too similar (such as different shades of blue), and/or had other connotations in a banking app (such as red.)
I also learned to really think about how the user would interact with this feature in the app. I originally had a menu item called “Manage Budget” in both the checking and savings accounts, which led to a screen with both spending limits and savings buckets. I decided through feedback I got that it made more sense to keep these features separate, with spending limits and budgeting categories only in the checking account, and for savings buckets only in the savings account.
Next Steps
Expand the color palette I developed for category labels, so that users can create more budgeting categories, while being able to distinguish between category colors easily
Add notifications that would alert users when they are getting close to their spending limit for a budgeting category
