Overview
TD Bank sees an opportunity to develop a personal finance management feature designed to address the needs of Millennials, who range in age from around 23 to 38 as of 2020.
The Budget Dashboard feature guides TD bank customers through the process of creating a workable budget. Users weigh their current expenses and future goals as they allocate their monthly earnings to suit their specific needs.
NOTE: The Budget Dashboard is completely hypothetical and I’m in no way affiliated with TD Bank. I designed this feature to get some practice working within the constraints of an existing product.
Process
Timeline
80 hours over 4 weeks
My roles
UX research
UX & UI design
Usability testing
Selected deliverables
Research report
Competitor analysis
Persona
Task flows
High fidelity wireframes & prototype
In a hurry?
Feel free to skip straight to the end. Otherwise, keep reading to see my design process from start to finish.
Discover
Initial assumptions
Going into this project, my assumption was that people sometimes neglect their financial health because dealing with money can be anxiety-inducing and confusing.
In my opinion, a useful budgeting feature doesn’t just track where your money goes, it helps you set smart spending priorities and uses nonjudgmental language to guide you.
Desk research
I sought out budget guidelines set by financial experts and distilled those what I learned to these 4 points.
50% of monthly income should go towards essentials like groceries and rent
30% of monthly income can be spent on things you want but don’t need
20% of monthly income should go to savings and debt repayment
Strive to build an emergency fund that can cover 6 months of your expenses
These goals aren’t always realistic. In some areas, rising rent costs mean that it’s not unheard of for people to spend 50% of their monthly income on housing alone. The Budget Dashboard will need to account for these variations.
Survey findings
To learn more, I conducted a survey. I chose this method because personal finances are a sensitive topic and I thought I would get more candid results from anonymous participants.
01 | Saving money
All survey participants put aside money each month for savings - most commonly, 10-20% of their income each month.
02 | Financial obstacles
Participants recognized a range of reasons why they had trouble meeting their savings goals, from spending too much on non-essentials to paying back student loans.
03 | Am I on track?
60% of participants are either unsure or don’t believe that their current money management strategies will help them get to where they want to be.
View full research report
Competitor analysis
Who else is solving this problem?
I looked at how a few top budgeting & personal finance apps offer value to users. Some of these apps cater to general budgeting needs, while others focus on more niche functionality.
Given that the Budget Dashboard will be part of a general mobile banking app, I decided to focus on providing a broadly useful service rather than a specialized one.
Defining user needs
Meet Jenna & Michael
I used my research findings to develop 2 personas representing different life stages (and short-term savings goals) of the Millennial target audience.
Problem statement
How might we allow Jenna and Michael to create budgets that account for their long and short-term goals?
Defining app structure
Task flows
I created an app map and task flows to hammer out the details about how the feature’s screens would need to connect.
Because a budget dashboard isn’t very useful until it’s full of accurate information, I chose to diagram the Budget Dashboard’s onboarding process.
Click to see the full task flow
Prototyping & usability testing
I tested a paper prototype with a few users early in the design process. Later on, I conducted more extensive usability testing with a high fidelity prototype.
After testing, I also took the time to do a UI refresh while I addressed the 3 biggest problems that users encountered with the Budget Dashboard.
Because the Budget Dashboard is conceptually distinct from the strictly banking-related features of the existing app, I think there’s a case to be made for leaning into a visual distinction as well.
01 | Clearer visualization
Users didn’t know how to to interpret the budget breakdown charts because they were too visually busy. I reworked the charts to remove redundant information wherever I could so that the overall effect was more streamlined.
I didn’t need to show how much of a user’s budget was spent on rent when it’s already listed as a top expense and the exact percentage is listed farther down on the screen.
02 | Show goal deadlines
Users wanted to know when they would reach their savings goals. Adding this element makes it easier for busy users to get a sense of where they stand without having to do the math themselves.
Now users can see approximately how long it will take them to reach their goals.
03 | Clearer iconography
Users consistently tried to access additional Budget Dashboard features through the hamburger menu on the dashboard homepage. To make it more clear that this action will just take you back to the app’s home screen, I changed the icon to an arrow — a more obvious symbol for going back.
Using an arrow to return to the app’s home screen is more intuitive than a hamburger menu.
Guidelines to get started
It can be hard to know where to start when it comes to setting a budget and planning for future goals. The Budget Dashboard makes it easier by giving users guidelines for how much money they should allocate towards essentials, fun spending, and savings goals.
Clean interfaces for clear understanding
Users can view a summary of everything that’s happening with their spending and saving from the Budget Dashboard homescreen.
Clear graphics make it easy to understand where users’ money is going every month, from weekly spending to building an emergency fund.
Expense breakdown
Users can access a detailed expense breakdown showing their top spending and saving categories along with information on how much of their monthly income is going towards any one area.
See progress as it happens
In addition to seeing the total amount they save each month, users can turn to progress bars that track their journey towards achieving their savings goals.
They’ll see how much they have left to save along with how much of their income currently goes towards each of their goals.
Final thoughts
Creating a new feature to fit seamlessly within an existing app was challenging. In the end, I prioritized clarity and ease of use over keeping the UI completely consistent with the rest of the TD Bank mobile app.
I also used this project to experiment with data visualization, which was a totally new area for me. I’m glad I pushed outside of my comfort zone here, and I learned a lot about communicating visually from working on this project.
Back to top
