• Budget Buddies: A case study on designing on a collaborative budgeting APP
• Understanding the user
• User research Summary
• Personas
• Thinking through the problem
• Starting the design
• Wireframes
• Low-fi prototype and usability study
• Low-fi prototype for testing
• Usability study and testing results
• The improved prototype
• Testing resualts
• Refining the design
• Going forward
• What I learned
• Next steps
• Next steps

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

Budget Buddies is a design practice for 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 key challenges such as future planning uncertainty, daily financial management, and transparency in group communication.

Understanding the user

The design deliveries: personas, user journey maps, storyboards, userflows(view deliveries together)

jump to the next section: Starting the design

User research Summary

what makes group budgeting fail? before user research, I am guessing for multiple answers, such as the lack of persistence to continuesly contribute effort to a plan, or the transactions in groups adds up to the complexity of managing what had happened inside the group. As the initial user research for this project, I talked to 3 of my friends, one insights that was out of expectation is that group activity is a 稳态so agile that it is easy to quite in the middle once one member stopped keeping, forming the new stable. the quiting of one member might This gives me the idea of using social engagment to motivate the using expeirneices help group stick together as much as possible. This 与互相论证with the popular habit forming techniques, that having a reward will natually motivate the brain to do it more. and social activities are one of the best source of dopamine that keeps people engaged.

Personas

💡

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.

💡

Emily is a meticulous and family-oriented software developer who needs a comprehensive and collaborative budgeting tool because she wants to plan for future household expenses with her fiancé.

Take Mark as a representative,

also use storyboard and user flow(click to view the full map),

Thinking through the problem

The design deliveries: user flow, ia

jump to the next section: starting the design

It will be easy to understand why people cannot keep to goals even with a strong will power if we understand some basic brain funciontalities. The prefrontal cortex (handels high-level cognitive functions) consumes masive resources and cause the willpower depleted overtime. Amygdala(processes emotions and detect threat) associate discomfort with the activites and further impaired the decision-making ability, Before an intentional behavior become automatic and managed by other parts of the brain, Amygdala is more likely to win the tug-of-war due to its stronger and immediate power. This also explains why good habit is so hard to form, as brain mechanism makes us easier to quit than continue.

to utilize the mechanism and motivate people in a long time, there are 3 main categories of solutions: make prefrontal cortex power stronger, make amygdala power weaker, borrow power from other place other than this two. after doing competitor research over existing products and also referencing scientific based methods, I catogorizes the possible solutions with product features I want to build:

