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.
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
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
Storyboard - Close-Up
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.
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.
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
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
27PX - SEMIBOLD, SF PRO DISPLAY
20PX - MEDIUM, SF PRO DISPLAY
15PX - REGULAR, SF PRO DISPLAY
Typography
UI elements
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.
