• OVERVIEW
  • DISCOVERY
  • PROCESS
  • USER FLOWS
  • DESIGN DETAILS
  • NEXT STEPS
  • Check

    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.

    Overview

    Check iOS App

    Role

    Interaction Designer

    Details

    Design Exercise, 4 working days

    Tools used

    Sketch, Marvel, Principle, Illustrator, OmniGraffle, Pencil & Paper

    Problem

    How might we most efficiently and fairly split a restaurant check

    Users

    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.

    High-Level Overview


    Discovery

    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")?

    Key Findings

    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.

    Creating Personas

    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.

    Joanne - the Group Leader

    Robert - a Group Member

    PROCESS

    Establishing Assumptions

    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.

    Brainstorming

    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.

    Design Guidelines

    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.


    User Flows

    High-Level

    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.

    Closer Look

    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.

    Step 9

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

    Design Details

    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.

    Iconography

    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

    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 State

    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.

    Stay native

    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.

    People first

    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.

    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!