Uber Eats checkout flow
I try to be smart about how I spend my money, and Uber Eats perfectly represents all of my failures to do so. It isn’t quicker than going to pick up my food myself, and it’s certainly not cheaper, yet time and again I find myself tapping that green-on-black logo whenever I’m feeling too lazy to put on pants and go outside.
As a shameful power user, I keep a close eye out for promo codes both in and out of the app, using them to make me feel slightly less guilty about ordering Uber Eats for the fourth time this week:
- I select my nutritious, non-bacon-laden food item.
- Then I add a shocking number of appetizers because I might get peckish later.
- Satisfied, I tap查看购物车to observe the damage.
- Scrolling down to my order total, I see a line item that says1 promotion available…See more。
- I tap看更多, which takes me to the Promotions page (naturally).
- In the upper right hand corner of the screen, I tap添加促销, which takes me to a new screen where I can enter my promo code.
Simply put, it’s difficult and confusing to find where I can enter my promo code. The promo code functionality is hidden behind an advertisement for the app’s promoted discounts of the day. I basically only found it by randomly tapping buttons on the checkout screen.
The functionality for adding a promo code should always be visible in any online checkout. When you’re dealing with people’s money, it’s important to be open and up front with all related information – taxes, shipping charges, and promo codes.
This is especially important for Uber Eats, which advertises promo codes heavily in its marketing efforts. Therefore, the function for adding a promo code should be its own line item that doesn’t take people away from the checkout page. Advertising promotions should occur elsewhere in the product.
Even as a frequent user, the Uber Eats app is a bit scary. Once you hit下订单, that’s it — there’s no going back, no changing or cancelling your order. A promo code function that feels more like an easter egg than a feature only heightens my anxiety.
Key touchpoints in a product should be clear and reassuring, especially when there are real dollars on the line. (If, heaven forbid, a product owner mandates that certain features like promo codes are hard to find because they aren’t a desired behavior, my only advice is: Stop it! Just stop it! Or, y’know, quit marketing promo codes.)
In this instance, Uber Eats failed because it strayed from its own established standards in the first half of the experience. Each button throughout my ordering process followed the same pattern: [动词+Specific Object]。
下订单，，，，查看购物车，，，，添加促销— all of these perform a very specific action.
Then in the last step, we come to1 promotion available…See more。Beyond being written unclearly, this button serves two different actions: showing the day’s promo codes和allowing users to add other codes (in yet another page).
One of the easiest ways to find this type of problem is by using what I call a breadcrumb test. Write the steps for a process out as breadcrumbs, say the steps out loud, and see if something jumps out or doesn’t make sense. For adding a promo code in Uber Eats, it would look like this:
添加到购物车>下订单>查看购物车>1 promotion available…See more>添加促销> [user enters promo code] >添加促销
The promotional step jumps out immediately, which, coincidentally is the root of the problem. It breaks Uber Eats’ internal rhythm and frankly feels like a piece added to make the marketing department happy.
Here are some tips to avoid a “crumby” checkout experience:
- Don’t hide key functionality within other processes.
- Be cautious and transparent when dealing with people’s money.
Ready to get your feet wet in Interaction Design? In this article we touch briefly on all aspects of Interaction Design: the deliverables, guiding principles, noted designers, their tools and more. Even if you're an interaction designer yourself, give the article a read and share your thoughts.