Hyewon Son
Silver Copy.png

Slice

Slice

Overview

Slice is a mobile app that reinvents bill splitting experiences for diners. The billing process is a poor experience where the issues of delay, error, and confusion arise. Moreover, waiting and figuring out how to split bill create frustration and awkward social friction among the diners.  

To solve this problem, we designed Slice that eliminates waiter interaction and gives users a complete control to split and pay bill however they want. View process deck

Role

Research, competitive analysis, sketching, prototyping, user testing, project management  

Tools

Sktech, Origami, Principle


Design Question

How might we improve dining experiences of a group meal at sit-down restaurants? 


Pre-research

Diner's user journey

We mapped out an end-to end user journey of a typical diner to visualize areas where pain-points might arise (highlighted in red). After overviewing the dining experience, we synthesized an initial hypothesis that diners would prefer not to have waiter interaction for ordering and billing because it slows down the process.

 
task analysis.png
 

Research

Interviews and survey

To understand the problem scope and the dining experience from the both sides, we conducted 5 semi-structured interviews with diners and waiters and created online survey that got 37 respondents.  

slice_finding.png
waiter_finding.png

Research insights

Diners want control over the billing process

To our surprise, diners still desired some interaction with the waiter especially during the ordering process. Therefore, we decided to hand over control to the diners over the billing process by leveraging the technology already available at the restaurant. 

slice_scope.png

competitive Analysis

Identify market opportunity

We observed other mobile applications that help users to pay and split bill at a restaurant.  None of the apps address the entire billing process and allow payment to the restaurant.

 
Competitive Analysis Copy.png
 

After putting the existing solutions into 2x2 matrix, we were able to find our unique market opportunity: a mobile app that allows payment to the restaurant with the access to billing data. 

2x2matrix.png

Our solution

solution_slice1.png

Slice allows the diners to access their billing data on their phone and make payment to the restaurant. We decided to leverage the point-of-sales (POS) system at the restaurant to let users access billing data on their phone. After research, we found out point-of-sales (POS) system are widely used by restaurants and are advanced enough to integrate with other mobile applications. 


Paper prototyping

Ideate and validate

To quickly test our concept, we created paper prototypes that demonstrate key user flow. Paper prototype allowed us to brainstorm on main features without expending too much resources.  We iterated on our wireframe by conducting guerrilla usability testing with paper prototypes. With the total of 8 participants, we aimed to validate solution concept, clarity on components, and user efficiency. 

Guerrilla User testing

usertesting.png

We iterated on our paper prototypes by conducting guerrilla usability testing with 8 participants. We recruited our participants in restaurants and cafes, where Slice would be likely to be used. The goal was to test solution concept, clarity of components, and user efficiency. The participants gave great feedbacks including concerns about edge case scenarios.

userfeedback.png

"There is too much clicking!"

"Being able to pay with Venmo is really nice."

"What is an item is left unpaid? Who is going to pay for it?"


visual design &prototyping

Final solution

We started designing high fidelity prototypes by creating a style guide for the user interface and determining major screens of the app. We used Sketch for UI design and Principle for motion design.

static screens.png

Scenario 1

Jane is dining out with her best friends, Ian and Paul at Little Thai today.

 

1. Restaurant check-in

The friends are ready to order and the waiter comes by. Jane, who is the "bill starter" today, launches Slice and shares her id number to the waiter to get connected to the restaurant. 

 
slice1.gif

 

2. Waiter checks Jane in with her ID

The waiter inputs Jane's id number to the POS system and successfully checks her in. He then adds order items to the bill.

waiter.gif

 

3. Jane adds friends to the bill

The best friends are done eating. Instead of calling the waiter for the bill, Jane launches Slice and adds "Best Friends" group so they can pay directly to the restaurant.

 

 

4. Pay by item

The best friends view the bill and decide to pay by item. Jane shares Thai Noodles with Ian and Paul, selects two portion of Mixed Vegetables and one Crab Delight. After she confirms her individual subtotal, Jane tips the waiter and finishes her total payment of $39.65.

 
PAYPERITEM.gif

 

5. Unpaid item

Everyone is done with their payment, but the app immediately notifies each diner that some item is left unpaid. Ian forgot to pay for his Grilled Salmon! Ian selects the item and makes his payment to avoid charge on everyone’s card.

 
UNPAID.gif

Scenario 2

Jane had family-style dinner with her coworkers. They want to split the bill evenly by six people.

 

Split evenly

All coworkers select Split Evenly option and pay with the tip amount.

 
splitevenly.gif

Design Explorations

Address the edge-case scenarios

We realized that the most important function of this real-time interactive app lies on solving tricky scenarios that can occur in bill splitting situations.

Challenge: Jane and Paul shared one Mixed Vegetable

The first version solves simply allows the diners to select from multiple order item. However it does not allow diners to split one order of multiple quantity item. Next we came up with drop down version where Mixed Vegetables is separated into three items. Diners that want to split a Mixed Vegetable just tap the same one their friends tapped. However after some evaluation, users found drop down box not intuitive. So we went back to the first version and added additional options to split by exact share or dollar amount. 

Version 1- Drop down menu for duplicate orders of the same item

Version 1- Drop down menu for duplicate orders of the same item

Version 2- Drop down into individual items to split

Version 2- Drop down into individual items to split

Version 3- Additional customizing option

Version 3- Additional customizing option

Challenge: Grilled Salmon is left unpaid

What if someone forgot to pay for an item? This was a critical error prevention problem to solve. The first version inhibits the users from payment until all items have been claimed. However, this creates another "waiting" moment that we wanted to remove in the first place. We finalized with the second version where everyone is notified with unpaid item(s) immediately after their payment so they can settle the issue at the spot.

Version 1- Users wait until all items are claimed

Version 1- Users wait until all items are claimed

Version 2- Users are shown a message after payment

Version 2- Users are shown a message after payment


Reflection

Sharing a meal is about getting together, without tech in between. We had to streamline the app to minimize screen time during the meal and it required a lot of logistic considerations on both stakeholders. Also we made sure the solution lets diners to focus on the meal and comes into play only when diners want to pay.

If I had more time, I would develop the flow on the waiter's side, since this is a two-sided system. Also I would run additional usability testing in a group setting to catch any confusion in complicated group situations. I'm sure there are other situations that we missed because bill splitting is complicated!