Screen Shot 2023-04-17 at 3.10.33 PM.png

NutriMeal is a food delivery app that offers healthy restaurants for people who need to lose weight or maintain a healthy diet.

My Role

UX Researcher & Designer

Timeline

Mar 17 - Mar 24, 2023 (a week)

NutriMeal

Problem

Users who need to lose weight or maintain a healthy diet may not be able to control themselves to order high-calorie food when they open most food apps. They also don't have time to cook every day.

Outcome

Designed a mobile app that helps users look for healthy food. Provide a food ingredient list, which is used to help users calculate calories and check whether a meal meets health standards.

Design Process

Empathize

User Research
Survey & Interview

Define

Persona
As is Scenario

Ideate

Big Ideas

Features

Design

Low/Mid-fi Diagram
Design Syetem

High-fi Diagram

Evaluation

Usability Test

Empathize

Questionnaire

49

participants

Interview

participants

2

—— Main Findings ——

77%

of respondents mentioned that they always order tempting food on food apps. One participant said: "I know these food are unhealthy but I cannot control myself when l am starving".

62%

of respondents encountered issues while looking for a category of "healthy food" in most food apps. One participant mentioned that "Because most apps don't show the health category on the landing page, it's always difficult and time-consuming for me to find the health food category.

35%

of respondents highlighted how the lack of food ingredients had a negative impact on their experience with most food apps. One person mentions that "When I'm trying to lose weight, I have to look up the approximate calorie count of each meal l take".

Define

Based on my research findings, I designed a persona, Sofia, in order to highlight my target users and show their needs and obstacles.

I designed an as-is scenario map to show the experience of Sofia, which is useful to visualize the problems that target users encountered.

Ideation

Final Ideas based on feasibility and impact:

1. Add a food ingredient list for people who need to lose weight or maintain a healthy diet.

2. Add a second device: a smartwatch. Users could receive order notifications both on the iPhone and smartwatch, which improves their user experiences.

Usability Test & Evaluation

I conducted a usability test on my low-fi prototype. 2 participants used the food apps previously and they would like to maintain a healthy diet, one as a student and one as an data analyst. Before interviewing the two users, I introduced to them the purpose of my project. After that I conducted an interview with them about the low-fidelity design. Based on the results of the usability test, I improved these points on the mid-fidelity:

Low Fidelity Prototype

Screen Shot 2023-04-19 at 9.44.45 AM.png

Not accessibility: There is no voice input function on the search part.
Hero Banner is not clear and obvious.
There is only like but no rate on the food card.

Mid Fidelity Prototype

Add a voice input on the search part.
Put the hero banner on the top, which is clear and obvious.
Add a rate on the food card.

Design

Design System:

Font

HEADER 1

DM Sans, Bold, 36px

HEADER 2

DM Sans, Bold, 28px

HEADER 3

DM Sans, Bold, 18px

BODY TEXT 1

DM Sans, Regular, 16px

BODY TEXT 2

DM Sans, Medium, 14px

BODY TEXT 3

DM Sans, Regular, 10px

BUTTON 1

DM Sans, Medium, 16px

BUTTON 2

DM Sans, Medium, 14px

Colour

BACKGROUND COLOURS

#FFFFFF

#F6F6F6

MAIN TEXT COLOURS

#000000

#343839

#6C7075

Icons

Logo

SPECIAL COLOURS

#709053

#CDD582

#F5643C

#FDC73B

BUTTON 3

DM Sans, Regular, 12px

I chose green as the primary colour to convey a sense of health, freshness, and naturalness to my target users. Green is also a calming colour that can help reduce stress and anxiety, which is important when it comes to healthy eating. At first, I selected only the light green colour. However, the light green was not accessible in colour. Therefore, I decided to include a dark green shade.

In terms of typography, I chose DM Sans because it is a modern sans-serif font that is easy to read. It also provides a sense of modernity and trendiness, while its rounded terminals and minimalist design make it friendly and approachable.

Storyboard:

Clicked on "Chicken Tacos"

Clicked on

"Add to order"

Clicked on

"Proceed to checkout"

Receive notifications and move to a smart watch

When users placed the order, they would receive notifications both on the app and on the smartwatch. But Smart Watch is more convenient to receive notifications and check the status of the order.

Clicked on

"OK"

Waiting for the phone call

Receive your order

Complete your order

Reflection

Considering accessibility to guide design decisions is important

Through this project, I realized that aesthetics are important, but we should consider accessibility as our top priority. As a UX Designer, we should create a user experience beneficial for everyone regardless of whether they have permanent disabilities or temporary impairments. It’s impossible to create a user-centred design without empathy.
In the future, I will keep reminding myself that I am a UX Designer, I should put myself in a user’s shoes and walk through a user journey, trying to understand the possible gaps in user experience.