Overview
Our objective is to create a clickable Figma high-fidelity prototype that tackles a common money-related issue - the dull nature of budgeting. We aim to transform budgeting into an engaging experience by gamifying the process, allowing users to visually track their progress and make financial management enjoyable.
Roles and Responsiblities
-
User Interface Design
-
Proto-Persona Verifying
-
Affinity Diagraming
-
Competitive Analysis
-
Creative Matrix
-
MoSCoW Prioritization
-
User flow Diagram and Storyboard
-
Usability Testing and Iteration
Our Goal
Bloom Budget aims to revolutionize budgeting by turning it into a game that quickly rewards users for their commitment to saving money and achieving long-term financial goals.
A national survey on financial management practices found that 46% of respondents use a budget.
Our team hopes to create a more motivating experience budgeting to encourage more people to secure their personal finances.
Proto-Persona:
A reasonable assumption of our ideal user.
Madison Montgomery
Age: 21
Gender Identity: Female (She/her)
Occupation: Full-time student at community college,
Part-time Cashier at Kolhs
Behaviors
-
Personality: Impulsive and Spontaneous
-
Likes to: Listen to Self Improvement Podcasts, Plays Mobile Games like Candy Crush
-
Love to: Travel and Goto Music Festivals
-
Doesn't Like to: Do Math
Goals and Needs
Needs to:
-
Learn Monthly Budgeting, successfully save for Music Concerts, and quickly see how much is left in their budget
Wants to:
-
Feel more secure in financial knowledge, feel motivated to continue budgeting, and feel instant gratification for saving money
Pain Points
Pained when:
-
Spends too much on stuff they don't need, and can't afford to go to events with friends
Annoyed when:
-
Budgeting takes so long to finish, and they feel financially illiterate around others, and apps are boing and not engaging
A Potential Solution
For Madison's Pain points:
An engaging educational budgeting app that incorporates interactive, personalized visuals. These visuals unlock as the user saves money, records daily expenses, or explores financial tips.
Interviews
“In the past, I would do a lot of impulsive spending, and then I wouldn't have enough for the things I needed”
“My budget is more like a mental checklist, but I do wish I wrote more stuff down”
“Entering the workforce was the primary reason I learned personal finance”
Eight young adults were Interviewed via Zoom.
Participants are from a variety of Incomes.
Participants are from a variety of ages in their 20's.
Adults Equally Identified as Male and Female
Affinity Diagraming
-
50% of participants mention being upset at impulsive spending habits
-
37% of participants mention being upset at the lack of school education
-
75% of participants mention wanting knowledge on investing
-
All participants never received a formal education in personal finance
-
Half of the participants believe cartoony visuals would be good for a younger audience.
-
A majority of participants mention needing to budget more
User-Persona:
A Empathy Map of our ideal user based on Interviews and research.
Taylor Young
Age 22
Gender Identity: Female (She/her)
She just started their first job as a cashier and has never received formal education on how to budget or handle finances.
​
Pains
-
Not having enough money for concerts
-
Overspending and not realizing it
-
Annoyed they never received a formal education
Gains
-
Able to save for travel
-
Learned personal finance in a simplified way
-
Can visualize spending habits and make adjustments as needed
Feels
-
Completely broke and worried about being consistent with bills
Says
-
​“Wish I knew how to file taxes, budgeting, knowing the cost of travel and other expenses”
Thinks
-
Budgeting is boring and offputting
Does
-
Never used any app other then bank app for tracking budget
-
Has Impulsive spending habits
Competitive Analysis
Direct Competitors
Good Budget
Buddy
In-Direct Competitors
Credit Karma
US Bank App
Overall Financial Apps are text-heavy and lack motivating visuals
After brainstorming features using a creative matrix grid, and creating ideas based on different user types and core principles, we then prioritized potential features into lists Must Have, Should Have, Could Have, Won't Have, or a MoSCoW Matrix.
Key "Must Have" features included a way to easily visualize and track purchases to different budget categories and a way to reward users with new visuals like new interface colors, flower shapes, and icons.
​
I also developed a User Task Analysis, a Storyboard, and a User Flow Diagram to better understand the emotions and motivations that goes into this interaction.
Usability Testing
The Objective
Discover if the participant added a purchase to their food budget to receive a reward.
​
Questions to be answered:
-
Is it clear what the purpose of the flowers is?
-
Is the user able to find the add recent purchase button?
-
Does the user find the icon animation a rewarding experience?
The Feedback
We learned that our overall flow was functional. However, several buttons needed to be clearly defined, and we needed a simplified interface.
The Task
-
Log in
-
Open Budget Garden
-
See Food Budget Details
-
Add a Purchase
-
View Reward
Prototyping Updates
A clickable prototype built using Figma. It starts with no color and repeated examples as placeholders. This prototype was used in usability testing and evolved with user feedback.
Low - Fidelity
The basic Food Budget Screen comprises a recent purchase list with an option to add more, displays your maximum budget and available funds, features a progress bar illustrating the remaining budget, showcases an icon, and provides a visual representation of your remaining total income.
Mid - Fidelity
In the Mid-Fidelity update, the icon and progress bar was turned in to a flower, some of the interface was turned into leaf buttons. the goal was to test micro interactions and use this verison for usability testing.
High - Fidelity
The high-fidelity update brought about several changes, informed by insights from usability testing. The primary aim of this version was to alleviate overcrowding, introduce an editing button, enhance the clarity of budget status, and provide a means to monitor budget progress. Additionally, the implementation of a dark mode offered improved contrast against the vibrant floral design.