︎






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

My Contribution

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.






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



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








INITIAL PLAYTEST 




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









INITIAL FEEDBACK




These are the feedback we got after the playtest.











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







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.








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