"Introducing a user-friendly intuitive app to monitor your financial health that encourages both a sense of responsibility and self-control. "

problem

users are discouraged from using financial apps due to their challenging learning curve and overwhelming interface. 

Budgeting apps are frequently too intricate for consumers to grasp at first, making them tough to utilize. Additionally, some users prefer to manually enter all data into the app since they don't fully trust the security of connecting their banks to apps. I interviewed four individuals that don't use budgeting applications yet prefer to manage their finances on their own and they provided me the following insights.

“Budgeting apps are too confusing to me. It has too many features and there’s too much stuff to do.”
- Interviewee 1

“I don’t want to connect my banks because I don’t feel safe doing that.”
- Interviewee 2

“I use my Notes app because it’s quick and accessible and I have most control.”
- Interviewee 3

“I don’t have the motivation to learn how to use apps and I don’t like having to link my bank information.”
- Interviewee 4

project type
Independent UX Case Study
project duration
November 2023 - February 2024
my roles
UX Researcher
product Designer
Wireframing & Prototyping
solution

BudgetBean gives people the confidence and simplicity to take charge of their financial lives. 

Simple and straightforward user interface
Confidence and ease in their budgeting experience
Strong sense of privacy and control
Accurate records of their financial health
ux design process

i outlined a 6-step approach to go about this project.

1.
research
Interviews
competive Audit
2 .
define
affinity Mapping
Problem Statement
3.
ideate
Solution
Informative Architecture
4.
design
Lo-Fi Wireframes
Lo-Fi Prototype
design kit
5.
test
usability testing
insights
6.
iterations
hi-fi Wireframes
interactive prototype
competitve audit

I conducted a competitor analysis on three of the most well-known budgeting apps to identify their strengths and weaknesses.

weaknessess
  • Users disliked the complex and complicated navigations.
  • Users disliked the often occurrence of inaccurate information.
  • Users disliked needing to pay to utilize all features.
strengths
  • Users liked a clean and straightforward user interface.
  • Users liked the ability to keep track of all their expenses.
  • Users liked being able to sync their financial accounts.
MINT
GOODBUDGET
YNAB
AFFINITY MAPPING

After conducting the user interviews, I categorized every comment made and identified three main points that were brought up in relation to budgeting apps.

They want to be in complete control of their financial transactions so that information remained accurate at all times.

They express a lot of concerns about security and privacy when it comes to linking their bank accounts to the app.

They are discouraged from utilizing budgeting apps because of the steep learning curve involved.

iinformative architecture

My primary objective was to create a straightforward and user-friendly Interface for the app.

lo-fi wireframes

Keeping my goals in mind, I produced low-fidelity wireframes for my early app concept.

I took a pretty direct approach when designing. I used the greatest features of the financial applications that are currently available on the platform as inspiration for my own design, improving upon the aspects of their designs that are known to be lacking.

To view the image in larger resolution, please click on it below.

all of the lo-fi wireframes
usability testing #1

Five participants were assigned simple tasks to accomplish on the low-fidelity prototype, and I gathered 4 key insights.

Results
  • 3/5 participants were confused as to why the "savings" tab wasn't in the assets tab.
  • 4/5 participants had difficulty with how to share a goal with another member.
  • 5/5 participants weren't able to comprehend how to delete the transactions on the page.
Improvements To Be Made
  • Consistency: Ensure that every action—such as add, modify, and delete—is carried out uniformly throughout the application.
  • Placement: Verify that every tab is in its proper location for easy access and less confusion.
  • Navigation Bar: Include text under each icon to identify tabs easier and quickly.
  • Clarity: Provide clearer direction on the steps that need to be taken in order to finish a task.
Positive Feedback
Negative Feedback
high fidelity failed attempt

my first high fidelity design was unsuccessful so i made a few changes.

I wasn't happy with how my high-fidelity wireframes appeared when I added color, text, and other elements. When viewed on a phone, everything appeared excessively large and outdated. I revamped my app by drawing influence from Google's Material Design, to give it a more modern  appearance and feel while retaining all of its essential functions.

To view the image in larger resolution, please click on it.

design kit

My design incorporated clean, easy-to-read colors and typography, making the app appear user-friendly, uncomplicated, and modern.

To view the image in larger resolution, please click on it .

hi-fi wireframes

My complete budgetBean high fidelity wireframes have a clean, modern style that is simple to grasp and navigate.

usability testing #2

With 5 individuals testing my high-fidelity prototype, I discovered 3 key insights on which I needed to focus.

Results
  • 8/10 tasks that were given to the participants were successfully completed with little to no challenges by all of them.
  • 2/10 tasks that were given to the participants took a while for most to complete; could not identify where to add members to a goal, find where subscriptions were located.
Improvements To Be Made
  • Clearer Indications: Improved the guidance of each page's possible actions.
  • Terminology: Changed some terms to be more widely understood.
  • Design Updates: Enhancing the app's overall appearance and feel, as well as some sections' readability.

To view the image in larger resolution, please click on it .

hi-fi prototype

BudgetBean's final app design demonstrates easy-to-complete tasks and allows users to feel comfortable and in control when using the app, with the option to manually enter their data.

Sign Up Process
setting Budgets
setting Goals
Debts & Subs
view Assets
Adding new
view Activity
Settings
takeaways

Being my first case study and a product of the Google UX course, I am quite satisfied with the end result.

I'm happy with the quality of work I was able to produce and throughout the process, I was able to gain a lot of understanding of the world of UX/UI. Experiencing the full UX process in action and learning about the industry's various approaches to problem solving and design was eye-opening and insightful.

next steps

Following the case study, there are a few areas I would like to further improve on.

  • What aspects of the design can be made better?
    The next steps involve iterating continuously and carrying out additional usability testing with more participants to see what needs to be improved.

  • How can features be more noticeable and easily accessed?
    Users prefer to take the quickest route feasible to complete tasks so there are some stages I can omit or combine to expedite and simplify the process.