Split a check hassle-free
When eating out with a group, splitting the check can be a real headache. Restaurants cannot always split the check for large parties, making it a hassle to figure out who ordered what. A common workaround is to have one person pay upfront and everyone else use a third-party service to pay the person back. However, the amount repaid may not be accurate and the person who foot the bill could feel too awkward to bring it up.
Check is an iOS app that helps you and a group of people split a bill efficiently and fairly. It handles all the calculations, to make sure everyone feels that they paid their fair share.
Check iOS App
Design Exercise, 4 working days
Sketch, Marvel, Principle, Illustrator, OmniGraffle, Pencil & Paper
How might we most efficiently and fairly split a restaurant check
Anyone eating out with a group of people
Pay for what your ordered
You can select the items that you ordered and Check will automatically calculate the amount that you owe for you, removing the need for you to do any math on your own.
Monitor group payment
You can see who has paid already, without the hassle of figuring out who hasn't or the awkwardness of having to bring it up with the person.
Collect money from the group when everyone's done!
To ensure accurate payment, you can collect the money when everyone is done. This makes sure that payment happens during the event so users don't have to recall what they ordered later on, decreasing the chance of errors.
Understanding the User
To understand user needs, I conducted 6 interviews that focused on asking people about their experience eating out with a group of friends and how they resolve paying the check at the end. Common responses include:
"I don't like to bother the waiter. It's hard to explain who ordered what."
"People don't always Venmo me the correct amount if I pay the check upfront. Then, I feel weird asking them for the extra $1. But it really adds up with a large group."
"When we split the check equally to not bother the waiter, I sometimes feel that I pay too much."
Based on my interviews, I found that splitting check breaks down into two decisions:
1. Do people want to split things evenly or unevenly?
2. Do people want to have everyone handle the payment now or have it made up at another time ("pay later")?
Splitting evenly was the easiest way but users mentioned that they felt like they would overpay sometimes.
Paying now with an uneven check split caused the greatest hassle on waiters and users. Users had to figure out who ordered what and had a hard time explaining to a waiter how to split the check.
A lot of users did not want to bother the waiter so they would split the bill later by having one person in the group foot the bill. Unfortunately, this was usually done after the meal and when the bill is split unevenly, users had trouble recalling and calculating the correct amount.
Analyzing the Competitive Landscape
To make sure I didn't reinvent the wheel, I looked at what people use today to split checks among large groups. Some tools I examined included: Venmo, Splitwise, and Square Cash.
These tools have made it easy to send money to friends. However, even with these tools, I found that users would still have to go through the process of figuring out what they ordered, a process that is time-consuming and prone to error.
To capture my research findings, I created 2 personas based on quotes from my interviews.
While they have different specific user goals, Joanne and Robert have one common overarching goal: to pay an accurate and fair amount for what they ordered.
I decided to focus on the "uneven split" process because this is where I found the most user pain points.
Assume users are already signed up for the app and have inputted their information (i.e. bank account information).
Assume there is access to resources provided by a tech company. This allows me to think creatively, using methods such as computer vision, optical character recognition and machine learning.
Assume restaurants have the necessary menu information online, or stored in a database. This makes the app feasible.
After synthesizing my research insights, I conducted a brainstorming session to generate multiple ideas. I chose my final idea based on: feasibility and user impact.
Restaurant sends bill directly to app
This would allow users to easily select what they ordered and pay the restaurant directly. While this would allow users to easily split the check, this would require an integration with the restaurant's payment system, creating high infrastructure cost.
Scan receipt to generate items
Using optical character recognition, the app could scan a receipt to generate the food items. Users would then be able to select which items they ordered. This is technically feasible and can create an easy way for users to split the check.
Recognize food from photo
Using computer vision, the app could detect what food the user is eating when they take a picture of it. This would log the food in the system, allowing easy check splitting at the end. However, requiring users to take photos during the meal could potentially disrupt the group setting.
Based on my insights, I decided to create a standalone app that would give users mobility and flexibility of use. When you are out at dinner, the most convenient device is your smartphone. Some guidelines that I came up with include:
App would focus on the "pay later" scenario where one user pays the bill upfront.
The "pay now" scenario would require an integration with the restaurant's payment system, creating high infrastructure restructuring costs and potential barriers to entry with the restaurant. As a result, I focused on the "pay later" scenario that would be feasible.
Users should be able to split bill and tip with multiple people.
Benefit: This will decrease any discomfort and awkwardness the person who usually pays has for reminding people to pay them back.
Users should be able to see and select the food and drinks that they had ordered.
Benefit: This will help facilitate the process of figuring out who ordered what so that users won't have to recall what they ordered from memory.
App should be able to calculate the cost for users.
Benefit: This will decrease the chance for error when users are trying to pay someone back. This ensure fair and accurate payment.
How would someone use it?
Before I jumped into designing the screens, I created the ideal user flow.
I started designing screens by sketching out different variations of the UI on paper. This allowed me to ideate fast. I then put the screens into Sketch.
Some sample sketches:
I considered having a tab bar that separated: "Groups", "Pay", and "You". However, I ended up not having a tab bar because the three views could be combined into one. I also looked at 3 different ways to put the "+" button: at the top right, as a persistent button, or in the toolbar. I decided for the toolbar because this was a native iOS pattern and also at the bottom of the screen so users could easily select the option after clicking on "+".
Displaying Group Detail page
These are different screens I was thinking of having for the Group Detail page. Users can see the total amount and who has joined the group. A modal will pop up when a user wants to view an individual check, allowing them to look at their own food orders.
General flows and layouts
I played with many different layouts and flows before putting these screens into Sketch. I was able to get feedback from users during this phase by showing them the sketches. It was helpful to get feedback at such a lo-fi step so I could make changes quickly.
I started by creating a high-level flow for the entire check splitting process. This accounts for the person who is paying (group leader) and everyone else in the group (group members). Click to view more details.
Next, I broke down the high-level flow into two scenarios from the perspective of a group leader and a group member for the full check splitting process. To frame these use cases, I refer to my two personas: Joanne and Robert.
Scenario 1 - Group Leader
Joanne is out at a celebration dinner with her friends. The table just got the check. The group didn't want to bother the waiter explaining who ordered what, so Joanne decides to pay the bill upfront.
Step 1: Create a new group
Joanne opens up Check and creates a new group.
Step 2: Scan check
She scans the receipt.
Check makes it easy for the user to itemize the items ordered. Using optical character recognition technology, Check can turn a receipt image into text, making it easy and fast to use.
Step 3: Itemize check
She looks through the items generated from the scan.
Check also pulls data from the restaurant's online menu. The system will use images of the food items from the restaurant. Adding the photos allows users to better recall what they ordered.
Step 4: Enter information
Joanne enters simple information about the group, such as party size.
Party size data is important because this will allow the app to make sure everyone is accounted for.
Step 5: Save group
She saves the group. A group code is generated, allowing others to join.
Searching by group code allows the fastest and smoothest process. I originally thought of having users search for a group name, but realized that may take too long.
Step 6: Monitor group
Joanne can see other group members joining and the progress of the payment.
Tracking progress allows the user to feel at ease about the accuracy of payment. In addition, they will not have to bug someone to see if they paid them already.
Step 7: Collect money!
Joanne sees that everyone is done! She hits collect money and the money is transferred to her account.
Step 8: Add total tip
She writes the total tip amount on the check.
Check will automatically calculate the total tip for the user. This takes out any tedious math work, making it simple for the user to pay the right amount.
"That was easy!" Joanne feels at ease and relieved knowing that she got the accurate amount sent to her.
Scenario 2 - Group Member
Robert is also at the celebration dinner. After Joanne created the group, he joins them. He wants to make sure he pays for what he orders.
Step 1: Join group
Robert opens up Check to join a group.
Step 2: Search for group
Robert enters the group code that Joanne gave the table.
Step 3: Add items
Robert clicks "+" to add the items he orders.
Users can see food images, allowing them to easily recall what they ordered.
Step 4: Shared items
Robert notices that "Truffle Fries" has been shared equally.
Check will split items that have been shared among people and calculate the split amount for them. This provides an easy process so users don't have to do any mental math.
Step 5: Total Amount
Robert is glad to see that the total has been calculated for him.
Step 6: Select tips
He selects the tip percentage that he wants to give.
In my interviews, users found it difficult to calculate the tip when splitting the check. Check addresses this issue by doing it for them. All they have to do is select the percentage. If they don't like the predetermined percentage, they can specify their own.
Step 7: Save check
He clicks save. Robert feels happy and assured that the process was so smooth.
Following Design Principles
Throughout my design process, I followed key design principles:
Get to simple: focused on creating a clean and easy-to-use interface
Sweat the details: accounted for edge cases and different states; optimized user flow
Stay native: made sure app adhered to iOS Human Interface Guidelines
People first: utilized user goals and consistently got user feedback
Get to Simple
I wanted to create a clean and easy-to-use interface. Since the app would have a lot of color from the food item photos, I decided to use black and white as my primary colors. Shades of blue were used as accent colors.
I wanted to maintain a clean look and feel to the aesthetic of the app. For icons, I made sure to use 2px strokes with black color.
In addition to the icons that would be used in the app, I wanted to practice my visual design skills. I decided to create colorful icons in lieu of photos for the purposes of the prototype.
Sweat the details
Because splitting the check can be a tedious process, I made sure the flow would be optimized for different use cases. I also thought about error states and empty states.
Accounting for multiple use cases - Ordering
In the simplest flow, each person orders one distinct dish. However, there are other use cases that Check is able to accommodate:
1. Sharing a single dish
2. Multiple people ordering the same dish
3. One person ordering the same dish multiple times
Check's "Add Item" screen allows users to add each dish they ordered. The system will have already registered the number of each dish ordered and divvy up the total amount fairly. When there is only one dish but multiple users choose it, Check will split it amongst the people who picked it.
Accounting for multiple use cases - Tipping
Check allows each person to specify a different tip amount! Predetermined tip percentages are displayed so users can easily select an amount. However, if they want to add a custom percentage, they can easily do that as well (left image).
The total tip from every group member is then added up so that the group leader can add it to the bill at the end.
Accounting for multiple use cases - Editing
Giving users the ability to toggle edit mode gives them the flexibility to control what content they want to appear in the app. I added screens for edit modes for different cases.
The images shown here are for when a user wants to delete a previous group they were part of.
Empty states include situations when no item is added to the check or when the user has not searched for a group yet. I made sure to account for these by adding delightful illustrations so the user does not feel lost.
Error states can happen with human error. To account for this, I created a error page for when the user searches for an incorrect group code, so that they don't feel lost.
Throughout my process, I referred to the iOS Human Interface Guidelines and made sure that design choices I made would suit iPhone users. I had the mentality of "native first, custom when needed".
Safe Area Layout
Designing for iPhone X was challenging, as I had to remember the rounded corners and top notch can clip the content. I used the safe area layout provided by Apple to make sure the content would not be cut out.
Throughout my process, I made sure to get quick feedback from users. I am potentially one of the users of Check so I wanted to make sure I did not bias my design decisions. To do so, I conducted quick feedback sessions by putting screens into Marvel and having users go through the flow.
Getting feedback from user is crucial as they will point out things that I hadn't thought of before. Some changes I made based on user feedback:
Display total tip amount
At first, on the Group Detail page, I had displayed the user's individual check amount. However, I found that users naturally clicked on "View Your Check" to see their amount. I decided to change this line to show "Total Tip", allowing the group leader to easily see the tip amount to add to the final check.
Combining similar foods to one row
Originally, I separated each food on its own line. So, if the bill had 2 burgers, it would show each burger as its own row. However, users found this too messy. As a result, I decided to show distinct foods. For foods that are shared, the app will automatically calculate the cost if two or more people have selected the same item.
More user testing
While I was able to get quick feedback from users, I wished I had more time to conduct full user testing sessions. Ideally, I would create a testing environment where users would go to a restaurant with a group of people and see how they use the app to split the check.
Some final thoughts
Splitting the check is a problem that I experience when eating out with friends. To make sure I wasn't designing for myself, I consistently asked feedback from users and made sure to focus on the user goals. I wanted to design something that would not create yet another pain point in an already frustrating task.
Thanks for reading!