top of page
UberEATS: Tipping System Redesign
Mobile App, Strategy Design
This design exercise aims to improve drivers, customers and restaurants' experience of using UberEATS by redesigning it's current tipping system.
UX Researcher, UI Designer
UX Research: Interview, Observation, Peers Review, Grounded Theory Method, Competitive Product Analysis, Omnigraffle
UI Design: Sketch, Framer, Photoshop, Invision
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.
Brainstorm/Problem Identification 1h
Competitive Product Analysis 0.5h
Solution Analysis/Brainstorm2 0.5h/1h
Wireframe Sketch 0.5h
Wireframe&User Flow 1h
Mid-fi Prototype 4h
Hi-fi Prototype 8h
Toal time 20.5h
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:
Improve both UberEATS drivers and customers' user experience by increasing customers' tip rate.
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.
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.
Encouraging customers to tip will improve all types of user's experience overall.
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.
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.
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
eGiftcard, Referral credit
After the analysis, also, I found that coupon is better than other types of benefit offer for customers, restaurants in terms of:
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
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
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
I presented the paper prototypes of the 3 ideas to 3 UberEATS users and collected their feedbacks.
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)
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.
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
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