Home Budget | Mobile App Optimization
role: director of ux // hours: 960 // results: 2x downloads
01 | The problem
Problem: The lack of financial literacy cost Americans $415 billion in 2020.The average credit card debt in America is $6,270. Around 40% of Americans have less than $300 in savings. Only 30% of Americans have a long-term financial plan.
Home budget approached us looking for help with a refresh on their UI design and to identify pain points for experience optimization. The app has two variants: the web version presented with an informative dashboard. The mobile version gives more simplistic information and enables users to add new data quickly and easily.
02 | My Process
We released surveys and interviewed both the current and potential users to understand what they would want from the app. This also included reading reviews on the app store to find the common pain points. To eliminate the need to download multiple apps, we added the following features:
- Easily digestible infographics to help users see the big picture
- An experience that guides them to set realistic goals tailored to their financial situations
- Alerts that provide encouragement and feedback on their progress based on their goals so taking actions for improvement becomes easier
03 | Research
Surveys:
The goal was to gather user feedback on finance apps they have and learn which features they would find the most beneficial to them and other pain points that we might be missing. We received survey responses from 29 people and interviewed 8 people.
Frequency of Saving Money
Thoughts on their spending habits
Key Findings:
88.5% of users said they want to save more money and have better spending habits.
38.5% of the participants struggle with budgeting because they lose sight of smaller purchases, have trouble prioritizing their needs vs. wants, and lose track of their credit card bills. Even though the majority of the participants don’t find budgeting difficult, 81% of them said they’d like budgeting assistance.
93% of the participants said visualizing the data with pie charts, graphs, and images and illustrations of their goals would motivate them to save more money, digest information easily, and track their progress. Other ways to incentivize would be through gamification (38.5%) and if they could see others’ progress and plans (19.2%).
The participants said they'd the most beneficial features would be the ability to budget for short-term and long-term goals (81%), the ability to customize spending categories (69%), and visibility of investment and loans (69%).
Common pain points were: non-intuitive interfaces, inability to easily view accounts, lack of customization and miscategorization.
65% of the participants said they’d like the option to not link their bank accounts.
Designing for our users
Melissa, 31, Casual User
“I recognize that I have good money habits,
but I would mind more some help.”
Money Habits:
- 30% of my income goes to my savings
- I meal prep and purchase items after
deliberate consideration - I'd like to set a monthly recreational spending limit
- My 5-year financial goal is to buy a house,
have a family and travel
Motivations:
- The spending breakdown keeps track
of all of the accounts at a glance - I can easily recognize and fix unexpected
or false purchases - The recurring expense feature helps me stay
on top of subscription services
Pain Points
- Inability to keep all accounts connected
- Incorrect categorization of certain transactions
Christopher, 20, Moderate User
“I'm awful at managing money and I want to improve
my behavior and tendencies.”
Money Habits:
- I only save when I need to
- I tend to forget that small expenses accumulate
such as buying coffee daily - My 5-year financial goal is to support myself
after graduating and have enough money saved
for a gap year to travel
Motivations:
- A spending breakdown so I can
understand my spending habits - An easy to update budget to apply
my different income situations
Pain Points:
- Incorrect categorization, so I have
to go back and fix it every time
- I'd like a plug-in for venmo, other apps
don't recognize it, and I use it often - Other apps don't track gift cards or rewards
Tim, 32, Disciplined User
“I have good money habits but I want
to be even better.”
Money Habits:
- I save 40-50% of my income every month
- I'm thrifty. always up for bargains and only
purchase necessary items. - Sometimes I can be too frugal so I miss
out on activities with friends - My 5-year financial goal is to start investing,
support my family and have financial abundance.
Motivations:
- I'd like to see all of my accounts in one place
so it's easy to keep track of my money. - A beautiful UI that keeps me engaged
- The ability to add notes into transactions
Frustrations:
- I can't customize or create new
spending categories on some apps. - Wrong categorization of some transactions
03 | Key Features
Dashboard:
The web dashboard was aimed at presenting extended stats for a particular period. The choice of a generally dark interface enabled the designer to create an attractive layout with prominently visible colored details drawing users’ attention to the interactive zones of key importance.
Web Dashboard:
With the dashboard, the users can get the data about their expenses and incomes processed and shown as a variety of statistics for a particular period. As we can see, different blocks of data are organized around cards. The presented page features the overview of the core blocks for the period of the recent week. The horizontal menu in the top part presents the navigation zone enabling the user to set the default periods of overview such as last week or last month as well as choose the custom period they are interested in.
- the menu with quick access to popular categories of expenses
- information on total expenses and frequency of transactions
- the list of popular transactions
- the cloud of expenses and the weekly average rate in comparison to the previous period
- the line graphs of expenses and income for the chosen period graded by day on the horizontal axis and sums on the vertical axis
- the map with the pins marking the most frequent locations of spending money
- the block of recommendations based on financial operations of the period.
Mobile UI:
While the dashboard is aimed at not only adding information but also presenting the results of its analysis, the mobile interface has the other core focus of functionality: first of all, it is concentrated on having the user informed about the operation of the current day and enables to add new data in different environments and on the go.
Here is the feed of the latest financial operations, marked by categories shown via icons. The top part of the screen shows the tab of the users’ basic data and marks the credit card used currently. Also, you can see the graph reflecting the flow of finances during the day showed with vertical bars. To interact with it, users can apply horizontal scrolling. When the tab is active, the bottom shadow gives a prompt on that imitating interaction with physical objects.
Core Interactions:
To get access to the core zones of interaction, the users can press the hamburger button located in the bottom left corner which supports usability for those, who use devices with big screens. The application also shows the important notifications or recommendations to the user: they are shown in the top part of the screen, under the profile tab and over the bar chart zone. The notifications are presented in different colors that mark the nature of the message, for instance, applying orange for warnings and blue for reminders.
Also, the user can interact with each particular item in the list. Left swipe opens the menu of options marked with icons: the entry can be quickly edited, shared or deleted.
Another piece of the animation shows interaction with the feed of financial operations for the current day. The warning notification adds a more dynamic experience, attracting the user’s attention with pulsing movement, and can be removed with a left swipe.