Splitting a bill is still a very uncomfortable moment for most people. People don't want to worry about doing math or paying for more than they consumed when dining out. Considering all the pain points users expressed during interviews, I took the opportunity to solve what no app has solved before and designed Split, a mobile app that simplifies the entire user journey from ordering to paying.
I created the brand visual identity and I designed the user experience on mobile to order, split a dish or pay for someone else's order.
3 weeks
To answer that, I completed a series of steps:
After analyzing the survey results, I conducted a series of interviews to better understand people's needs and pain points.
5 participants were interviewed
First, I conducted a screener survey that helped me to get a look at my target audience.
16 participants answered the survey.
I used this information to complete rounds of affinity mapping in order to synthesize the data.
Users expressed feeling uncomfortable talking about how to split the bill.
Users felt frustrated when paying for more than what they consumed
From the screener surveys I found out that 80% of users that are experiencing the most pain points are between 25–35 years old, and 60% of those already use an app to split the bill. However, I realized that most people think that splitting a bill is an awkward and time-consuming task.
Based on that information, I created Erica as my target user and I developed her behaviors, motivations, frustrations and goals.
Erica enjoys spending time with her friends every week for a catch-up dinner and drinks. She loves going out, but she is also budget conscious because she is saving up for a car.
Dreads the “split the bill” conversation.
When splitting the bill evenly, Erica often feels she pays more than she should.
Frequently, getting her money back from her friends takes a while, which causes Erica some anxiety.
Avoid human error when doing the math.
Pay only for what she consumed.
A faster way to split the bill.
When researching the landscape, I found that:
Splitwise requires users to manually enter the amount they spent in order to calculate how much each person must pay.
Tab allows users to claim the items they consumed after scanning the receipt.
Toast allows users to order and pay through their phone but they cannot split the bill.
Based on market research, I realized there is an opportunity to eliminate the extra steps that people must do in order to itemize their bill.
By integrating Split with the restaurant POS, I simplified the ordering process and removed the pain point that comes at the moment of paying. Diners will no longer need to have a troublesome conversation involving many calculators followed by handing multiple credit cards to a server, who already has enough work to do.
Some existing bill-splitting apps require users to scan the bill and select each of the items they consumed in order to divide the bill.This means users select items twice — first when they order and then when they pay.
Other apps ask the user to enter the price of each item consumed in order to divide the bill, requiring the user go through the arduous process of remembering every item consumed and the amount it cost.
Existing bill-splitting apps rely on the use of an external application (like Zelle or Venmo) in order for users to pay each other. Users may have to wait a couple of days to receive their money, which can be burdensome for those on a tight budget.
I started with lower-fidelity wireframes to iterate through countless ideas quickly in order to design the general direction and hierarchy of the interface. Through this process, I was able to arrive at a user flow that allows diners to order, pay, and split the bill in a holistic, clear, and simple manner.
I created a mid-fidelity prototype to conduct usability tests with five participants. I watched for any errors or confusion when asking the participants to complete a number of scenarios/tasks:
Task #1: Pay for someone's bill
Task #2: Split a dish with someone
Task #3: Order a dish from the main menu
Each of the participants was able to complete 100% of the tasks, but there was confusion around some of the language I had used in a couple of areas.
With Split, each person dining can use their own mobile phone to select the dishes they want, without having to wait for the server to bring them the menu. They also can select if they want to share the dish (and split the cost) with someone else or with the table. This removes the need to remember what was ordered in order to do calculations later. If a dish is split with someone, the total price of the dish is automatically split between each person.
For example, the creamy raviolis selected on the video has a price of $22.00 but because she is splitting it with Hannah, only $11.00 is added to her bill.
After placing the order, the app provides an approximate time of when the food will be ready. The diners can choose if they want to pay their tab at that moment or once they've ready to leave, giving the user the freedom of paying for their check whenever it's most convenient for them.
If they need to leave quickly to catch a show or if they want to keep adding more items later on, they can do so easily with Split.
The application also allows users to pay for someone else's order, or for the entire table.
For example, if Erica chooses to pick up the tab for her friend, everything that person consumed will be automatically added to the final bill. In this case, Erica chooses to pay for Eric's order, so everything Eric ordered was added to Erica’s final bill.
Users no longer have to waste time with confusing calculations and can focus on what's important — being present with their friends as they share a meal.
Simplicity is a key aspect of this project, which is reflected in the logo design. Being an application related to splitting charges, I used a dollar sign and a divider bar that alludes to the concept of dividing the bill.
I used thin, inclined lines when designing the icons to communicate speed. Users don't want to go through time-consuming tasks when they are hungry, ordering food, or paying for the bill.
I chose yellow because it is an appetite stimulant. Being the lightest hue of the spectrum, the color psychology of yellow is uplifting and illuminating. I also used a light grey to create contrast with the main color. For text, I used a darker blue to reach a contrast ratio that would provide good legibility.
I selected the typeface Overlock because it features friendly and open curves which match the rounded visual style of the Split application design.
A foundational piece of the Split experience is its integration with the restaurant’s point-of-service system, which ensures a great experience for the people managing and working at the restaurant as well as the end customer.
The restaurant will have separate checks for each diner with their respective name, and they will be able to see quickly which check was paid, based on the color — green paid, red unpaid.
With everything at their fingertips, diners no longer have to wait for menus and checks. Restaurants can reduce labor costs and ease the load on their staff — less time spent swiping credit cards, splitting bills, and closing checks, and more time spent in hospitality and crafting an unforgettable experience, which leads to better tips, returning customers, and better ratings.
