Budget buddies final

Budget Buddies: A case study on designing a collaborative budgeting APP

💡

Problem

Group budgeting is often chaotic, especially for those with irregular incomes and casual spending habits. Tracking payments, splitting expenses fairly, and sticking to a plan are major struggles. Even worse, when one person loses motivation, it tends to ripple through the group, making it easier for others to quit too.

Agitation

Without a proper system, challenging daily management drains people emotionally. This quickly leads to confusion, missed payments, and frustration. It not only affects one's confidence and persistence but also demotivates the whole group, leaving the entire group trapped in a vicious circle and budget collapse.

💡

Solution

Budget Buddies video_library turns this problem on its head by introducing a flexible, socially engaging approach to group budgeting. The app breaks down complex budgeting tasks into manageable and achievable daily actions, making it easier to accumulate progress. Social features keep everyone accountable and motivated through gentle peer pressure and reminders. This system aims to help users stay organized and turn budgeting into a fun and collaborative effort.

💡

What is it?

Budget Buddies is a UX research and design practice for the professional certificate of Google UX design. It focused on helping disorganized young people collaboratively plan, track, and manage budgets for shared goals. The app addresses challenges such as future planning uncertainty, daily financial management, and transparency in group communication.

💡

Project duration

from 07/01/2024 to 09/01/2024

💡

My responsibilities

User research, Usability study, UI design, Interaction design, Wireframing, Prototyping

Understanding the user

Design Deliverables
Personas perm_media , User journey maps perm_media , User flow perm_media , Storyboard perm_media Next Section: Starting the design arrow_downward

Before conducting research, I assumed group budgeting often fails due to a lack of persistence in maintaining the plan or the complexity of managing group transactions. After speaking with three friends, I uncovered an unexpected insight: once one member stops participating, the group quickly changes to a new state, making it easier for others to quit as well. This insight sparked the idea of using social engagement to keep group members motivated and active. This aligns with popular habit-forming techniques, where rewards encourage repetition, and social activities provide a strong source of enjoyment to maintain engagement.

💡

Complexities in group finances management

Difficulty tracking payments, miscommunication, fairness in splitting expenses, and changing goals.

Lack of motivation and financial knowledge

Struggles in sticking to a budget, complex financial management steps, understanding financial data, setting clear goals, and making sound decisions.

💡

Behind motivation

Understanding basic brain functions also helps explain why people can’t stick to a plan, even with strong willpower. The prefrontal cortex, which handles high-level cognitive tasks, consumes massive resources, depleting willpower over time. The amygdala, which processes emotions, often associates discomfort with tasks and impairs decision-making. Before behaviors become automatic, the amygdala usually wins over, making it easier to quit than continue.

To utilize our brain mechanisms and address the problem of motivation, I developed three strategies followed with key product design features. These features later shape the ideal user flow, creating a unique solution to make long-term goals easier to achieve.

	Method	Key product features	Mechanism explanation
Strengthen the prefrontal cortex power	Break the goal into small manageable steps	Help generate plans with actionable daily tasks	Makes information easier to process and organize
Weaken the amygdala power	Reduce discomfort	Simplify the expense recording process	Minimizes emotional interference
	Improve failure tolerance	Allow flexibility and uncertainty in planning
Get more helpers	Peer pressure	View friends’ recent saving activitiesReceive progress reminder from friends	Activates mirror neurons and reduces amygdala activation

💡

Persona: Mark

Mark is a disorganized freelancer who needs a straightforward and socially engaging budgeting tool because he struggles with maintaining records and sticking to the plan.

💡

Mark’s Goal

To efficiently manage shared expenses with roommates, and save money for a long-term backpacking trip.

💡

Action needed

Start a budget, manage shared expenses with roommate, tracking personal spending, saving for the trip

https://lrcwebdata.s3.us-east-2.amazonaws.com/Penny+Party/mark+userjourney.png

Starting the design

Design Deliverables
Information Architecture perm_media, Wireframes perm_media, Low-fi prototype Next Section: Usability Study arrow_downward

💡

https://lrcwebdata.s3.us-east-2.amazonaws.com/Penny+Party/home_paperwireframe.png

Paper wireframes - Home

Imagine opening an app only to be greeted by a maze of numbers and options — many users abandon apps at this very point, especially when faced with the stress-inducing world of personal finance. In the initial wireframes, I focused on presenting the most immediate and rewarding actions for Home. Green marks in the picture shows I selected Daily tasks and on-going budgets as key components.

💡

https://lrcwebdata.s3.us-east-2.amazonaws.com/Penny+Party/home+wireframe+grey.png

https://lrcwebdata.s3.us-east-2.amazonaws.com/Penny+Party/wallet+wireframe+grey.png

https://lrcwebdata.s3.us-east-2.amazonaws.com/Penny+Party/friends+wireframe+grey.png

