Contact
Andy Meyers design logo

The Finance Tracker is a feature integrated into the Capital One mobile app that helps people manage their money.

UX, UI, Interaction Design

finance tracker screen mockups
Capital One was looking for ways to improve the financial health of their customers. Their current mobile app focuses primarily on spending and making payments. To help customers manage their money better, the goal was to integrate a new personalized finance management tool into their existing mobile app. Note: This was completed as a personal UX project and is not affiliated with Capital One.
Link to Prototype

Project Overview

Applying a Human Centered Design Approach
Over the course of 4 weeks, I learned about the needs, wants, and frustrations of users and designed a practical solution for Capital One’s finance management tool.

Design Process

ux design process

Discovery & Research

Objectives for Research
  • Find out what methods people use to manage their finances.
  • What types of obstacles and frustrations do people face managing finances?
  • Learn about any financial goals and what steps they are taking to get there.
The Struggle Among Millennials
Capital One sees an opportunity to help younger generations with their financial challenges. Statistics among millennials show there is a clear need for improvement with how people manage their money. Looking at this data helped me see the opportunity to design a feature that could bring value to users.
millennial spending statistics
Competitive Analysis of Budgeting Apps
There are a number of third-party apps to help people manage their finances. I compared some of the most popular budgeting apps to see what they do well and what could be improved. Keeping these findings in mind helped me make better design decisions moving forward.
budgeting apps competitive analysis

User Interviews

Disproving My Assumptions
My assumption up to this point was that there are plenty of well-designed budgeting apps to help people manage their finances. So how could a feature like the Finance Tracker still bring value to people? Conducting user interviews helped me discover a need that most third-party budgeting apps do not meet. I sat down with 4 participants with ages ranging from 22 - 33 to understand how they manage their finances.

Key Interview Findings

number 1 icon
Users have limited time and want simplicity.
Most participants check their mobile bank statements on a regular basis but lack the time or motivation to setup a detailed budget plan.
number 2 icon
Some transactions miscategorized on statement.
Transactions are sometimes mislabeled on bank statements which confused and frustrated participants.

Key Interview Findings

number 4 icon
It’s tough to stay motivated.
Lack of motivation is a common theme when it comes to budgeting. Participants had enough disposable income to not have to setup a strict budget plan.
number 3 icon
Users want to see the “big picture.”
Every participant said it would be nice if their bank app offered visuals to show where their money is going.

Defining the User

To gain more empathy with the user I created a user persona and empathy map. My research findings helped me define who I was designing for along with their needs, wants, and pain-points. This helped me make smarter design decisions that were more than just my own assumptions.
user personaempathy map

Defining the Design Challenges

number 1 icon
How do you get users who don’t want to setup a detailed budget, use a finance management feature?
number 2 icon
How will this feature be useful and bring value to users who don’t have an interest in other budgeting apps?

Early Ideation

Exploring Design Solutions
Ideas for the Finance Tracker started in my sketchbook. This allowed me to quickly communicate ideas and explore various solutions for the app feature.
ideation sketches

Wireframing

Turning Research Insights into Practical Solutions
Designing features based on my key research findings helped create a money management tool that people would find useful. I took the ideas from my sketchbook and turned them into low-fidelity wireframes.
Budgeting in Three Easy Steps
Lack of time and the need for simplicity was an important research finding. My goal was to design a budget setup process that would be as simple as possible for the user. The feature allows users to quickly create budget goals in any category they wish.
create a budget task flow
Solution 1

Customizable Transaction Categories

People were often frustrated by mislabeled or confusing transaction categories used by their bank. Users can take more control by adding custom names and category labels to any recent transaction.
mobile wireframes
Solution 2

Savings Alerts and Text Notifications

To stay motivated, users can have text message notifications sent to their phone whenever they spend less money in a certain category.
mobile wireframes
Solution 3

Visual Aids to Show the Big Picture

Users want to see the “big picture” of where their money is going. Various visual aids are included in the Finance Tracker to give users a clear picture of their spending habits.
mobile wireframes

User Flow

user flow

UI Design

Keeping the Design Familiar to Users
Working with Capital One’s existing styles, I created UI designs for the Finance Tracker. To create a familiar experience to users, I focused on using consistent design patterns found throughout the Capital One app.
high fidelity mockups

Prototyping

Using my UI designs I made a working prototype of the Finance Tracker. My goal for creating the prototype was to put the Finance Tracker into the hands of real users and validate my design decisions.
finance tracker prototype

Usability Testing

Validating the Design
To uncover problems in the design or opportunities for improvement, I recruited multiple participants for a usability test. To make the testing productive, participants were asked to go through the app and complete two different tasks. After the test was complete, I asked follow-up questions to gather more feedback.
Goals for Testing
  • Observe user’s behaviour as they navigate through the app.
  • See how easily the participant can complete the tasks given to them.
  • Identify any pain points or concerns the user has while using the app.

Testing Tasks

number 1 icon
Lookup how much you spent on food and entertainment. Setup a new spending goal for those two categories, then change the spending notifications to ‘weekly’.
number 2 icon
Find a purchase you made on 10/18 for a concert ticket you purchased online and change the category label to Gifts.

UI Revisions

After the usability test, I organized my findings into an affinity map. The test findings helped me see what areas of the design succeeded or fell short. Based on the findings, I made revisions to the Finance Tracker.
affinit
Revisions 1 & 2

Spending Subcategories

Users wanted specific spending categories to choose from rather than just one broad category. Subcategories were added whenever the user is asked to choose a category of spending.

Category Confirmation

Users were expecting a confirmation step once the category was chosen. To avoid confusion, users must click ‘Done’ before returning to the previous screen.
finance tracker category revision
Revision 3

Adding Budget Notifications

Users stated that it would help them stay motivated if they were notified of the remaining amount in their budget. Extra text notifications were added to alert users and help them stay motivated to save.
finance tracker text alert notification

Project Take-Aways

Details That Make an Impact
This project made me appreciate the role that small interactions play in design. While they may be small on their own, the total sum of these interactions can make a powerful impact on the user’s experience. These small interactions helped engage users, create positive emotions, and make the experience more rewarding. Attention to detail is what really makes a design successful and stands out from the rest.
HEEM
Scroll to Top
SFS
Andy Meyers design logo
hello@andymeyersdesign.comLinkedInResumé
Next Project