CheckSplitPreview (1).png

2018

SplitHero

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

frodo.gif
 
 

My process

 
process.png

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:

  1. Most people feel a slight negative emotion when asking their waiter to split their bill up.

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

  3. The rise of Venmo has made the group dining experience far less painful.

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

 
userflow.png
 

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.

 
gapanalysis.png
 

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.

 
splitwise.png
 

Plates by Splitwise

Positives

  1. Extraordinarily simple single screen design

  2. Visually reinforces task with simulated plates

  3. Drag and drop interactions work well

  4. Individual dishes can easily be split

Negatives

  1. No import receipt feature

  2. All itemization must be performed manually and doesn’t scale well

  3. No Venmo integration

 
tab.png
 

TAB

Positives

  1. Import receipt via photo

  2. Individual dishes can easily be split

  3. Users can join other bills and collaborate

  4. Old bills saved

Negatives

  1. Minimalist UI goes too far, no visual hierarchy

  2. Splitting items between multiple people not immediately intuitive

  3. Breakout confirmation contains too much information and is separated into tabs

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

 
useflow2.png
 

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.

 
wireframe1.png
 

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.

 
wireframe2.png
 

Prototypes

Design Solution: Allow the user to import their bill by taking a picture of it, or by entering each item in manually.

 
wireframe3.png
 

Design Solution: A flexible item selection screen allows users to add people to the bill and select their items in any order.

 
wireframe4.png
 

Design Solution: Allow users send payment requests via Venmo.

 
wireframe5.png
 

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.

 
Previous
Previous

Validating Elon Musk's news website idea

Next
Next

Sundance.org Design System