Splitting the bill on SkiptheDishes - a UX case study

(DISCLAIMER: I do not work at SkiptheDishes. I worked on this project in order to improve my UI/UX skills)

Intro:

SkiptheDishes is an online food delivery and takeout service that connects hungry people with great restaurants. It’s a service I’ve relied on countless times to entertain guests, get through long exam crunches, and satisfy late night cravings.

I decided to sharpen my UX skills and work on a project to see how I could improve the SkiptheDishes product.

Tools Used:

  • Sketch: Wireframing and visual design
  • Invision: Prototypes and user testing
  • Draw.io: User flows
  • Hand Sketching: Prototyping and low fidelity wireframes

Problem:

A common use case for SkiptheDishes is ordering food with a group. However, there currently isn’t a way for a group of people to split the bill directly inside the SkiptheDishes app. This may result in fewer large item orders since most people are wary of ordering food for others. It can also be frustrating to have to manually calculate what everyone owes and track them down for money.

Personas / User Research:

I’ve felt the frustration of ordering food with friends and know my specific pain points, but I also wanted to see what other people’s frustrations were. I decided to interview 10 people to see what their experiences were like when ordering food in a group with SkiptheDishes. The interviews went well, and I came up with 3 specific personas, each with their unique pain points and goals.

1. Serious Sam:

“Will they pay me back?”
  • Think: “Will this person pay me back?”
  • Do: I’ll reluctantly pay for the meal and then constantly ask for the money that is owed to me.
  • Feel: This person hasn’t payed me back because they don’t respect me.

Sam is reluctant to pay for her friends’ meals because she doesn’t fully trust people to pay her back. Once she pays for someone’s meal, she doesn’t feel any shame in tracking them down and reminding them they owe her money. She sees it as a matter of principle and takes it as a personal insult if someone doesn’t pay her back.

Goals:

  • I want to have the money that is owed to me returned in a timely manner.
  • I’d like to track who has payed me back and who hasn’t.

Frustrations:

  • It’s time consuming to have to track down people for money that is owed to me.
  • It’s irritating when I have to remind people that they owe me money.

2. Anxious Alfred:

“Will they remember to pay me back?”
  • Think: “Will this person remember to pay me back?”
  • Do: I hesitantly pay for the meal and I feel nervous and/or awkward asking for the money that is owed to me.
  • Feel: This person has forgotten that they owe me money, but I feel weird reminding them.

Alfred is hesitant to pay for his friends’ meals because he is worried that people are forgetful. Once he pays for someone’s meal, he feels awkward and nervous to ask for the money that is owed to him. He doesn’t want to sound selfish and mean. Alfred thinks people are well intentioned and honest but can be forgetful at times.

Goals:

  • I want to remind people that they owe me money in a polite and non threatening way
  • I don’t want to seem cold and greedy when asking someone for the money that is owed to me

Frustrations:

  • It’s awkward asking people for the money they owe me.
  • It’s frustrating when people forget that they owe me money.

3. Generous George:

“What goes around comes around.”
  • Think: “This person is honest, they’ll pay me back sometime in the future. Things come full circle.”
  • Do: I gladly pay for my friends’ meals.
  • Feel: I feel that what goes around comes around. My friends will offer to pay for my meal next time. They are kind and honest people. I would hate to forget to pay back my friends when I owe them money.

George feels little hesitation when paying for his friends’ meals. He trusts them and believes that things come full circle. However, George is worried that when someone else pays for one of his meals, he will forget to pay them back. He doesn’t want this to happen since it may damage his reputation and friendships.

Goals:

  • I want to keep track of what I owe so that I never forget.
  • I want to create a sense of camaraderie among my friends.

Frustrations:

  • It worries me that I may damage my reputation if I forget to pay back my friends.
  • I don’t want people to think I’m taking advantage of their generosity.

Solution:

It was clear that everyone’s frustrations stemmed from having to deal with monetary transactions with their friends. I decided that the best way to deal with this problem was to remove the need for people to pay each other back, and instead directly pay the restaurant for their own individual items. This would be implemented by introducing a ‘split the bill’ feature into the existing product.

One user selects all of the items for the group and then sends the bill to the other participants. The other members of the group then each select their own items to pay for. The delivery fee and tip are split and automatically calculated based on the number of individuals partaking in the order. Instead of designating one person to order the entire meal and then pay them back, everyone pays the restaurant and courier directly.

Business Goals:

1.Make Ordering in a Group a Better User Experience

Everyone’s frustrations were centered around either having money owed to them or owing someone else money. I wanted to remove this dynamic from the user experience and make the transactions as smooth as possible. With the anxiety of not getting payed back removed, order sizes could increase since everyone is paying for their own items directly.

2.Increase Signups