https://lrcwebdata.s3.us-east-2.amazonaws.com/Penny+Party/project+details+wireframe+grey.png

Digital wireframes - Four major screens

The principle is to make financial management feel less like a chore and more like a rewarding journey. From left to right, top to bottom, screens are: Home, as a dashboard to view goals and tasks; Friends, as a social hub that creates people interactions; Wallet, manages transactions; Project Details, collaborate with friends to plan or record a budgeting activity.

Usability study

Design Deliverables
Research plan, Interview notes, KPI Comparison arrow_downward Next Section: Refining the design arrow_downward

💡

Low-fi prototype

The prototype simulated Mark’s user flow: Plan and save for a future trip with friends. 6 prompts guided 5 participants through key actions: create a new budget, collaborate on plans, completing daily tasks, and track spending.

Feedback

Further interview revealed concerns: inconsistent navigation, an overly complex planning mechanism, and underutilized functions.

💡

💡

Improvements

I streamlined the navigation by unifying top navigations and ensuring consistent visuals across screens for project folders, plan items, and tasks. I simplified the planning mechanism, integrating it with accomplishment systems into a feature called Today’s Challenge. Section names were refined to be direct and intuitive.

💡

Improved prototype

The revamped prototype went to second round testing with three new participants. The results were promising: the conversion rate jumped from 80% to 100%, and task completion times dropped to under a minute.

Feedback

Another layer of complexity emerged—users struggled to distinguish between routine, temporary, shared, and personal expenses. People’s financial habits are unique. They have varying interpretations towards how these expenses should be categorized. This pushed me to consider separate mechanisms for recuring and one-time charges.

💡

Task completion time, conversion rate and System Usability Scale (SUS) were used as KPIs of design effectiveness and intuitiveness. Both rounds used the same set of prompts. All participants were supervised during the testing.

Refining the design

Design Deliverables
Design systems, Mockups, Hi-fi prototype, Final animation Next section: What I learned arrow_downward

To address the problem, I strategically adopted visual cues in the design system. Shapes indicated interactivity, distinguishing buttons from static elements. Colors became markers: black for money distribution, blue for regular bills, and pink for dream activities needing extra funding. To match users’ mental models—how they expect features to work and where functions should be located—I flattened nested interactions to reduce navigation efforts, and trimmed the main screens from four to three without sacrificing essential features.

https://lrcwebdata.s3.us-east-2.amazonaws.com/Penny+Party/design+system+one+page.png

💡

Home - Focus on what’s next

Goals: Ongoing projects and items nearing their due dates
Today’s To-Do: System-generated tasks breaking down larger goals into daily steps
Budget Pals: Colorful geometric figures that user unlocks through accomplishments—a playful nod to keeping financial health engaging

Budgets - Goals and Progress

Running Projects: An overview of budget projects highlighting funding progress and spending comparisons
Project Folders: Expandable folders allow for item-level adjustments, with fixed expenses and planned expenses color-coded for clarity

Reassign funds, Monitor expenses

Spendable Pot: Shows free money by subtracting allocated funds from the bank balance
Adjust Funds: Quick options for adjusting allocations
Log Payments: Easy inputs for recording expenditures

💡

Project Details - Joint planning, Shared costs

In the screen, users can collaboratively plan activities and manage spending with group members. A default summary assists in quickly calculating money splits based on the planned budget, split rules, and payments made. Communication transparency is built through comments, likes, votes, and notes. Users aren’t pressured to plan every detail upfront; they can create variations and make decisions later—a flexibility that accommodates the unpredictability of life.

Group costs, Individual splits

Users toggle between viewing expenses at the group level or personal share. This filtering allows Project Folder to accommodate various item categories, no matter how users organize them mentally.

Friends - Stay connected, Share progress

This screen allow users to view project updates and recent activities, reacting with encouragements or reminders—a social touch that turns financial management into a communal experience.

What I learned

Back to the top vertical_align_top

Designing this app was a journey through the intricate pathways of user experience, where every decision had to balance functionality with simplicity. This project gave me the opportunity to conduct a UX study using both quantitative and qualitative data and experience the full design cycle from ideation to finalization. The most inspiring part was the usability research, which revealed my blind spots and assumptions on interaction design. I learned to effectively communicate functionality through the naming, and avoid deeply nested interactions in mobile apps. This encouraged me to offer robust functionality with straightforward logic.

Another valuable lesson I learned was the importance of digging deep to investigate the problems and staying persistent in finding solutions. During the first round of testing, participants provided all negative feedback on the design, hierarchy, and interactions. The detailed and sometimes conflicting perspectives made problem solving challenging, as the feedback was highly subjective. However, a change in system logic magically resolve these multiple issues at once. The thinking process behind this involved generalizing various concepts into one main structure with variants. Once the “coefficient” is found, everything aligns. While it may seem like magic, finding the solution takes time and exploration. Often, when no solution seems apparent, it’s often our mindset and limited perspective that restrict discovery.