Friends & Finance

Friends & Finance is a mobile and responsive web application designed to help family or friends keep track of their money through sharing budgets or savings goals.

The Problem:

Families and friend groups don’t have a single, transparent place to track shared spending and contributions. Costs get lost in chats and spreadsheets, progress toward goals (like a vacation) isn’t visible, and reminders become awkward, leading to confusion and social friction. My goal was to design a mobile-first app (with a responsive web companion) that lets groups log expenses in seconds, and see real-time progress toward shared goals, which would reduce coordination overhead and make contributions feel easy and equitable.

User Research & Pain Points

I conducted interviews and surveys to help understand how families and friend groups track shared money today, where friction occurs, and what would make a shared-budget/goal tool feel effortless and fair. My research revealed that when it comes to shared budgets, users valued being able to view progress conveniently in one spot, along with building trust that others are doing their part to contribute or stay within the budget.

Information Overload

Users can become overwhelmed and frustrated with too many features or complex dashboards.

Steep Learning Curve

For some users, navigating a financial app and creating a budget may be confusing and struggle.

Lacks Visible Progress

Without a visual progress of their goal, users may lose motivation to complete it.

Time-Consuming Tracking

Manually putting in everyone’s transactions and categorizing them all can be tedious.

Based on the information obtained from the foundational research, I created a persona whose demographics, motivations, goals, and frustrations represent the needs of the users.

Design & Prototype

Based on the results from the research that was done, digital wireframes were created to show the users the layout, structure, and functionality of the app.

This set of wireframes was designed to give a brief and clear overview of their current budgets and savings goals. Users will be able to see how far along in their progress they are, have the option to create a new budget/savings, and can see the last few transactions. This also goes through the process of setting up either a budget or new savings goal.

You can view the prototype here

For the web version that goes along with the app, before a user logs in, the first screen they would see is a page about what the company is and the features the product has. After a user would log into their account or sign up for one, they would then be taken to the main screen where they would see an overview of their budgets and goals. During the low fidelity design stage, I utilized AI-assisted design exploration and layout testing to help streamline iterations and uncover new creative directions.

By adding in the colors to the mockups, users can now easily differentiate between budgets and goals with the green being used for budgets, and the gold being used for savings goals.

Accessibility was also kept in mind when transitioning to the high-fidelity mockups.

Color Contrast:

I made sure there was enough contrast between text and background to improve readability for users with low vision

Consistent Layout:

I used uniform spacing and predictable placement of elements so that navigation feels clear and accessible for all users.

Text Hierarchy:

Having a clear hierarchy throughout helps users distinguish the different sections.