Re-imagining the UX of Uber Eats
Right off the bat, this redesign is in no way associated with Uber Eats. It’s simply a design exercise. I recently started working as a UI/UX designer and I took up this personal project to help me hone my skill.
Checkout my full portfolio at www.prempradeep.webflow.io
Images and GIFs best visible on desktop.
Why this redesign?
My experience with UberEats hasn’t always been very pleasant. Reaching customer support has always been a nightmare. Orders once cancelled from their end wont even show up in the history.
There were many instances where my order got placed unintentionally. I found the check out page extremely cumbersome and I often placed the order without confirming the address or the payment method. I remember hunting for cash multiple times late in the night. I considered these my errors and let go of them.
About a month ago, I was extremely weak from not eating all day and I found it realy frustrating to navigate through the app. Even the slightest hiccups like the horizontal swipe of the menu, the absence of add/remove button in the items list and a few other elements bothered me a lot.
I decided to Tweet these issues to Uber Eats but before doing it, I wanted to see if there were any more hiccups that I can mention in the Tweet.
And that’s how this redesign project started. I started listing down the pain-points and the list went far beyond the 140 character limit. So I wanted to give a shot at redesigning it myself. I thought this could be a good start for me in design as I get to strip an app down to it’s basic elements and redesign it to serve a specific purpose.
‘Nom’enclature
Since I don’t know what exactly each screen is technically called I just gave them simple names. Here is the terminology I’ll be following for the rest of the case study:
Pain-points in current app
I listed out all the hiccups I found along the process of placing an order. I arranged them categorically which later helped me to design solutions for more than one problem at a time.
Research
Whatever pain points I listed down were highly biased to my experience with the app. To approach a redesign with just my opinions wouldn’t give the best results. The best place to collect experiences from other people is the reviews from the Play Store. I went through as many reviews as I could and marked the ones which were related to the problems I was solving.
From the reviews, I drew the following conclusions:
- Ordering by mistake due to the clutter is quite common
- A majority of the reviews talk about poor customer support (which I faced personally as well) which arises from orders being cancelled
I can do nothing about the customer support but what I can do is reduce the necessity of users having to reach them by enhancing the experience of the checkout process and make the users feel more in control.
Current user flow
It could be a personal opinion but I feel it makes the user experience better if the whole flow were in a single direction. In Uber Eats, the flow gets disturbed at two points. First, when the users clicks on an item, it takes them to a completely new screen (Add Items) and brings them back once they added it to the basket. Second, the users have to go back to the same Add Items screen to remove or modify an item from the basket. This was one main issue I wanted to address.
Objectives
After considering the user flow, user reviews and the pain-points I’ve jotted down, I found multiple problem statements that I could work on. These are the high level objectives for this case study:
Design objectives
- Maintain a sense of direction in the user flow
- Reduce number of scrolls/taps required to perform certain tasks
- Make the checkout process less cumbersome
- Avoid unnecessary horizontal scrolls
Business Objectives
- Improve visibility for restaurants
- Reduce load on customer support by curbing the possibilities of order cancellations
Let’s jump into the redesigns, one screen at a time.
1. Restaurant Card
- In the current design, only one restaurant card is fully visible in the screen at a time. This directly affects the discoverability of a restaurant and increases the number of swipes for the users
- When compared to the other apps in the market, Uber Eats’ restaurant card occupies the maximum screen real estate
- Unclear iconography: Rupee symbol doesn’t quantify the price given that the users don’t know the lower and upper limits of that scale; Leaf icon misleads users into thinking it’s a veg restaurant whereas it was just used for displaying the offer
- Multiple offer banners
- Inconsistencies in design: Uneven heights of restaurant cards, gold and black colour stars without any intuitive significance of colour
- I redesigned the restaurant card to accommodate more restaurants in the viewport and reduce the number of swipes for the users.
- I reduced the size of the card considerably and changed the stacking of images and text from vertical to horizontal. Since offers appear multiple times in the old design, I retained its priority by giving it a colour pop and a dedicated space.
2. Horizontal Scroll
Horizontal scrolls exist to give users the freedom to scroll through multiple categories at the same time.
- The transition from vertical to horizontal (and vice versa) swiping is often super glitchy. Any kind of scrolling continues for a second or two after the scroll action to replicate real world physics. If a user changes the direction during this tiny time interval, the results are quite unintuitive.
- I have introduced a See More button at the end of a category for the user to choose if necessary.
- With the reduced card size, the more number of restaurants from a category are shown in the screen.
3. Sort and filter
- Sort and filter are always hidden until tapped. The user is usually unaware of their existence.
- Inspired from the other two apps, I brought in the sort option right above the list of restaurants.
4. Location
- Selecting the wrong address has been in issue in most of the reviews I have gone through.
- The app asks to check if the location is correct once you open the app. However, I wanted the location to stand out to make the user aware of the location at all times. Changed it from plain text to a filled box to draw the user’s attention.
Discussion
By eliminating the horizontal scroll and reducing the card size, upto 4 restaurants from two categories are visible now. The flexibility and choice lost by eliminating horizontal scroll is compensated by the reduced card size.
1. Horizontal scroll of the menu
- It takes too much time and too many swipes for a person to reach the end of the menu category.
- The touch target, being too small, gives rise to many mis-taps.
- I went for a common floating menu icon to solve this issue.
- However, just as a small brainstorming exercise, I wanted to try out something different from the existing designs. To have it more accessible while swiping, I docked it to the left, more reachable to the thumb.
- Instead of a text saying Menu, I decided to go with a very familiar icon seen in most websites on mobile.
- A swipe interaction would make it even more user friendly.
2. CTA buttons
- There are no visible CTA buttons to add an item.
- Once the users clicks on the item, it migrates them to a completely new screen.
- The only CTA that first appears on this screen is Offers. I assume this is to remind the users constantly of the offer so that’s they would order leisurely. But, even when the users apply the promotion by tapping on it, the banner still stays on the screen defeating the purpose. As the users must have already seen the offer on the Restaurants screen and will get a chance to apply it during the checkout process as well, I find it redundant at this point.
- Removed the offers floating button from this point of the user flow
- To make the user know what to tap on while selecting an item, I brought in the common Add button.
- To make room for this, I swapped the position of the images from right to left.
3. Customize items
- One has to go to a new (Add items) screen to customise their items and come back to the same items screen to select another item, breaking the flow.
- Usually, only a few items need to be customised, but, other items also have to go through the new screen to be added to the basket adding an unnecessary step to the process.
- ‘Additional charges’ is a radio button which requires the users to select it to move forward with the order. One, it is unnecessary for the users to look at additional charges for every item they select and two, an extra tap is required to select it.
- Brought the contents from the Add items screen into a pop-up which appears only when there customisation available for the item. Didn’t try to deviate much from the original design for this one. The pop-up helps in not breaking the flow as it still maintains context by having the dulled down items screen in the background.
- Moved Additional charges to the subsequent screens
4. Item Card
- Due to the massive card size, a maximum of 4 items are shown in the screen at a time which again results in multiple swipes from the user.
- There are no alternative designs for items with no images. This results in wide blank spaces throughout the menu.
- I made the size of the image bigger in comparison to that of the restaurant card. My reasoning is that the choice of a restaurant is based more on ratings and description than on images, whereas the choice of an item is highly influenced by images (Food styling and food photography exist for a reason :P).
- I made the card less text heavy by just having a strikethrough on the original price.
5. Removing an item
- This comes as a shock to me, but there is no way you can remove an item from your basket. Not just the Items screen, you can’t find an option to remove that particular item in the Add items screen either.
- However, removing items is possible in the checkout process but there’s a catch. It is not very intuitive. Users have to figure out that they have to click on a row item which opens our good old Add items screen with a new remove item button. Here again, the button doesn’t look like a CTA button.
- This has been solved by introducing the Add button in two screens, the Items screen and the Check-out screen.
The user arrives at this screen to review selected items and modify them either based on the number of items selected or on the total amount.
Check out screens of all the food apps I use are overloaded with information regarding location, cart items, suggestions, promotions, payment methods, cooking instructions, delivery instructions, rider tips, bill details, Apple’s next keynote, and my cousin’s wedding. Jokes apart, I always find it difficult to decipher what the app is expecting me to do at this point. Should I confirm my address first or should I pay? With so many elements in one screen, it’s difficult to nail visual hierarchy.
1. Visual Hierarchy
- Due to the huge map, the first thing that draws the user’s attention is the location and not the selected items. This is good practice to confirm the location but poor placement in the user flow. There is a good possibility that the users just modify their items (As that’s what they have come to this screen for) and proceed without confirming the location — which apparently happens a lot going by the reviews.
- The text style of the Total amount is less prominent than that of the items, which doesn’t give the user the right information at the first glance.
- The default payment method is cash and again, it is easily missed owing to the information overload.
- As you can see, I went with a wizard approach to solve this problem. I wanted to introduce some friction in the check out process by forcing the user to perform one set of actions at a time.
- The first screen is dedicated to conforming the items, modify them, view the bill and apply promotions if applicable. Made sure items take the priority rather than anything else.
- Location and Payment method have their own steps to avoid common mistakes.
- Since Uber Eats used multiple icons in their restaurants page, I took the liberty to introduce new icons to each of the major steps.
2. Confirmation
- Most of the reviews talked about a lack of confirmation before they placed the order. This is a very common mistake as most of the users will be in a hurry to place to food and often miss a step or two in the process.
- Introduced a new screen after the wizard, which gives a summary of the order just as a final confirmation.
- Used the styling of the Add Items screen to not deviate much from the original design.
3. Notes
- Notes about delivery and items come up at three different locations in the ordering process.
- Solved this issue by placing a single text field in the checkout screen.
Discussion
Although a few more steps are added to the check-out process, it gives the user better control. The wizard approach doesn’t make it look like three completely new screens but as multiple parts of the same and makes the users aware of the next steps they have to take.
Conclusion
This was my first hands-on mobile design project. Due to multiple reasons, this one took me months to finalise. It however acted as an advantage. Everytime I reopened this project, I used to find better alternatives to the ones that I’ve finalised. It gave me a chance to re-evaluate every decision made.
Key takeaways
- I got a better clarity on my redesign only when I started to write the case study. I found some silly mistakes in the designs when I was actually describing them. Writing is a feedback mechanism in itself. Write more!
- Newfound respect for iterations. I just gave myself permission to design/sketch even the stupidest variant possible. Truth be told, it was just fun to stop at a point, explore all the possibilities, filter down to one variant that meets most of the constraints and move ahead.
- Never try to redesign the full app. There are so many moving parts and it might become a much heavier project than expected. Instead, select specific features and provide a better solution.
- Figma mirror is awesome. I could replicate the design on my screen and see it change as I make changes on the desktop. It helped me test the usability of certain features I introduced.
- Style guides are really important! This is something I missed in this project. Only towards the end of the project did I realise the mistakes I had been making by “approximating” the font colours, sizes, shadows and stuff. Having a system in place before starting the project would have helped a lot. Something to keep in mind for my next one.
Thanks for reading this really really long article! If you think I’ve made some obvious mistakes, or if you think there are better alternatives to the solutions I provided, please comment/reach out to me. Would highly appreciate any kind of feedback given that this is my first project.
You can find me on Instagram and LinkedIn.
Check out my videos too:
References
Here are some of the resources I’ve gone through during the course of this redesign.
