Carla Pan

UberEats - Health mood 

UI/UX Design
Case Study

The UberEats Health Mode is an app that targets health food lovers and diet eaters. UberEats now offers a health mode targeted at healthy food lovers and dieters. Users can order dishes customized for their favorite fitness plan.  Users could order food based on their needs on the app and customize their fitness plans. The app is mainly designed for those who have the requirement for fitness. Users could create their calories and add the table of food or measurement.


Project Time: 6 weeks 
Project Team: Carla Pan, Jiayue Gou, Jasmin Liang

& Insights

We began with an online survey that generated 32 responses and conducted in-depth interviews with five people within our expanded network. We knew a better answer with their diet plan and daily activities.

Key insights:
  • 65% of survey respondents feel hard to resist those high calories food when on a diet
  • 88% of respondents would be interested in seeing the app's nutritional information and calorie counts.
  • 72% of respondents used food delivery apps more than three times per week during COVID-19.

Using these insights, we crafted a persona, Natalie. 
To capture the pain points and frustrations of our target users.

Initial Wireframes
& Testing

We then sketched low-fi screens,  just the main features, in a simple hand-drawn style to assemble the onboarding process steps. Then, We did 2 hrs of in-class User Test Feedback for our low-Fid.

In-class User
Test Feedback
  • Better division between calory and payment information on the checkout page.
  • Add a separate page for nutrition / Daily intake information after check out.
  • Questionnaire in the beginning to accommodate different diet needs.
  • Highlight the health mode feature when the user first enters the home page.
  • Focusing on dishes instead of restaurants.

High Fidelity Layout

With our user flow iterations complete
it was time to define the visual style and move into hi-fi.

Survey Page
  • When users open the app, the first page that comes to their minds is the essential introduction to the app.

  • Next, users could customize their daily meal goals. Users must choose the tags for themselves regarding users particular nutrient goals.

  • At the top of the app, users can choose whether they need to turn on the health mode or not have it.

The Redesign

Add Dishes

  • "Order again" intends to lure customers into ordering the food with vivid pictures.

  • Users could also add toppings that show the calories o each topping.

  • When users continue to click to know more about the food they want to order, it will show more specific information about the food, such as the total calories of the dish and the components of the nutrients.

  • The essential components such as the kilograms of carbohydrates, proteins, and fat are shown so that users know more about the food.

The Redesign

Check Out Page

After completing all the steps, it comes to the checkout process with the name "Go to Check."

  • At the top of the page are the remaining calories that users will have.

  • At the bottom of the page, there are specific details of total calories and goals. If users confirm the information, they will go to the next step.

  • There will be a list of the information about what customers order. Such as the calories of food and daily goals of calories, and the percentage of the food that occupies all calories of the day.

  • Below, the food shows the amount of each nutrient and how much they occupy the whole nutrients.