2018
SplitHero: A UX Case Study
Read the original post on Medium.
The app that allows users to easily split up their dinner bill.
We’ve all been in that mildly awkward situation which occurs when dining out with a group of friends. The waiter leaves the group’s bill on the table and everyone looks around at each other. Oh boy, how are we going to split this one up?
Suddenly a hero stands up and tosses their credit card onto the table proclaiming for all to hear:
“I will pay the bill… if you all want to just Venmo me later, or give me cash, or whatever.”
My process
Listening tour
I spoke with waiters and customers about their experiences while dealing with the tricky situation of splitting up group bills at restaurants.
Here are a few key takeaways from those conversations:
Most people feel a slight negative emotion when asking their waiter to split their bill up.
If customers express that they’d like to be on separate bills before giving their order to the waiter, the waiter can more quickly and easily deal with splitting bills up and are generally happy to do so.
The rise of Venmo has made the group dining experience far less painful.
People are often relieved when someone offers to pay for the meal and accept cash or Venmo payments as a reimbursement. Doing the calculations is the biggest pain point, especially in larger groups.
Scenario mapping
A scenario map is a breakdown of all the different ways users might approach solving a problem and helps visualize precisely how many steps must occur within each possible scenario.
Scenario 1 is the most time-consuming and has the highest likelihood of increasing friction among customers and waiters.
Scenario 2 is slightly less time-consuming but still requires extra work on the part of the waiter.
Scenario 3 is the least time-consuming but is also the least common to occur.
Scenario 4 shifts all the extra work onto the customer, but affords them several opportunities:
Minimizes the amount of time the waiter has to spend solving the problem
Minimizes potential friction between dining group and the waiter
Dining group can take control of the situation
The paying volunteer gets to be a hero
Gap analysis
The goal of this exercise is to account for all the various tasks involved in a process and identify the gaps that hinder or prevent that process from being completed.
Creating a record of all the tasks and gaps associated with splitting a dinner bill helps to identify very concrete solutions and use cases that will be helpful during the design process.
Defining the problem
Based on my research, I identified two major pain points that need to be addressed.
Pain Point #1: Making the waiter do all the work
Waiters have more on their plate than customers know, and asking a waiter to split a bill up could cost them precious time and energy. Generally speaking, the dining group doesn’t feel great about asking their waiter to split their bill and would rather take it upon themselves when possible.
Pain Point #2: Math is hard, especially in large groups
Depending on the scenario, splitting a bill up may require some intense calculations. As the size of dining groups increases, and when you factor in shared dishes and drinks, the calculation problem grows accordingly.
Competitive analysis
Plates by Splitwise and Tab are two apps that address the problem of splitting dinner bills.
Plates by Splitwise
Positives
Extraordinarily simple single screen design
Visually reinforces task with simulated plates
Drag and drop interactions work well
Individual dishes can easily be split
Negatives
No import receipt feature
All itemization must be performed manually and doesn’t scale well
No Venmo integration
TAB
Positives
Import receipt via photo
Individual dishes can easily be split
Users can join other bills and collaborate
Old bills saved
Negatives
Minimalist UI goes too far, no visual hierarchy
Splitting items between multiple people not immediately intuitive
Breakout confirmation contains too much information and is separated into tabs
Venmo not well integrated
Defining the Right Solution
Solution #1: Enable the user
By enabling the user to take control of the situation and efficiently deal with splitting the bill up, the dining group can focus more on enjoying their time together and less time figuring out how to pay for their meal.
Solution #2: Take math out of the equation
By using technology that allows text to be extracted from a photo of a restaurant bill, the user can import the data into an application that will allow them to split up the bill without doing any math or data entry.
Design Guidelines and Requirements:
User can import restaurant bill via photo
UI designed with solid visual hierarchy
UI gives the right feedback to the user
User does not need to use math at all
First-time users should have no problem splitting their first bill
Users can easily send payment requests via Venmo
User flows
Diagramming the entire user flow from start to finish helps to illustrate all of the decisions and factors that will impact the user during the process.
Sketch and wireframing
I started off working on rough paper sketches and quickly migrated into Invision’s Freehand tool in order to gain more control over each component of the design.
As the concept became more coherent and tangible, I created gray box wireframes in Sketch in order to move a little closer to a high resolution concept. These wireframes would eventually become the basis for my prototype.
Prototypes
Design Solution: Allow the user to import their bill by taking a picture of it, or by entering each item in manually.
Design Solution: A flexible item selection screen allows users to add people to the bill and select their items in any order.
Design Solution: Allow users send payment requests via Venmo.
Testing
Nearly all users were quick to identify the tasks necessary to complete each stage of the process. Users were largely comfortable with every new screen and challenge.
Some key usability issues did come to light during the testing process:
Flexibility — Need to add the ability to edit/remove people from a bill.
Paper Prototype — A paper prototype might have been a more flexible way of testing this concept because there are a lot of ways to split a bill between multiple people.
Backwards Navigation — Need to add a prompt that reassures the user that we’ve saved their progress.