

UberEats Health Mode
Health Mode is a new feature that we proposed for the existing Uber Eats app, targeted explicitly at diet eaters and fitness lovers. This project is researched and designed by Jiayue Gou, Jasmin Liang, and Carla Pan over the course of 3 weeks.
UX/UI Design, UX Research
Figma
2022
Figma
2022
My Contribution
Concept development, Research, Wireframing, Prototyping, Marketing materials, UI documentation
Concept development, Research, Wireframing, Prototyping, Marketing materials, UI documentation
OVERVIEW
01. Problem
# What if you can order your delivery based on your nutritional goals?Fitness lovers and diet eaters tend to cook at a home and take the extra time to do meal prep because they need to eat based on certain diets. Therefore takeout is usually not the best option for them. We were wondering if there is an opportunity to redesign a food delivery app like UberEats to cater to their needs and potentially expand the user group of the UberEats.
02. Users
People who follow a specific diet for fitness or wellness purpose. They tend to avoid food delivery apps because it’s difficult to track nutritional intake.
03. Solution
Following Uber Eats’s brand guidelines, we created an Uber Eats Health Mode that allows users to find nutritional value for takeout dishes, tailor their orders based on their custom diet needs, and review their nutritional intake.
People who follow a specific diet for fitness or wellness purpose. They tend to avoid food delivery apps because it’s difficult to track nutritional intake.
03. Solution
Following Uber Eats’s brand guidelines, we created an Uber Eats Health Mode that allows users to find nutritional value for takeout dishes, tailor their orders based on their custom diet needs, and review their nutritional intake.
USER RESEARCH
01. Survey
We began to research by conducting a survey with around 30 users online, all of whom identify as fitness lovers and follow a calorie-strict diet. Then, we analyzed the results.

02. Interviews
We interviewed 4 people from our target users. Below are the questions I asked and selected responses I got.

03. Uber Eats App
Aside from user research, I also studied the existing Uber Eats app. The goal is to understand current health-related features and identifies opportunities.
# 01
It’s not very easy to locate healthy restaurants and there are too many temptations for diet eaters. Restaurants under the healthy category don’t have any additional health-related information displayed.

# 02
The only difference between a healthy category restaurant and a regular restaurant is a “healthy” label at the top of the restaurant page, and no other information is provided. Only a very limited amount of restaurants will include calorie information in the meal descriptions.

PERSONA
Based on the user research, we generated a user persona.

JOURNEY MAP
Then I made the journey map of a diet eater user who intends to order food delivery after a long day of work before her workout session.

INSIGHTS
# What features are we proposing?
01. A health mode that, once turned on, filters out the restaurants automatically based on the user’s personalized diet preference.
02. User-generated health rating for restaurants. Calories and macronutrient information are displayed for every dish.
03. A survey to create a customized diet plan for the user, with the option to import data from other nutrition apps into Uber Eats.
04. The ability to monitor one’s calories and nutrition intake for each order, as well as to track one’s calorie goals every day.
STYLE GUIDE
We created a style guide to follow.


INFORMATION ARCHITECTURE
Information architecture for the initial survey.

Information architecture for the health mode function.

INITIAL WIREFRAMES
INITIAL WIREFRAMES
We put together a low-fid prototype for the first round of playtesting.

INITIAL PLAYTEST
INITIAL PLAYTEST
We did a two-hour user testing session with our low-fid prototype.


INITIAL FEEDBACK
INITIAL FEEDBACK
These are the feedback we got after the playtest.

MID-FID PROTOTYPE
MID-FID PROTOTYPE
MID-FID PROTOTYPE
Based on the user responses to our initial wireframes, we updated the design and added several new features. Our goal is to incorporate these features without disrupting Uber Eats‘s existing functions and layout.

Survey

Restaurant and Order
![]()
Checkout

Checkout
SECOND FEEDBACK
SECOND FEEDBACK
These are the feedback we receive after the second round of playtest:
01. Health mode toggle should be turned on after the survey
02. Ordering page nutrition info still looks like buttons
03. Add/minus quantity button is confused as a part of special instruction
04. Nutrition information feels out of place after checkout. It would be better to incorporate it into the cart page.
01. Health mode toggle should be turned on after the survey
02. Ordering page nutrition info still looks like buttons
03. Add/minus quantity button is confused as a part of special instruction
04. Nutrition information feels out of place after checkout. It would be better to incorporate it into the cart page.
FINAL DESIGN
FINAL DESIGN
O1 Survey
This survey page is for the users to set up a profile and customize based on their dietary needs. A personalized health plan will be generated after filling out the survey. The users can also choose to import existing data from another nutrition app.

O2 Health Mode Toggle
After entering the main page, the notification guides the user to a button that can toggle on and off the health mode so that this new feature wouldn’t affect regular users. When the health mode is on, the app will provide information catered to the specific health plan including the filtered recommendations of healthy restaurants and dishes, health rating of the restaurants, nutritional information on every dish, etc. Compared to the existing healthy restaurant category feature, this new health mode feature makes finding healthy dishes easier and faster, therefore reducing possible temptations for diet eaters. One-click on the home page will instantly eliminate unwanted content.

O3 Restaurant and Order
When entering a restaurant page, there is a calorie count displayed for each dish. More detailed nutritional information is also provided when selecting a certain dish. In addition, the user can also see a nutritional information overview of all the items selected in the cart before checking out.

04 Checkout
When checking out, the user can see the daily remaining calories at the top and also a more detailed report of the diet plan generated based on the survey. The calorie information is also provided on the receipt in addition to the price. Users can easily keep track of their nutritional intake.

MOCKUP

