Breezy Budget
UX Designer / Mobile App / Sept 2024 - Oct 2024
Breezy Budget emerged from a desire to solve a common challenge: helping groups effectively save and plan for significant shared expenses. Through user research and iterative design, I developed an app that enables friends, families, and roommates to collaboratively track and contribute to collective financial goals. The project focused on creating an intuitive platform where users can easily set up shared savings objectives for vacations, major purchases, or group experiences, with transparent tracking and seamless contribution mechanisms. By prioritizing user experience and group financial dynamics, Breezy Budget aims to transform how people approach collaborative saving.
User Research
To begin my research for this case study, I focused on people who live with other family, a partner, or roommates. Then I examined the use and impact of technology in their lives. I wanted to talk with people in different professions and age groups to determine if there were any common needs and pain points. Technological literacy was an important factor to determine if the participants were more or less inclined to rely on digital tools.
Findings from research
Through these conversations, I found that people fell into one of two categories, and these categories had different takes and concerns.
​
Overall, the sentiment of both groups was that they were willing to change their current status quo if they found a tool that simplified their experience.
Common pain points
Across the groups, these were the key issues people encountered in their experience with their budget tools or searching for one.
​
1. Overwhelming Initial Setup
People often abandon budgeting apps during the first-time setup because it required too many decisions upfront - setting up categories, establishing budgets for each category, and inputting historical data.
2. Confusing Data Visualization
Many tools present complex graphs and charts that look impressive but don't clearly communicate actionable insights.
​
3. Unintuitive Navigation
Users have to click through multiple screens to perform common tasks like checking category balances or entering cash transactions.
A closer look at our users
From this research, I was able to build an understanding of user groups in need of budgeting solutions. Let's first examine Elliot's persona. Elliot is trying to save up money while attending night classes. He lives with his partner and they need to budget their shared expenses together. His main priority is to cut back on extraneous spending.
Next is Mark. Mark is a student with three other roommates. He wants to track his personal spending and the household expenses with his roommates. His main motivation is for the group to budget for their trips and house purchases more effectively.
Beginning the Design Process
Research into comparable products
Before starting to create the design, I investigated a few other options for budgeting apps on the market in order to gather inspire and find ways to stand out.
Company
Key Features
Design Takeaways
Cashew
-
Transaction tracking
-
Budget tracker for specific goals or trips
-
Tip jar, contributions add transactions
-
Clean design and interface
-
Uses many motion transitions
-
Main sections are easy to navigate and use
-
Customizable visuals and categories
Meow Manager
-
Different ledgers you can switch
-
Budget tracker
-
Transaction tracker
-
Assets tracker
-
Stylized with very cute icons, centered around cat theme
-
Feature rich but confusing to navigate
-
Many different customizable visuals
EasyBudget
-
Uses a monthly calendar
-
Transaction tracker
-
Simple design to track day by day expenses
-
Minimalist interface without many customizations
I found it easiest to use when apps did not have overly complicated features or options. A clean design helped a lot with a few images to visually categorize the information. Many apps also did not feature group functions.
Mapping the user workflow
As I started brainstorming, I went ahead and created a user journey to map to visualize the potential options and screens for the app. I put myself in the shoes of the user and determine how I would navigate the app, the actions I would expect to perform, and how to navigate.
_edited.jpg)
Getting into the details
From the user journey map, I formulated a list of potential requirements for each screen. Carefully listing out the requirements helped me group functions into appropriate categories. One significant discovery between my user journey map and requirement definition was the addition of a Transactions screen, as my original plan lacked an intuitive pathway to navigate to this section.
Screen
High Level Requirement
Detailed Requirements
Home
Top level view of app features showing the most important data from each screen
-
Budget graph of spending and expenses
-
Most recent transactions with toggle for All, Expenses, and Income
-
Most recent group goals
-
Easily navigate to each relevant screen
Budget
See budget overview and charts, manage group memebers
-
Budget graphs
-
Actual and expected graphs
-
Spending breakdown by category
-
Edit budget
-
Create categories, set expected
-
See most recent transactions
-
Manage household
Transaction
View and track expenses and income
-
Add transaction
-
Edit transaction
-
Remove transaction
-
View household transactions
-
Toggle between income and expense views
Group Goals
View and manage group goals for the household
-
View group goal list
-
Create group goal
-
Edit group goal
-
Archive group goal
-
Add contribution to goal
-
Edit contribution
-
Remove contribution
Moving to the Design Phase
During the initial design phase, I prioritized creating an intuitive information architecture that would guide users seamlessly through the app. By focusing on the product requirements and insights from research interviews, I developed a design approach centered on user needs. The research consistently highlighted ease of use as a critical user concern, which became a fundamental principle in crafting the interface. I mapped out user goals and the key actions supporting them, ensuring the designs aligned with the core objective of creating an accessible and user-friendly experience.
Sketching out the details
Moving to Digital
Expanding on design
I decided to base the design system off Material Design guidelines and design for Android, using color to create the app's branding and style. The color usage is more bold and dynamic as well. Motions and transitions are meant to reflect the changes between screens and dialog, so users feel a greater sense of movement. The images and icons were used to draw the user's attention and convey more information as well as adding to the app's personality and inject more color.
.png)
Incorporating User Feedback
With the mockup and high fidelity prototype, I set out to gather more information and feedback about the app’s design and experience. I received some key feedback that helped me reconsider some of the current workflows and how to expand the information.
Interviewee #1
The pop up screen’s width was much smaller than the screen size and harder to use. I also had to scroll pretty far to get to the bottom.
Interviewee #2
The group features are nice but I’d like to see everyone’s records for the household expenses. For a household it would be helpful to see all the group expenses
Iterating on Design
Based on user test feedback, I redesigned the workflow by replacing overlays with dedicated screens for more complex interactions. Complicated processes like editing and configuring budgets were transformed into full-screen experiences, allowing for greater clarity and ease of use. However, I maintained modals for quick actions requiring fewer than three input fields, ensuring efficiency for simpler tasks. The redesign also expanded functionality, introducing more comprehensive options for viewing household expenses and added group goal contributions directly on the transaction screen. In the second mockup, these new screen designs are prominently highlighted with a border.
View this prototype
Lessons for future projects
Simplicity vs. Usability
In my initial design iteration, I mistakenly equated speed with effectiveness. My drive to create a quick workflow led me to oversimplify critical components, ultimately compromising the user experience. I discovered that adding extra screens can be beneficial, especially when dealing with complex information. Not every interaction should be reduced to its bare minimum; sometimes, clarity requires more deliberate navigation.
The importance of robust information architecture
Early in the project, I initially considered embedding transactions within the Budget category. However, this approach quickly revealed its limitations. As I delved deeper, I realized that information architecture is far more nuanced than a simple categorization exercise. Each design decision profoundly impacts the user's journey, guiding their understanding and interaction with the product.