UX Designer
Portfolio Grubhub Cover3.png

Grubhub


OVERVIEW

Challenge

After learning that users have to individually calculate how much each person owes for the food and other fees, we wanted to find out how to incorporate a way to split bills within the Grubhub app.

Problem

Users don't have an efficient way of splitting the bill with friends after ordering food. 

Solution

Create a seamless bill splitting option to calculate the dishes and splitting evenly or by dish and allow users to charge others on Venmo.


RESEARCH

User Interviews

Usability Testing

I conducted 9 interviews on individuals who have used at least one food delivery app. They talked about their experiences with the apps and what factors were important for them.

Some questions asked:

  • Can you tell me about your experience with these apps?
  • If you use multiple apps, how do you decide which one to order from?
  • In what situation would you order food from a food delivery app?
  • Do you order it for yourself, with friends/family or for friends/family?
  • How do you communicate what to order when ordering in groups?
  • How do people pay the person ordering back?
  • Positive and negative, favorite and least favorite parts? What motivates you to download an app?

The 9 interviewees were asked to do usability testing on Grubhub. I got to see how they interacted with the app and what type of things stood out to them.

Comments from testing:

  • Too much text
  • Looks like a new app
  • People didn't realize some things were clickable (Stars, changing to pick up option)
  • There's a lot going on in the filters
  • Some people liked that there was a lot of information that's shown on the first screen
  • People would pass phone around when ordering in groups (to make sure they're ordering from app menu and not the in-person restaurant menu)
  • The app is not super intuitive
 

Affinity Mapping

 
 

Insights

  • People ordering in groups would calculate the cost and pay back through Venmo
  • Yelp is used for reviews on restaurants before ordering
  • High costs on delivery fees and other fees tend to push people away from using the app
  • Group orderings  - cheaper to split up the fees
  • Factors for ordering: what is open, what cuisines they are craving, and food restrictions
  • It's frustrating when restaurant menu and app menu is different
  • When people are extremely hungry and have nothing in the fridge, they would like to quickly order something

Design Decisions

People have a lot of trouble when it comes to bill splitting, so we decided to focus on designing a bill splitting feature within Grubhub.

Since a majority of people use Venmo as a money exchanging method, it should be incorporated into how people are charged after the split is calculated.


DESIGN

Flow

 
 
 

Wireframing

 
Coming up with multiple ideas for the feature

Coming up with multiple ideas for the feature

 
 
Interactive paper wireframing

Interactive paper wireframing

First Iteration based on paper wireframing

First Iteration based on paper wireframing

 

In this ideation stage, my teammate Louisa and I did interactive paper wireframing to quickly design the necessary screens.

 

Usability Testing

I made a prototype of the initial designs on Invision and used that to test the designs and interactions on 7 people.  

 

Splitting Evenly

 
 
 

Splitting By Dish

 

Insights

  • Testers loved that we solved a problem that most people tend to avoid - calculating is too difficult
  • Manually entering more than 2-3 names is frustrating
  • "Me" (the user) and "Friends" should be defined differently - the user behaves differently from friends (cannot charge themselves on Venmo)
  • There should be an interaction showing when two people share a dish 
  • Users like to have confirmation - make sure to let them know what is happening
  • It would be nice to show all totals and dishes for people splitting the bill
  • Venmo should look more like a button
  • "By Dish" makes people think dishes will come up first
  • Users like that they can share a dish

Design Decisions

  • Show how much each dish is as dishes are added to a person
  • Show how much each person owes immediately and display their dishes are 
  • Let users know that totals include tax, tip, and other fees
  • Clearly show when two people are sharing a dish
  • Take out the extra step of "Calculate"
  • Explain that friends can be added from the user's address book and/or be typed in manually
 

Final Designs

 

Splitting Evenly

 

Splitting By Dish

 
 
 

Redesigned the confirmation page

  • Estimated delivery time
  • Included a simple tracker
  • Simplified order summary
  • Bigger text for easier readability
  • Included Split My Bill button to immediately split the bill
 
 

Split My Bill - Evenly

  • Total displayed at top
  • Enter split by how many
  • Quickly see how much each person pays
  • Request in Venmo right away 

 

 
 

Split My Bill - By Dish

  • (Me) would be displayed first
  • Add friends from address book and/or type in names manually
  • Under each name, users can assign dishes to friends
  • Dish names shown for confirmation of the dishes ordered
  • Dishes can be shared between two people
  • Calculations  displayed as dishes are assigned to people
  • Taxes and fees are shown for each person 
  • Request how much individuals owe through Venmo - Individually charged