I’ve often been in a group of friends who have enjoyed SkiptheDishes without ever actually creating an account. They partake in group orders and then pay back their friends. When using the split the bill feature, all members need to either have an existing SkiptheDishes account or signup for one. A ‘split the bill’ feature has a natural social element and could potentially increase signups.

User Flow:

I decided to create my designs based on 3 users ordering food together. The first 2 users having a SkiptheDishes account and iOS app installed, and the 3rd user having neither an account nor the app installed.

Before diving into sketching and prototyping, I decided to re-create the user flow of the original application with the ‘split the bill’ feature included in it as well. This helped me get a better sense of all the steps that are required to complete an order.

Sketching:

I then began sketching out the different screens of the flow to get a sense of how everything would be laid out. This saved me a lot of time because I had changed the user interface multiple times before coming to a solution I liked.

Some Initial Sketches I Created

User Testing:

The sketches I drew were then recreated into low fidelity wireframes and put together into an Invision prototype. I recruited 10 users to try out the prototype and give me their feedback. Going through the various scenarios and testing the design was extremely valuable. It allowed to me get a sense of how users thought the problem should be solved before actually diving into the creation of high fidelity mockups.

Users mentioned that various buttons had confusing language and wished they had a brief instruction guide on how to use the feature. These pain points would not have been discovered had I not done the proper user testing.

Visual Design:

Since this project involved working with an already existing product, I took the time to create a reference guide for the colours and fonts SkiptheDishes uses. This reference guide helped when designing the high fidelity mockups.

High Fidelity Mockups:

Split the Bill Instructions iOS

Checkout with Split the Bill Feature iOS

Select Items iOS

Payment Tracker iOS

Select Items & Payment Tracker Mobile Browser

Prototypes:

(The prototypes were made with Invision and a link to each one can be found below each video)

User 1:

User 1 gets the flow started and is the one who selects all of the items for the group. The user has an existing SkiptheDishes account and has the iOS app installed on their phone. After selecting all of the items for the group, user 1 then sends the bill to user 2 and 3 so that they can each pay for their own items. User 1 then selects the items they would like to pay for and completes the flow.

https://invis.io/MUC2585GK

User 2:

This user also has an existing SkiptheDishes account and iOS app installed on their phone. User 2 has the bill sent to them via an in app notification (their phone number is matched to their account) and they then select the items they would like to pay for.

https://invis.io/XSC258Z8Q

User 3:

The third user in this scenario doesn’t have a SkiptheDishes account nor the application downloaded on their phone. The bill is sent to them via SMS and they then sign up for the service and complete the flow. (Note: user 3 chooses not to download the app and instead completes the flow in their mobile browser.)

https://invis.io/B4C259VXA

Unpaid Item:

I decided to also create a prototype for what would happen if a user couldn’t pay for their selected item(s). In this scenario, user 3 cannot complete their payment and user 1 picks up the item and pays for it as well, allowing the order to be completed.

https://invis.io/W7C25AKTU

Things to Consider / Closing Thoughts:

  • Designing a new feature into an existing product without the required insight of how the product is built under the hood was both challenging and a lot of fun. I was pleased with the final result and I think it’s a viable solution. However, before a feature like this were to go live, further development and user testing would need to be conducted.
  • The instructions were placed in the prototype based on the feedback I got from the initial user testing. I thought it would be a good idea to show instructions the first time a user goes through the flow. However, if further development and testing shows that the design is intuitive enough not to have instructions, they should be removed in order to speed up the user flow.
  • There are a variety of edge cases that need to be thought through and designed (for example: splitting a pizza or a large salad). Various departments at SkiptheDishes would need to take part in the design and implementation of a ‘split the bill feature’ in order to ensure a great user experience.
  • The engineering team would need to be consulted in order to find out the feasibility and constraints of the various payment processes.
  • In order to create a delightful user experience, the live support team would need to give their recommendation on how to deal with users getting stuck or having questions when using the feature.
  • SkiptheDishes also builds products for restaurants and couriers. In order to make the jobs of restaurant operators and couriers easier, orders that use the ‘split the bill’ feature shouldn’t appear any different than orders that don’t when meals are being prepared and delivered. This level of detail would only add an unnecessary cognitive load on restaurant operators and couriers during the order process.
  • Account managers and the accounting team would need to be consulted so that restaurant owners can see split orders when they review their monthly statements. Account managers coach restaurants on how to improve sales and order volumes. Knowing if orders were split among people could be a valuable insight.
  • The marketing team should also be consulted in order to work on a product release strategy.
  • I had great time working on this project and I learned a lot! Questions? Feedback? Want to find out more? Let’s grab coffee! ☕☕ @dalexandruignat

If you enjoyed this post please leave a clap and a share! 👏🏼🔥👏🏾🔥👏🏿🔥👏🏾

You can follow me on twitter @dalexandruignat 🔎🔎🔎🔎

(Note: This post is merely a reflection of what goes on in my weird little head)🤓

blepebleblepeblep