Designing an innovative split billing feature that allows users to easily track and manage their shared utility bills.
noobill
Sept-Oct 2020
(6 Week Sprint)
Solution (Website)
Solution (App)
Research Artefacts
Concept & Mockup
UX Design Lead
UX/UI Design
UX Research & Synthesis
Workshop Facilitator
User Flow
Information Architecture
UX Copywriting
Wireframes
Low & Hi-Fi Prototypes
Usability Testing
Adobe XD
Figma
Photoshop
Miro
Zoom
noobill approached my team with a brief to design a bill splitting feature that would work in co-ordination with its price comparison tool and utility provider transfer service. My role on this project was as lead, working alongside three UX Designers to deliver the project.
The bill splitting feature would essentially allow users to allocate a percentage of a utility bill to individuals within their household, and enable users to pay portions of their bills at frequencies they choose (as noobill would pay each bill upfront).
>> identify noobill's key users;
>> learn about users needs and frustrations;
>> document users current bill splitting methodologies; and
>> deliver a bill splitting prototype.
🔹 Six weeks from brief to delivery
🔹 Deliver a prototype that could be built by the dev team within one month
🔹 Only one person (the primary user) can set up split rules (i.e. set up a split bill)
🔹 Must allow users to decline or terminate a bill
🔹 Determine how non-payment should be managed
🔹 No fund transfers between users in-app
The team began by formulating the information provided by the client regarding the perceived needs of their users. We hypothesised the following problem statement.
>> User test the bill splitting concept and identify and document target user personas.
>> Gain a full picture of current methodologies used for bill management and bill splitting.
>> Understand the pain points along the bill splitting journey and identify users motivations and goals.
Online survey (Google forms) — 53 participants
To understand users habits and behaviours paying for ongoing household bills.
To begin our research, the team decided on an online survey as it allowed us to gather information at scale. The survey was designed to collect quantitative data on users habits and experiences paying for ongoing household bills, particularly in relation to their shared rental and utility bills.
Competitive analysis
While awaiting survey responses, the team conducted a competitive analysis of the market. We analysed four major indirect competitors in the personal fintech space, documenting their standard and auxiliary features, strengths, weaknesses and any gaps/opportunities that we could address with our design solution (Splitwise, Beem It, Settle Up, Revolut).
User interviews — 7 participants
To gain an in depth understanding of users emotions, attitudes and experiences.
We collected qualitative information to gain an in depth understanding of users emotions, attitudes and the bill management and splitting journey. These interviews provided us with valuable information on the experiences our users.
Once we had sufficiently explored the problem space, we moved onto developing an affinity map of key themes and findings to examine our research and identify key pain points.
The affinity map helped the team to accurately identify target users, their frustrations and the needs that were not being addressed with bill splitting methodologies currently available.
🔍 Visibility and transparency over household bills and the status of payments is valuable and would reduce follow-ups.
📝 Accurately tracking bills, expenses, payments and reimbursements is a source of difficulty and frustration for users.
🤝 Trust is important as many users have one shared bank account to manage and pay bills.
😔 Many users have experienced housemates making late payments or paying incorrect amounts.
💲 Housemate sometimes do not have enough money to make a payment, subsequently an IOU situation arises.
The team placed significant findings and insights into an empathy map. This map helped us empathise with our users and develop a picture of our their demographics, behaviours, needs, wants and environment. Importantly, the empathy map also enabled us to create well-developed personas of our key users.
Based on our research, we confirmed that our client's target user group was aged between 18 to 26 years old. The team developed two personas that represented the types of users that needed a solution to easily manage and split their shared household bills.
Next, the team developed a customer journey map for each persona. The personas enabled us to better understand our users' experiences with their current methodology for tracking and splitting shared bills. The visual representation of each touchpoint also allowed us to identify the points along the journeys that required improvement.
We concluded that awkward conversations about money were not the problem.
>> Instead, users were experiencing difficulty and frustration with accurately tracking shared bills and expenses; and
>> lacked visibility over reimbursements which resulted in manual, time consuming follow-ups.
The team used the HMWs as foundational questions to begin ideation. Using brainwriting and crazy eights techniques, we came up with 36 possible solutions, placing each into an MVP Matrix to assess which would deliver the brief while also meeting the 1-month development time constraint.
The team decided on nine solutions to present to the client via low fidelity designs, and, after a collaborative feedback session, moved forward with eight ideas that required modifications to align with noobill's current function and flows.
👩🏫 Explainer screens
Screens to capture users attention and detail the benefits and the ways in which the bill split function works.
👯 Dual view
A dual view allows users to view and manage their bills on an individual level (via bill view) or holistically via the property view.
🏘️ Property groups
Groups allow users to view and manage their property expenses, savings and services all in the one place.
🗒️ Property activity
A log of all property members activity.
🖖 Split service
A tool that allows users to select property members from their contact list, and, using an interactive sliding tool, easily assign a percentage or dollar amount to each person and invite them to join.
⚙️ Customisable notifications
Customisable notifications that provide users with the power to choose what notifications they receive.
💸 Rainy day round-ups
A feature that allows users to set up additional amounts ($2, $5 or a custom amount) to be deducted from their bank accounts when repayments are made. This additional amount will be held by noobill for users to use the next time they are low in funds.
🎮 Gamification
Users reach milestones elected by noobill (i.e. setting up their payment information or making repayments on time) and are gifted with points that can be exchanged for reward offers through the app.
As the split bill feature had to slip seamlessly into the noobill app, it was critical for us to document and understand all existing user flows before determining the flows for our design solution.
Once the team had clarity on the existing flows relevant and connected to the bill split feature. We designed three flows that went through an iterative process before determining the final version.
The team designed a bill split flow for primary and secondary users, as well as a user profile flow to present the gamification, rainy day round-ups and customisable notifications features.
Our high fidelity prototype was designed using Figma. To test the solution, the team conducted moderated usability testing with seven participants.
Tasks and questions were drafted for each participants to action, and where difficulty or confusion arose, the team documented observations (see below). Our observations were then examined to pin point the usability problem and prioritised so that critical issues were addressed first.
View the final high fidelity prototype provided to the client, or watch the prototype video below.
Finding time to meet was extremely challenging for our group as we all had work commitments and were located in different timezones (one member even had a baby mid-project!) To work through this, the team relied heavily on online tools that enabled collaboration while working separately.
The team worked tirelessly on ensuring the solution we designed would work seamlessly with the user flows already in place within the noobill app. The time spent on this was extremely beneficial to the final design solution as we were able to successfully deliver a solution that could slip directly into the app with little to no additional time required on updating the UI of the existing design.
Collaboration does not necessarily mean all team members must be in the same room together. Collaboration is a mindset and framework that allows for the inclusion of all ideas, opinions, feedback and voices—no matter the barriers or constraints.
