top of page
Component 8.png

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. 

bloom budget home.png

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”

Screen Shot 2023-09-27 at 5.42.19 PM.png
Eight young adults were Interviewed via Zoom.
Screen Shot 2023-09-27 at 5.42.19 PM.png
Participants are from a variety of Incomes.
Screen Shot 2023-09-27 at 5.42.19 PM.png
Participants are from a variety of ages in their 20's.
Screen Shot 2023-09-27 at 5.42.19 PM.png
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.

DALL·E 2022-11-19 14.33.57 - 19 YEAR OLD girl posing a music festival realistic photo.png
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
goodbudget.webp

Good Budget

buddy'_edited.jpg

Buddy

In-Direct Competitors
ck.png

Credit Karma

usbanks.png

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. 

Screen Shot 2022-10-29 at 8.26_edited.jpg
Screen Shot 2022-10-29 at 8.26_edited.jpg
bloombudget garden.png
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.

Screen Shot 2023-09-27 at 11.00.47 PM.png

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.

Screen Shot 2022-10-31 at 5.12.15 PM.png

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.

bloombudget food budget.png

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.

bloom budget home.png

High Fidelity Prototype

     Personally designed an idea for high-fidelity design. My changes included adding color and rearranging the interface to be more functional. 

bloombudget garden.png
bottom of page