A modern solution to splitting bills

BACKGROUND

Springboard's first capstone project is meant to introduce a holistic design process to their students: define a problem, conduct and synthesize research, design and iterate, test and revise, and build a prototype. Students were given the freedom to pick their own problem to solve. For my project, I wanted to solve an issue that I encounter way too often and have always thought about its potential as a mobile app: splitting a bill after a meal with a group of friends.

One solution that I've seen is using Google Sheets to organize all the streams of information needed to split a bill. Below is how my friend Charles splits group bills. Though functional, the data layout isn't quickly digestible and needs to be easier to scan. Furthermore, it had to be built on desktop because building it on mobile is too inefficient.

A makeshift solution to splitting bills

TIMELINE

3 months

MY ROLE

UX Designer, UX Researcher, UI Designer

DELIVERABLES

A functional mobile prototype

TOOLS USED

Figma, Google Doc, Adobe Illustrator, Pen + Paper

THE PROBLEM

Splitting a bill at its core is really just a task of simple math and organization. Sometimes it's as easy as dividing the total evenly while one person pays for it, but it begins to get complex when there are many people involved with stipulations. For example, a group of 8 decides to pay for only what they ordered plus the shared appetizer, one person decides to pay for themselves and their partner, and two decided to share a single entrée. At that point there are too many variables in the equation to get it figured out quickly and easily.

Hypothesis:

In order to optimize the bill-splitting process, it's imperative for the solution to automate all of the math involved so the user doesn't have to think about it whatsoever.

RESEARCH

In order to flesh out the problem and its intricacies, I conducted 5 interviews with potential users that fall within my target demographic: smartphone savvy between the ages of 18-36 that have an active social life (1-3 nights of socialized spending per month).

Interview Objectives

Uncover what the current user journey looks like when splitting a bill (math methods, data documentation, peer-to-peer transactions, etc.)
Establish all stakeholders' pain points during the bill-splitting process.
Discover other uses for a bill-splitting app outside of restaurants.

Affinity mapping based off interviews

ONLINE SURVEYS

In addition to the user interviews, I ran an online poll survey. The questions were based on user habits and their current methods on splitting bills. There were 6 questions and 42 responses.

81%

have a dedicated person paying the bill for the group

42%

are the group's dedicated bill payer

67%

use Venmo as their money transfer app

23%

use Zelle as their money transfer app

81%

use their phone's calculator to split the bill

use Excel or Google Sheets to split the bill

KEY INSIGHTS

Guiding insights that will inform my solution moving forward:

The need for quicker data input and easily-digestible data output
The option of splitting a bill evenly or by item
The desire for a single, lump sum transaction over multiple, smaller transactions
Wanting to use existing peer-to-peer money transfer apps instead of signing up for a new one
"Let's figure it out later. Pay me later."

COMPETITOR ANALYSIS

Lastly, I did a quick competitor analysis to discover what works and what doesn't work for bill-splitting mobile apps:

Settle Up

+ Works offline, offers exchange rates

- Littered with ads

Splitwise

+ Free to use, group feature

- Feature creep

Tab

+ Upload picture of receipt, custom splits

- No web app

PERSONA

Based off my 5 interviews and online surveys, I created a persona based off common user goals and pain points.

Jane, 28

Goals:

Keeping social life and finances organized and tidy
Enjoying youth and time with friends and family

Pain Points:

Needlessly confusing issues that can be streamlined
Miscommunication or total lack of communication

Attributes:

Tech-savvy
Frequent foodie
Detail-oriented

"Organization is key to my success. I love apps that provide me structure!"

DEFINING THE PROBLEM

Now that research has concluded and I uncovered new insights, I have clarified my hypothesis and want to add onto it:

How can the bill-splitting process be optimized to be quick and organized without the user required to do any math on their end? Additionally, can other bill-splitting scenarios (e.g. splitting group trips) be included in the solution?

PRIMARY USER FLOW

