Diet Delivery
A food delivery app that delivers healthy food based on your diet plan.
Prototyping tool: Figma
Illustrations: Adobe Illustration
Types of project: Individual, coursework
Timeline: 3 months
Tags: Usability testing, UI design
PROBLEM
Students do not have time to prepare meals and prioritize health due to their busy schedules.
I stayed in an off-campus apartment during my graduate studies. However, I found it challenging to have the time to cook and meal prep due to my schoolwork and completing my thesis. With a limited budget, eating out was not a choice so I tend to skip meals. This led to emotional stress and poor health outcomes.
OBJECTIVE
This app focuses on helping people to eat healthy food based on their diet goals by delivering meals to their doorstep.
It also helps track your food intake, such as calories, proteins, fats, and sugar levels. Users can save cooking time by ordering healthy food from the comfort of their homes.
RESEARCH PART 1: INTERVIEWS
Identifying opportunities through interviews with 9 graduate students
To determine if other graduate students shared similar concerns about making the time to cook while prioritizing health. I created a list of questions to better understand their relationship with healthy food and time management. I narrowed it down to three broad questions that I thought would give me the most insight into the problem space and conducted 15-minute interviews with nine graduate students from Iowa State University.
1. How often do you find time to cook a meal for yourself during a typical week?
2. What are the challenges when it comes to making time for cooking?
3. What factors influence your food choices? Why?
Findings
Whether it is cooking or eating out, convenience is the main factor followed by nutrition. Students had an inclination to pay more for healthier meals.
All interviewees emphasized that their decisions were heavily influenced by time and convenience. One interviewee overspent his/her budget by eating out regularly, which led to obesity. Contrary to my expectations, they didn't seem to stress as much about their spending. They were willing to spend more on healthier meals.
HMW STATEMENT
Turning insights into concepts
I took the insights from my interviews to create a how-might-we statement and explored a few potential solutions. After exploring my different options, I thought this one catered best to my target audience. Students are often tight on time so they need meals that are quick and easy, despite cooking or ordering them, yet able to achieve their nutrition goals.
HMW provide nutritious meals for students to save time based to achieve a positive health outcome?
Deliver food or groceries to their doorsteps and track food intake
RESEARCH PART 2: MARKET ANALYSIS
Nothing on the market provides a combination of food and grocery delivery while tracking food intake
A competitive analysis was conducted by looking at food delivery and healthy food apps such as Diet, Thistle, and GetFit. However, they only deliver meals or track their food intake. InstaCart, Hungryroot, and Hello Fresh provide grocery and food delivery, but it does not track food intake. None of the apps provide a service where users can get meals or groceries and track their food intake at the same time.
DESIGN
Turning ideas into high-fidelity designs
From the market analysis, I looked at a few apps that provide meal delivery for UX flow and UI design inspiration. Information architecture was created followed by sketches focusing on delivery and food intake tracker. The sketches were transformed into high-fidelity designs.
VALIDATION OF MY DESIGNS
User testing of the Diet Delivery app among five university students
The participant's ages range between 20-27, with prior experience using food delivery apps. They were required to complete the 12 task lists provided by me. The purpose of user testing is to evaluate:
-
If the navigation and UI were intuitive
-
If the features were useful
-
How they felt during the process
User testing site at Innovation building meeting room with one of the participants, Iowa State University
DATA ANALYSIS: PART 1
A few highlights of what participants liked about the app
After the usability testing, a user interview was conducted, and participants were asked to provide feedback on the overall experience. When asked what they liked about the app, they responded:
"I like how the app gives recommendations on the types of diet based on my health goals." -User 02
"The information of the app was well-informed and it was very intuitive." -User 03
"I like that I can choose to delivery the food or grocery because I cook during the weekends." -User 05
DATA ANALYSIS: PART 2
A few highlights of what participants DO NOT like about the app
When asked about what they disliked about the mobile app, participants indicated that the UI design was the main issue that created usability issues. The screens were redesigned based on user feedback to improve the UI design of the Diet Delivery
1. Chicken salad page
BEFORE
"The picture was too large, and I could not really see the 'back' button." - User 01
"I think the food nutrition information should be on top since this is an app focusing on diet."- User 04
AFTER
Made the image smaller with rounded corners for a more friendly approach
Switched the nutritional information to the top order in the hierarchy
2. Activity page
BEFORE
-
"The food intake chart and numbers look too complicated to understand. It made it look not that intuitive on the first impression" -User 03
AFTER
-
Changed the chart into a more intuitive design for users to analyze and understand the data easily
3. Track order
BEFORE
-
"I did not see the "Track your order" because my eyes focused on the green button at the bottom" -User 01
AFTER
-
Moved the track your order as the call-to-action button and users are still able to go to the home page by clicking the "home icon" on the navigation bar
RESULT
A redesigned diet delivery app was created based on insights gathered from mixed-method research. The app provides nutritious food or grocery delivery + food intake tracker for students to set their health goals to achieve a positive health outcome
After the user testing and multiple iterations exploring different layouts, a prototype video was recorded:
STYLE GUIDE
Logo design concept: A clear, natural, and friendly look
The logo design is a combination of a car and a dome food plate with a cover. The color green is used because it symbolizes leafy greens vegetables, which promote health and wellness for people. All illustrations are created on Adobe Illustrator.
_edited.jpg)
Digital logos (rough draft)
Final logo design
Welcome screen UI design
Welcome screen UI design
Logos on Adobe Illustrator
REFLECTION
The long process of researching, testing, and repeatedly honing my designs has led to a project I'm proud of, but still, I believe there is a lot of room for improvement.
What did I learn?
-
Brand identity is as important as designing the layout of the mobile app. The typography and color reflect the approach of the app.
-
It is good to have a fresh pair of eyes to provide feedback on the designs
What can be better?
-
I'd like to work more on my research method by recruiting a variety of samples
-
Samples include graduate and undergraduate students to see if the response would be different
What was fun about it?
-
It was a fun experience going through the end-to-end process, from identifying the problem and conducting research, to designing the final UI screens
-
It was fun to make the illustrations of the welcome screen and coming up with the logo design