House Fund

Simplify shared expenses, strengthen roommate relationships

Design system / UIUX Design/ Hi-Fi prototype / Delivery

"Having trouble managing shared expenses with roommates? Awkward about reminding them to pay? Forgetting or rebuying essential household items?"

Welcome to House Fund – a platform designed to simplify shared living for roommates. We focus on managing shared expenses effortlessly, helping you track what’s owed, split bills, and manage household purchases, all while reducing the awkwardness of payment reminders with automatic notifications.

Challenges & Takeaways

Check the design 👉🏻

DURATION

Aug 2024 / 3 weeks

ABOUT THIS PROJECT

I participated in the AAPD UI Bootcamp this August, and this project was part of it. Key deliverables included the user story, UI mockups, UI flow (with engineering specs), Hi-Fi prototype, and Figma design handoff. Although our group started with five members, only two of us worked actively in the last two weeks. Despite time and resource constraints, we managed to complete the project. This project mainly focused on UI design with brief UX research, and the following highlights the challenges we faced and how we addressed them.

CHALLENGE

Managing shared expenses with roommates can be overwhelming. Bills and household supplies often lead to confusion, especially when payment reminders get lost in group chats. Tracking multiple small purchases is difficult, and asking for payments can be awkward. This lack of transparency can cause misunderstandings and tension, making it challenging to manage finances efficiently.

DELIVERABLE

👉🏻 Hi-Fi prototype

👉🏻 UI flow with engineering specs

👉🏻 Figma design handoff

ROLE

Team leader

UX & Product Designer
UI Designer

Define Target User

First, we held a meeting to align our target demographic. Due to the timeline constraints, we only had simple user interviews with a few friends who met our demographics. The main challenge for our target group is to make house fund management easier and more enjoyable. To help us stay focused, we created a simple Persona.

User Journey Map

To better understand our users and clarify their needs, frustrations, and touchpoints, we began creating a User Journey Map. By simulating different scenarios, we identified potential opportunities that could address the problem. Given the project scope, we held multiple votes and selected a few key solutions to prioritize.

Next, we brainstormed based on the top four insights that received the highest votes, identifying several solutions to address these problems and help achieve our users' goals.

Competitive Audits & Information Architecture

Before entering the design phase, we conducted a competitive analysis of products like Splitwise, Google Pay, and Bill Bear. The goal was to familiarize ourselves with existing expense-splitting tools, identify any gaps, and understand what might prevent our target users from reaching their goals. Afterward, we held a meeting to finalise the project scope, determine the features we wanted to include, and arrange the information architecture. The finalised features include a homepage for expense summary, expense addition/splitting, a tracker page, a list page, and a profile section.

Competitive Audits - Add split expense

Design System

The primary color of this product is green, aiming to convey a sense of relaxation and comfort to alleviate the stress associated with money management. For typography, Space Grotesk is chosen for headings to add a playful and charming touch to the overall visual, while Roboto is used for body text to offer a range of typographic variations. Cute characters are integrated into the design to ensure that users do not feel bored, despite it being a financial management tool.

Hi-Fi Prototype

The main purpose of the House Fund app is to effectively manage shared expenses among roommates, aiming to reduce potential conflicts caused by money. The app includes automatic repayment reminders and other helpful features. The List feature helps roommates share the responsibility of buying household essentials, while the Tracker allows users to easily review past settled expenses. The overall visual style is lively, breaking away from the seriousness often associated with money management. Additionally, the Profile page allows users to customize their personal avatar, ensuring a pleasant experience while using the app.

Main Features

Landing page: Allows users to track debt relationships with their roommates.
Tracker: Helps users manage past shared expense records and track spending easily.
List: A shared shopping list for essential household items that can be edited collaboratively.
Add new expense: Add a new shared expense.
Profile: Personal settings, including avatar customisation.
Notification: Clear notifications across different categories, and the ability to remind roommates to make payments.
Onboarding: Guides first-time users through the key features of the app for a smooth introduction.

Landing Page + Add New Expense

Expense Tracker

List Page

Profile page

Notification

Figma link:

Check prototype

UI Iteration

The following are some major UI iterations we made before the final submission, including the layout of the "Tracker" page, the order of split methods in the "Add New Expense" page, and the information structure of the "List" page.

Challenges & Takeaway

1. Ensuring Design Consistency: From Communication Misunderstandings to Iterative Solutions

Difficulty

After defining the product scope, features, and information architecture, we began dividing the work to create wireframes for different pages. Despite having had meetings to discuss the information and main functionalities for each page, we discovered that not everyone shared the same understanding once the actual design work began. The discussions before were difficult to concretize, leading to discrepancies between the results and initial expectations.

Solution

We quickly initiated communication among team members and created multiple versions of the designs based on the work produced by each member. We held discussions and votes to reach a consensus and proceeded to the next steps after making swift decisions.

Following are different versions of the landing page throughout the wireframing process. The final design was only determined after creating numerous versions, engaging in frequent communication, clarifying details, and making compromises.

Takeaway

Design is an iterative process that requires testing actual results to validate initial assumptions. Even if a solution seems to be found early on, maintaining an iterative approach is essential. Additionally, considering factors such as timelines, manpower, and business goals is necessary for optimizing resource usage at different stages of the project.

Wireframes for the Landing Page

Final Landing Page

2.Too much scope with limited time and manpower

Difficulty

At the beginning of the project, when we still had 3 weeks left, our team had 5 members, and we needed to complete five key features of our app. This included finishing the UI flow, high-fidelity mockups, prototype, engineering specifications, design handoff, and the presentation video. However, during the last 2 weeks, we were down to 1.5 people—myself and another teammate who worked full-time. As the deadline approached, I struggled with the burden of completing all the tasks mostly on my own.

Solution

I acknowledged the current limitations and shifted my mindset. Initially, I hoped to aim for an award, but I lowered the goal to simply completing all the required tasks. With this change in attitude, I set a new objective for myself—to make significant progress in UI design and Figma skills. I focused on achieving this personal milestone and managed to finish every part of the project within the deadline.

Takeaway

This experience was very realistic and reminded me of past work situations, especially when collaborating with others. Many factors are out of our control, so adjusting my mindset became crucial. Changing my goal allowed me to stay motivated and understand what I was working so hard for. Although I didn't meet the standards I initially set for myself, learning to find the best solution within constraints is an equally important lesson.

Unexpectedly, despite the challenges, I received the "Most Improved Award," which was given to only one person out of more than 200 participants.

Course Certificate

What's next

I am currently working on a personal UI/UX redesign of the China Airlines website, applying insights from previous projects to improve user experience and usability. At the same time, I’ve taken on a new role as a UI/UX designer at What's On! Campus—my first position in Sydney and my first experience working with a startup team. I look forward to sharing more about my growth and contributions as these projects continue to evolve.