Budget Buddy

2024 GOOGLE UX DESIGN CERTIFICATION PROJECT
Budget Buddy is a budgeting app intended for users who want help increasing savings and minimizing expenses. These users have never used a budget app, or have been intimidated by more complex alternatives, and are overwhelmed and discouraged when their expenses exceed their budget, and may not know how to adjust their goals in a way that puts them back on track. Budget Buddy is a guided way to introduce users to the idea of budgeting and recognizing the importance of categorizing transactions and monitoring trends of spending so that they can better understand and regulate their expenses and lifestyle to meet personal budget goals.

App Prototype

Website Prototype, Desktop Layout

Website Prototype, Mobile Layout

CASE STUDY

PROBLEM
Users found existing budgeting resources to be overwhelming and confusing to set up, and difficult to stick to when they overspend.

PROCESS
I conducted research on existing financial assistance apps like Capital One and Chase Banking, as well as those that are specific to helping set budgets and monitor transactions like YNAB and Monarch Money. I analyzed the successes and pitfalls of these apps with regard to the demographic I intended Budget Buddy to work most effectively. This was how I realized that an AI-empowered real-time assistant that provides suggestions on how users can move funds around to accommodate excess budget funds and overspending is something that hadn't really been tried before while still utilizing familiar "category" features for setting budgets based on similar expenses.

Additionally, I kept accessibility guidelines in mind when ideating on the branding of the app itself, making sure that touch areas were distinct, colors had enough contrast, and that text was large enough to read.

CONCLUSION
Budgeting is difficult, especially when one doesn't know where to begin, or when they have too much freedom in the budget set-up process. Once they get the hang of tracking expenses, some users lacked the confidence to reconcile overspending. The idea of a "buddy" is helpful because it utilizes AI technology to help digest where the overspending comes from and how users can move funds around to make up for it. This provides a true learning and confidence-boosting experience for the user so that they can begin to feel in control of how their money is spent rather than simply watching as it is consumed.

User persona

This user persona represents an example of the kind of user this app targets. It helps to consolidate common user pain points and lays a foundation for the event landmarks the app should help the user achieve.

Wireframe storyboard (app)

Here is the first iteration of a sequence of wireframes for the app featuring the onboarding process and how a user would create a budget; the budget creation was later eliminated in favor of a pre-set budget to alleviate user stress about having to come up with their own categories.

Usability testing

I conducted in-person usability tests with family and friends, and I also provided a link to the wireframe prototype and a survey in a few online finance/budgeting forums to gather feedback about the overall flow of the app and what users thought about the concept. I used this feedback to iterate the wireframe and reconfigure layouts for the mockup.

High fidelity mockup

Above are some screenshots from the app's high fidelity mockup. Ensuring that the brand met accessibility guidelines was one of the highest priorities for me. When selecting a color palette, I wanted something high contrast but also on-brand, so I decided to go with a "piggy bank" theme. I also wanted to make sure I provided enough white space and separation between elements for touch areas and that text was large enough for anyone with visual impairments to easily recognize. I also carefully chose a geometric sans serif typeface and set specific styles for varying functions.

Wireframe options (website)

After completing the prototype for the app, I began the process of iterating on what this project would look like as a responsive website design. I have been very interested in the "bento" UX trend and concluded that I wanted to try reflecting that style with this project.

High fidelity mockup (website)

Here are the "bento" themed home page mockups for the website designed in both desktop and mobile layouts. The bento trend utilizes separate but related blocks, which seamlessly lends itself to a responsive layout and I found it very useful in dividing the website's features. The website design utilizes all of the same accessibility features as the mobile app, simply scaled up for a larger screen size.

Google Sites

Report abuse