Duration
3 Weeks
My Role
Team Leader, UI/UX Designer
Project Type
UI Bootscamp Project
Project Focus
Design System, UI Flow, Prototype, Handoff
Background
This UI project was completed during the AAPD UI Bootcamp in August 2024. Key deliverables included user stories, UI mockups, UI flows with engineering specifications, high-fidelity prototypes, and a Figma design handoff. The project primarily focused on UI design, supported by brief UX research. The following sections highlight the core challenges we encountered — and the design decisions made to address them.
Problem
"Having trouble managing shared expenses with roommates? "
"Awkward about reminding them to pay? "
"Forgetting or rebuying essential household items?"
Nowadays, people who live together aren’t necessarily related — they simply share an accommodation.
This living arrangement brings shared responsibilities, especially when it comes to household expenses. The question is: How might we help this group manage shared spending without awkwardness or friction?
Solution
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.
Define Target User
Our target users are housemates who want to manage shared living expenses efficiently and harmoniously.
They aim to split costs and track budgets with minimal time and effort, while avoiding awkward conversations about money. Common frustrations include forgetting to make transfers, spending too much time managing finances, and running out of household essentials like tissues or detergent. By streamlining these processes, we help users stay organised, avoid conflict, and maintain a comfortable shared living environment.
User Journey Map
Easy Expense Tracking Is Key
Based on the user journey map, we voted and selected four key opportunities and insights that guided us toward potential solutions.
Competitive Audits & Information Architecture
Quickly Learn from the Referenced Product
Due to the three-week time constraint, we needed to begin designing immediately after defining our key features.
Although conducting a detailed competitor analysis may seem time-consuming, it turned out to be an efficient way to quickly gain insights into how similar features and user flows could be structured.
Design System
Design While Building the Design System for Speed and Consistency
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.
Design - Wireframe
Fast Iteration Through Wireframing and Discussion
Design - Hi-Fi Prototype
Hi-Fi Prototype Completion Reached Nearly 100% in Just 3 Weeks
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.
User Testing & Iteration
Get out of the building!
Tracker
Add New Expense
To-Buy List
Challenges & Takeaway
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 concretise, 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.
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.
Personal Achievement
Successfully Boosted My UI and Figma Skills
After these 3 months in the UI Bootcamp, I can confidently say that I’ve become skilled in using Figma, understanding design systems, and thinking from a product design perspective. More than just self-growth, my progress was also recognised by the teaching team — I was honoured to receive the “Most Improved Award,” given to only one participant out of over 200.
