Artboard_edited.png

eats.

CONCEPT | BRANDING | MOBILE UI/UX

Healthy Food App Design

Date

Jan 2021 - March 2021

Role

UI UX Designer | Product Designer | Brand Strategist

Tools

Figma, Photoshop

What is eats?

eats. is a special food app for people that are suffering from gastritis-related problems, those with allergies, or simply on a diet. Located in Abu Dhabi, UAE, this app allows people to find healthy meals near them. No more worries and reading the labels. Simply put your location and see what options are available. 

MacBook Pro - 2.png

Problem

The target customers of eats. are located in the Abu Dhabi area and lack the time or skills necessary to prepare a healthy meal. 

Goal

Our goal was to design an app that is simple for all users - including non-native English speakers - that allows them to easily order fresh, healthy dishes.

My role

​My role in this project as a UX designer was to take ownership of the app’s design, from concept to delivery. My responsibilities included: user research, wireframing, prototyping, usability testing, iteration, and the creation of a final high-fidelity prototype.

Research

We conducted interviews with target users, then distilled what we learned into actionable steps. We used the insights we discovered to identify pain points our users were experiencing. We entered our research with a set of assumptions, but those assumptions changed as we spoke to real people who deal with the topic we were researching.

Meet the Users

Primary

Name: Kate

Age: 25

Occupation: Personal Assistant

Location: Abu Dhabi, UAE

Kate is a Personal Assistant working at a consulting firm in Abu Dhabi, UAE. Kate has to stay on a strict diet due to her health-related issues. She doesn't want to spend her time cooking and grocery shopping and prefers to order food from nearby restaurants. She struggles to find any healthy food options at the restaurants nearby.

Secondary

Name: Alex

Age: 35

Occupation: HR Specialist

Location: Abu Dhabi, UAE

Alex is an HR Specialist working for a big company in Abu Dhabi, UAE. He enjoys spending time with his friends and traveling. He recently discovered that he's gaining weight and wants to become fit. Jack doesn't know how to cook a nice meal apart from the eggs and sandwiches. He looked for healthy meal options for deliveries but didn't find anything.

Pain points

The app is not colorful enough to be engaging​

Most users struggle to identify the items they want and have difficulty ordering them

Users want the option to order based on dietary needs and restrictions

Non-native English speakers have trouble ordering food

The app needs to do more to engage users and get them excited about the eats. brand

Observations_edited.png

Opportunity 

​​The information we uncovered helped us realize we needed to do more to make ordering easy and engaging for busy users like Kate, and more usable for non-native English speakers like Fahad. Once we realized this, we had a clearer idea of how to move forward.

Preparing the journey

Brainstorming

Close-Up.png

Storyboard - Close-Up

Crazy Eight.png

Crazy Eight

User flow

We constructed a user flow of what a basic start to finish journey looks like while purchasing an item. This helps us in understanding ways users can interact with the product, as well as allowing us to see navigation through user goals.

User flow.png

Primary Goals

Secondary Goals

Preparing the journey

Wireframing & Low-Fidelity Prototyping

After sketching out some wireframes and thinking through the preliminary flow, we reviewed what was necessary, unnecessary, and what areas needed improvement. We poured a lot of our time into this step to make sure we had the finishing touches on the underlying UX before moving onto the visuals.

Wireflow.png

Study type

Unmoderated usability study

Participants

Five participants, each completing the study individually

Usability study

Location

Abu Dhabi, United Arab Emirates, remote (each participant went through the usability study in their own home)

Length

Each session was 5-10 minutes, based on a list of prompts

Results

Users had difficulty ordering items for specific diets, such as gluten-free, and non-native speakers had difficulty understanding the ingredients. 

Final Design

Frame 11.png

The Challenge

Create a vibrant, customer-oriented mobile app for people on a diet, those with allergies or health-related, that will allow them to easily order fresh and healthy meals. 

Solution

01

The UI consists of a neutral fresh blue color scheme with the exception of black signifiers. Using color sparingly throughout the application's interface allows for the items to be the main focus during user engagement.

Solution

02

While eats' primary audience is intended to be keyboard enthusiasts, those outside of the keyboard arena need to be able to use the app as well. With recognizable iconography, intuitive gestures, and a linear purchase process, we feel that eats has achieved just that.

Solution

03

With payment method and shipping specifics being accessible within a single screen, it doesn't allow for the user to second guess their purchase after the review screen. This design allows for minimal screen usage and quicker checkout.

Style Guide

Combining fresh colors to create eats' signature gradient helps to create a calm and healthy atmosphere. The home page feels juicy and welcoming enough to draw the user further in. A simple and modern design makes a customer relax and enjoy an online ordering experience.

Colors

BUTTONS

#15B3BD

BACKGROUND

#FFFFFF

NAVIGATION

#E5FAFC

ACCENTS

#0E757C

Frame 12.png

27PX - SEMIBOLD, SF PRO DISPLAY

20PX - MEDIUM, SF PRO DISPLAY

15PX - REGULAR, SF PRO DISPLAY

Typography

UI elements

Frame 18.png

Takeaways

While designing the eats. app, I learned that the first ideas for the app are only the beginning of the process. Usability tests and peer feedback influence each iteration of the app. As time goes on and users continue to give feedback, future improvements will surface and become more clear, and the product will continue to get better. I’m thankful to people who contributed to the design of this app for their support and collaboration. Moving forward, I would like to conduct another round of usability testing to validate whether the pain points my users experienced have been fully resolved. This would validate that all of the updates the team made fully met the goals of the project. 

MacBook Pro - 1.png