My Money
Personal Budget Tracking
Responsive Website (Mobile/Desktop)
Working in the space of Finance, I worked with a team to address Personal Budgeting and Spending. The goal was to move across the spectrum of UX, from Design to Delivery, and eventually present a working prototype for Mobile and Desktop views.
Have you ever wasted money on subscriptions? Or set a goal to come up a little short?
These are just some of the questions we asked ourselves before exploring the the scope of this Personal Budgeting world.
In today’s busy world, we assumed that:
​
-
People want to keep track of their spending habits, but often don’t bother because of how complex it can be
​
-
Not all users treat their budgeting the same, some have priorities that differ greatly from others​
​
-
Not visualizing their data makes it hard to comprehend the changes it’ll bring to their lives
​
Setting a Goal
PROJECT SCOPE
With these assumptions in mind, we set out to define our process and get to work in Research.
Our UX Opportunity
As our team sat down and thought through the scope of our work,
we defined some parameters that would help us through the process.
PROBLEM
How might we help people with their spending by providing a method to track finances in a new way?
APPROACH
We focused on solutions that would be low-effort, so users would be motivated to keep up with tracking daily or weekly.
CHALLENGE
Currently, we assume that users may track some of their finances, but not all, leaving much unaccounted for.
SOLUTION
Our solution was to provide critical categories and focuses upon login, with more detail able to be found further in the app experience.
Finding the Real Needs
RESEARCH
Our first step was to conduct User Interviews. Speaking with real users would give us the critical data we needed to ground our designs in real world needs.
We Spoke to People Who:
Tracked their own finances, but Manually (Paper, Excel, etc)
We found 5 people, and spent about 15-20 minutes with each of them. We conducted the interviews over the Phone or on Zoom.
1
2
3
4
5
Learning from Users
We were able to synthesize our work by creating an Affinity Map. We wrote observations from our five interviewees and grouped them by Theme. Then we extracted key Insights.
​
-
People think going out is the easiest place to reduce spending
​
-
Most people take actions to add to their savings
​
-
People spend money on subscriptions they either don’t remember or don’t use
​
-
Mental effort required to remember bills is often stressful
With these in mind, our Goal became clear:
​
How might we provide people with a way to budget their spending, in order to have an understanding of key areas to adjust, while meeting personal interests, avoiding late payments, and reducing unwanted charges.​
Defining our Features
IDEATION
With our Research completed, we were able to move to the next step and define how our insights would turn into actual feature ideas for our designs.
Visualizing our Features
DESIGN
​​From this base, we moved to begin visualizing how a concept would look.
​
We each took 10 minutes to sketch, beginning to ideate on concepts, flows, or anything that came to mind. We then presented, critiqued, and ran the process again. After our second time, we converged to talk about how to proceed.
​
With these sketches, we then moved to digitize them at a Mid-Fidelity level. The goal here was to create a realistic wireframe mockup of the designs, but without adding color, detailed text, and other finishing details.
​
We prototyped, tested with users, and iterated on the initial designs. Eventually we brought them to High-Fidelity
and conducting an additional round of testing.
Make Your Money, Yours.
The concept for "My Money" revolved around 3 core features.
1. Category Detail
Users can view their spending based on categories, like food, entertainment, etc. Categories are system populated and custom tags can be added by the user.
​
In addition, one "Critical" category is shown on the Home screen. This corresponds to the area which is most at risk of passing the users pre-defined spending threshold.
2. Spending Breakdown
From the home screen, users can enter their overall spending breakdown. Here, they are presented with a Pie Chart of all categories they've identified. Upon clicking on any category, they will enter more detail of transactions.
3. Reminders
For our reminder feature, this was directly related to feedback from our User Research. Users wanted a way to not miss recurring charges and be able to cancel them prior to being charged.
​
By allowing them to view charges on a calendar and set a reminder, they can go cancel prior to the due date.
What Works, What To Improve
TESTING
With our features clearly defined, we wanted to get feedback on what worked and what needed adjusting. We conducted Usability Testing, following a few guidelines to get the best results.
-
5 Testers per round (10 total), different between rounds to avoid bias
-
Created scenarios and tasks for testers to accomplish, Designed to test core features of Design.
-
Collected Data such as Time on Task and Success Rating, amongst other testing notes
-
Worked as team between rounds to identify most critical changes
Mid-Fidelity Round
Home Screen
Users see their overall spending and savings
Spending Overview
Spending categories are represented in a pie chart
Category Detail
Clicking into a category brings the user to a detailed breakdown
Calendar View
Clicking the calendar icon on the home page brings the user to a full calendar view
Calendar Charges
Clicking a day on the calendar, a user sees the charges occuring on that date
Testers did not quickly identify what their "Critical" Category was.
It was obvious for testers to click on the pie chart for further detail.
Testers did not understand that the charges on associated dates were able to be clicked on.
Changes for Hi-Fidelity
-
​Evaluated other calendar options for the icon to make it more intuitive
-
Altered wording on the home page to indicate progress bars can access more information
-
Changed the wording of ‘Subscriptions’ in home page into overspent signifier alert
-
Introduced hover states to allow for intuitive understand of functionality
-
Evaluated alternative designs for representing “Spending at a glance” on the home page
Hi-Fidelity Round
Home Screen
The home screen now features a "Critical Category" alerting users to pay attention
Spending Overview
Spending breakdown gets colors per category to quickly identify them
Category Detail
Decreased space between the Spending card and individual charges allows more information to be displayed at once
Calendar View
The calendar view is a complete overhaul, working as a horizontal slider with charges clearly separated by date
Calendar Charges
Individual day charges stays the same with the addition of color on the names to indicate being able to click for options
What's Next?
TAKEAWAYS
-
​We made improvements by highlighting the clickable text in blue and adding spacing between each subscription. This allows users to easily click on each item.
​​
-
We added another card on top of the savings card, labeled as 'Critical Category,' and highlighted it. This ensures that users have a better understanding of what is important and prompts them to pay attention to it.
​​
-
We changed the calendar icon to be lighter, improving its visual appeal and clarity.​
Wrapping up our testing, these are the changes and decisions we made.​
These aim to make the site more communicative and personalized for users while maintaining consistency.
Conclusion
From research, we proved a clear need for a service that can help with personal budgeting. Through our process we designed a service that can help them with just that.
At the end of this project, we created a compete budgeting service that's a single destination for busy people looking to save money and address their budget tracking concerns.
Meet The Team
Nick Rotondi
Solomiia Pavlyuk
