top of page

UberEATS: Tipping System Redesign

Mobile App, Strategy Design

PROJECT SUMMARY

This design exercise aims to improve drivers, customers and restaurants' experience of using UberEATS by redesigning it's current tipping system.

ROLE

UX Researcher, UI Designer

TOOLS/METHODS

UX Research: Interview, Observation, Peers Review, Grounded Theory Method, Competitive Product Analysis, Omnigraffle

​

UI Design: Sketch, Framer, Photoshop, Invision

​

DELIVERABLE

Interactive prototype

INTRODUCTION

TIP AFFECTS USER EXPERIENCE

Did you ever tip the Uber driver who travelled half of the town, risked getting a ticket around your house where there was no place for parking and finally delivered the food onto your hand? Tip, however, is more than a form of courtesy in this project. Assume a higher tipping rate from customers can potentially improve drivers, customers and even restaurants' user experience overall, think about how you could help boost it.

TIME SPENT

Brainstorm/Problem Identification 1h

Interview&Observation 3h

Competitive Product Analysis 0.5h

Solution Analysis/Brainstorm2 0.5h/1h

Wireframe Sketch 0.5h

Wireframe&User Flow 1h

Mid-fi Prototype 4h

Iteration/Test 1h

Hi-fi Prototype 8h

​

Toal time 20.5h

BRAINSTORM/PROBLEM IDENTIFICATION

I started the project by identifying my assumptions and users' problems. I quickly grabbed a pen and divided the prompt into 5 parts: Goals,  Problems, Audiences, Assumptions and Detail Considerations.

The iterative thinking process made me refine the content of the whiteboard and I got the high-light ideas from it:

​

Goals:

Improve both UberEATS drivers and customers' user experience by increasing customers' tip rate.

Problems:

  • Drivers sometimes don't deliver food to door.

  • Customers sometimes don't tip drivers.

  • Restaurants sometimes can't maintain good business relationship with customers due to the bad experience between drivers and customers.

Audiences:

  • Customers, people who order food through UberEATS app.

  • Drivers, people who deliver food to customers.

  • Restaurants, people who prepare food that is ready for delivery.

Assumptions:

Encouraging customers to tip will improve all types of user's experience overall.

Detail Considerations:

  • UI redesign for UberEATS mobile app.

  • Optimize the tipping process.

  • Reward customers for their interaction with both drivers and restaurants.

  • Design under Uber's design guideline.

USER RESEARCH

INTERVIEW & OBSERVATION

For the research plan, I initially conducted 2 open ended interviews with UberEATS drivers to frame the problem space. Then I conducted a semi-structured interview with one of the interviewees to gather in-depth feedback on his experience. To contextualize the data collected from him, I did a short ride-along observation session with the interviewee.

FINDINGS FROM DRIVERS:

​

  • Parking availability is the main factor for drivers to determine whether to deliver food to door or no.

  • Drivers sometimes make emotional decisions based on whether they get tips from previous orders.

To collect qualitative data from restaurants and customers' sides, I walked in 2 restaurants in Manhattan and interviewed my friends who use UberEATS. I also reflected my experience of using UberEATS as a customer.

FINDINGS FROM CUSTOMERS:

​

Customers' tipping behavior is determined by:

  • Delivery quality (delivery time consumed, curbside pickup/meet up/deliver to door)

  • Communication with the driver (efficient/smooth/difficult/fail)

  • Order price (food price, delivery fee)

  • Food quality (presentation, temperature, flavor)

  • Tipping process (tipping & rating together)

FINDINGS FROM RESTAURANTS:

​

Different restaurants have different business strategies. But overall they hold positive opinion on having their own customer bases.

ONLINE REVIEWS

Some Youtubers and the comments below those videos shared various UberEATS experiences. They are good sources to supplement my interviews and observation.

SYNTHESIZING THE FINDINGS

From synthesizing all the data collected, it's proved that Higher tipping rate will improve current drivers, customers and restaurants' user experience overall:

