PROJECT

Helping users easily track, manage and split their household bills

Designing an innovative split billing feature that allows users to easily track and manage their shared utility bills.

View the prototype >>
CLIENT

noobill

Year

Sept-Oct 2020

(6 Week Sprint)

Deliverables

Solution (Website)

Solution (App)

Research Artefacts

Concept & Mockup

ROLE

UX Design Lead

UX/UI Design

UX Research & Synthesis

Workshop Facilitator

User Flow

Information Architecture

UX Copywriting

Wireframes

Low & Hi-Fi Prototypes

Usability Testing

Tools

Adobe XD

Figma

Photoshop

Miro

Zoom

CASE STUDY

Bill splitting, made easy.

noobill is an Australian fintech startup based in Melbourne using AI technology and automation to redesign how people receive and manage their utility bills.

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).

The primary deliverables:

>> identify noobill's key users;

>> learn about users needs and frustrations;

>> document users current bill splitting methodologies; and

>> deliver a bill splitting prototype.

Project considerations and constraints

🔹   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

Defining the problem

The team began by formulating the information provided by the client regarding the perceived needs of their users. We hypothesised the following problem statement.

Problem statement

— Pre-research

An exploration into the user

We began the discovery phase of the project with these objectives in mind:

>> 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.

User research methods


☑️

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.

Synthesis

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.

Click to view the Affinity Map

Important findings

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.

Additional key findings


🔍  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.

Empathy map

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.

Click to view Empathy Map

User personas

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.

Click to view Primary & Secondary Personas


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.

Click to view Primary & Secondary Journey Maps

Reframing the problem

😮 During the discovery phase of the design process, the team determined that the original problem statement did not properly reflect the real issue users faced.

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.

Problem statement

— Post research

How might we?

Designing the solution

Creative ideation

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.

Solutions post collaborative feedback session —

👩‍🏫   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.

Wireframes & Low-fi designs

Pen and paper wireframes

Low-fi designs

User flows

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.

Usability testing

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.

User Testing Documentation

The design solution

View the final high fidelity prototype provided to the client, or watch the prototype video below.

Feeback from noobill

Retrospective

🧗  Challenges

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.

✅  What went well

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.

🤔  What I learnt

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.

Back to homepage >>