product feature table1 (full table, view this link) (this table only shows the major functions (limit the selection to 4-5)

additional features table 2

view the product feature table(orgnized in the sequence of user flow)

(The brain machanisms are simplified for easy demostration and functionaliies are not 一一对应. The chart is used for a general knowledge and demonstration purpose and cannot be referenced as authentic and proven details.)

view my ia and user flow after these product features

Starting the design

The design deliveries: ia, paper wireframes, digital wireframes, lowfi prototype, usability studies(2round)

jump to the next section: Refining the design

Wireframes

Paper wireframes - home

home is a place that the user views most often, and it will decide whether user want to stay with this app. it is crucial to filtered out most important and rewarding feature on this screen and minimize elements that might evoke negative emotion.

The final elements I chose to display on home are: the tasks (feature 1),and the events (called project in this phase)(feature 2)

view all paper wireframes

home - the dashboard of budget projects and today’s task

wallet - the finance center that manages transactions

friends - the social hub that share activities and encouragements

project details - multiple spending items grouped under same budget project, allow group collaboration

view all paper wireframes

Low-fi prototype and usability study

Low-fi prototype for testing

the prototype simulate a typical user flow of saving for a future trip. This flow contains steps related to create new budget, edit with friends, complete daily todos, and track spendings.

6 prompts were created to represent actions in the user flow, they were provided to 5 participants along with low-fi prototype(start with home page) for usability testing.

Usability study and testing results

With limited time, I recuirte 5 people to that varies in tech familarity to participate in testing and interview. the time on task, conversion rates and SUS are selected as KPI. key visulizations below

combied with analysis with qualitative data from the interview, and categorize feedback into collaboration problems, finance managing problems, and usability problems.These feedback expressed concern in the inconsistent navigation, complex planning mechanism, underutilized functions, etc. (view the full chart)

The improved prototype

the improved prototype simulate same user flow. In this version, main effort was on simplification of the planning mechanism and optimize app navigation.

(view all pages)

(show examples of improvement and explain in detail)

removing the top navigation to simplify the hirechy

integrating functions into relevant sections

Testing resualts

This improved prototype was given to another 3 people. while the prompt given are kept mostly same(but adjusted according to naming changes in the prototype).

The improvements in consistency and navigation enbale users to self explore the functionality of the app, thus more feedback were gived based on the collaboration and budgeting mechanisms. The main issue arrouse in this round is the complexity of information hireachy between routine expenses and temporary planned expenses, the shared expenses and personal expenses. The challenge requires the design to be more simplified in information catogorization and give more indicative clues on the type.

For exmple, one participant think the folder project as a place that group people together, thus under this project, their might be activities as routine, such as pay the rent, and might be activities as wishes, such as traveling. Another participant think the project as a folder for events, thus all planed expenses and payed items should be group under. an item that is recuurent or temporate, paid or planned all require differnt mechanisms in a personal finance managment flow.

💡

For exmple, one participant think the folder project as a place that group people together, thus under this project, their might be activities as routine, such as pay the rent, and might be activities as wishes, such as traveling. Another participant think the project as a folder for events, thus all planed expenses and payed items should be group under. an item that is recuurent or temporate, paid or planned all require differnt mechanisms in a personal finance managment flow.

With limited time, five users of varying tech familiarity participated in the study. Six prompts guided them through key actions in the app.

I selected time on task, conversion rates and the System Usability Scale(SUS) as the key performance indicators (KPIs). Data visualizations of the results offered insights into the prototype’s performance.

Through further interviews, feedback generally falls into three areas: collaboration problems, finance management issues, and usability challenges. Specific concerns included inconsistent navigation, an overly complex planning mechanism, and underutilized functions. The second round of testing used a improved prototype that simulates the same user flow. This improved version was tested by three new participants, with prompts slightly adjusted to reflect the updated naming conventions.

Enhancements in consistency and navigation enabled users to independently explore the prototype’s functionality, resulting in more feedback focused on collaboration and budgeting mechanisms. In this round, the complexity in distinguishing between routine, temporary, shared, and personal expenses emerged. Participants’ varying financial habits highlighted the need for separate mechanisms to handle recuring and one-time expenses, and this presents a challenge to clearer categorize items and visually indicate functionality without complicating the system.

Refining the design

The design deliveries: design system, mockups, hifiprototype

jump to the next section: Going forward and design thinking

In the final prototype, the main focus of the imrpovements were on optimizing the strucuture. Relevant functions are grouped more closely and the strucuture were flattened for a simpler navigation. Color usage becomes the visual priority in the stage to help stress hirechy and guide usage.

Going forward

back to the top

What I learned

this project gave me an opportunity to carry on a UX study with quantatative and qualitative data, and experience a full design cycle of a product from ideating to finalizing. The most insipiring part was the first round of usability research, as it helped me recognized my blind spots and pre assumptions. I learned to express functionality more clearly on the front in the naming and avoid interactions that is nested deep on a mobile app. this aligned with my personal expernice on using some well-designed mobile app that provide functions similar to pc sofrwares, but with a straight forward and simplified logic. Another experiniece I gained and reinforced is to think deep and find the origin of the problem, and don’t give up easily on finding solutions. In the fisrt round of testing, all participants reported problems everywhere about the design, hirechy and interactions, all very negative feedbacks. but as the researcher it is more important to understand why these problem arouse in a system level. It will be hard to improve if based on painpoints users had brought up as they are subjective and complex, but it will be easier to improve the system logic as one change might solve all the problem magically.

Next steps

if I had more time, I would conduct these as next steps

💡

For example, one participant viewed the "project" folder as a place to group people for both routine activities, like paying rent, and wish-based activities, such as traveling. Another participant saw the "project" as an event-based folder where all planned (future) and paid (the past) expenses should be grouped together.

Next steps

if I had more time, I would conduct these as next steps