​

  • For drivers, not only can tip make them feel "it's worth it" when they are asked to deliver to door (especially when the parking availability of a customer's neighborhood is limited), but also can it positively help them make their next decision of "deliver to door or no".

​

  • For customers, the higher tipping rate, the better delivery quality, and the more satisfied customers will be.

​

  • For restaurants, the more satisfied customers are, the more likely restaurants will be to have their own loyal customer bases. 

​

To turn the refined findings into actionable design, I listed 2 opportunity points to tap in:

​

Encourage to tip =  Improve tipping process + Stimulate tipping action

COMPETITIVE PRODUCT ANALYSIS

The following competitive analysis inspired me the idea of using coupon as an incentive of tipping.

  • Coupons, Cashbacks, Promotions, Referral credit

  • Rating/Price/Distance/Time

  • Delivery fee

  • eGiftcard, Referral credit

  • Rating/Price/Distance/Time

  • Delivery fee

  • Referral credit

  • Rating/Price/Time

  • Delivery fee

After the analysis, also, I found that coupon is better than other types of benefit offer for customers, restaurants in terms of:

 

  • Expiration date

       Unlike Cashback, coupon will expire, which stimulates customers to request orders within a valid date.                           Restaurants will be more than happy to see that.

  • More friendly conditions

       To apply, Giftcard, Referral Credit and Promotion require extra efforts (purchase, share, apply code) and they                 have strict conditions for customers.

  • Flexible operation strategies

       Various operation strategies (e.g. Minimum Consumption, Partner Restaurant, Special Menu, etc) can be applied         to coupon to help increase customer retention rate for restaurants.

BRAINSTORM 2/SOLUTION ANALYSIS

CONCEPT SOLUTIONS

Improving UberEATS's current tipping design would be the low hanging fruit for this time/budget sensitive project. So I quickly sketched out my concepts that would help improve tipping experience in the app while bringing in the idea of coupon for the tipping system.

IDEA 1. Less screens

A button attached to the main screen to start the tipping system

The content and size of the info card will be interactive. And the info card is scrollable

Notify customer to finish the process to get coupon without rating delivery experience

Select tip amount

Notification screen

IDEA 2. A more progressive/conversational design

A popup will appear when launching the app

A notification screen to make the experience happier

Visual presentation of customer's benefits.

Visual presentation of a claimed coupon

Rating below 4-star will trigger the options for customers to describe their experiences  in detail

Rating below 4-star will trigger the options for customers to describe their foods in detail

IDEA 3. An exploratory design

An unread notification will appear on the main screen if there is an unrated order

Another unread notification in Profile page to direct customers to Benefits page

To activate the coupon, customers will start the rating&tipping process

Customers will manually type in any feedback here once and for all

Simpler scale: Good or Bad

Select tip amount

Notification screen

DEMO SESSION

I presented the paper prototypes of the 3 ideas to 3 UberEATS users and collected their feedbacks.

Good idea

Confused

Bad idea

FEEDBACKS & ANALYSIS:

​

  • Tipping screens should be visually given priority to rather than rating

       Since tipping is the core part of this redesign, it should be more accessible to customers.

  • Coupon should be clearly presented as a reward for customers

       Customers need to be clearly informed that they are offered with coupon as reward at the very beginning so          that they are more likely to start the tipping&rating process. 

  • Customers should be aware of their tipping&rating choices simultaneously

      The design should build visual connections between customers' tipping&rating intents and actions to                       ease the burden of memory. Less back and forth screens.

FINAL WIREFRAME & USER FLOW

The design of an interactive info card is adopted. The wording/buttons/graphics in the info card will be interactive. Customers can accomplish tipping/rating tasks without going through different screens and are able to view their tipping/rating choices within one screen.

The option of Benefits, located in the existing  Profile panel, manages all types of benefits for customers (coupon, promotion, cashback, credit, etc)

MID-FI PROTOTYPE

When placing orders, customers can scroll to the bottom of View Cart and click Add Promo Code/Coupon to go to Benefits panel to apply valid coupon.

DESIGN ITERATIONS

I quickly tested my mid-fi prototype with several UberEATS users to hear their feedbacks on the visual design. 

DISPLAY A COUPON

Many people mentioned that the popup didn't give them an evident clue that they would be rewarded after tipping/rating. Therefore, I decided to add an icon of coupon at the edge of the popup to convey the information of rewarding loud and clear.

AN EVIDENT PROGRESS BAR

Some users reported that they didn't notice the previous progress bar throughout the test. So I decided to add a subtle shadow on it.

A MORE EYE CATCHING&EFFICIENT DESIGN OF

COUPON MANAGEMENT

When landing on the page of coupon management, 2 users told me:

1. It was hard to distinguish those coupons, saying it was not practical to tell which coupon is for which restaurant merely based on their colors. The text on the coupon was also a little bit small for them to identify.

2. On top of category, it would be better for them to view all their benefits based on expiration date. 

​

So in my later design, I adopted a bolder design on coupon and followed UberEATS's current style guide on restaurants presentation and information filter.

PLAY WITH HI-FI PROTOTYPE

Made by Framer

bottom of page