To begin the design process, I started with creating the primary user flow: creating a new bill. The user begins the process by creating a group with the people they're going to be splitting the bill with. When the group receives the bill, the user will document the receipt, assign the items to the members, split any additional fees (e.g. tax or tip), and repeat as needed. When there are no longer bills to be split, the user can then request money and receive a single transaction from each group member rather than multiple, smaller transactions for each transaction.

When crafting the user journey, it became imperative that multiple bills can be included within a group. For example, in a group weekend trip scenario, it would be much easier for all parties if all the expenses over the weekend (lodging, transportation, dining, etc.) were condensed into a single lump sum transaction per person.

IDEATION

To kick off the design process, I began by focusing on generating ideas for the main flow. As I sketched through my ideas, I realized how sequential the main flow is going to be so I wanted the user interface to be as simple as it could be. I also wanted the screens where the items were listed to resemble a receipt for a sense of familiarity.

One feature that I wanted to include was the "Camera Scan" feature where the user can take a photo of their receipt and the mobile app will automatically translate the content into editable items and prices. This would be similar to how banking apps can scan checks for mobile deposits.

Mobile deposit example, courtesy of MinisterBank

INFORMATION ARCHITECTURE

Developed the mobile app's information architecture to be simple and straightforward. I wanted the separate Open and Closed bills so the user can easily differentiate between the two and reduce confusion.

WIREFRAMES

Based on my findings from my first usability testing with wireframes, I learned the following:

Homepage: Simple and leaves no room for confusion, but a greeting can be inserted to give it more personality.
Camera Scan feature: There was a good reception to this feature, but it would also be a good idea to have a "Manual Input" option for instances where a receipt is not easily scannable or has a format that can't be scanned.
Assigning and Sharing Items: The idea was understandable, but the execution needed to be improved. There was confusion on how Shared Items was represented and who it was shared between.
Price Breakdowns: Seeing how prices were allocated was well-received and could be in more places.
User Interface: Implementing a progress bar can help the user understand where they are in the process.

DESIGN SYSTEM

For an app that is supposed to be quick and optimal, I opted to use Inter, an easily scannable and scalable typeface for mobile use. As with many finance-related apps, blue is the primary color as it encourages trust and reliability.

As for the components, I decided to use cards on many of them because it visually separates elements which helps the user compartmentalize data better. I also laid out price breakdowns on cards to be similar to receipts, tying back to the story of splitting a receipt bill.

FINAL DESIGN SOLUTION

Divvy was designed to organize the bill-splitting process into four steps: create a group, document the receipt into an itemized list, assign the items to group members, and request payment. By simplifying this process, Divvy gives the user more time to enjoy their company by removing the unnecessary stress of math and automating it instead.

The prototype on the right is functional, so give it a try!

Note: Some of the interactivity has been truncated to expedite the prototype's flow.

STEP 1: CREATING THE GROUP

The user creates the group by giving it a name and adding friends. This can be edited later on too.

STEP 2: DOCUMENTING THE RECEIPT

The Camera Scan feature creates an itemized list that can be revised if necessary.

STEP 3: ASSIGNING THE ITEMS

Assign items by simply tapping a user and what they ordered. Any fees like tax and tip can be split just as easily.

STEP 4: REQUESTING MONEY

A money request is sent to friends to close the bill. A friendly reminder can also be sent if the request is unfulfilled.

LINKING A PEER-TO-PEER PAYMENT ACCOUNT

Users are able to easily link a P2P payment account such as Venmo, Zelle, or CashApp by providing their login information.

REFLECTION

As I mentioned in the Background section, I was eager to solve this problem and I felt like understanding the issues first hand gave me a better sense of empathy throughout the project. The user research portion of this project helped fortify my assumptions going in while also giving me new insights that shaped the final design solution.

There are some aspects of this project I did want to flesh out more, but due to the time constraints I decided to pursue making a minimum viable product instead. Sections such as an onboarding process, a flow for users not controlling the group bill, and a more developed Camera Scan feature are what I would like to work on if I were allotted more time.

Nonetheless, I feel like this project was a great introduction to a holistic UX design process. Despite my background in industrial design, I did not want to go into this project thinking I could tackle it like design projects I've done before and it allowed me to approach UX with an open mind.