Healthy Meals mobile app
UI/UX Design case study
Duration: 2 months
Project overview
Introduction
Product
A mobile app called Healthy Meals was created to make it easier for users to find and prepare wholesome meals that match their dietary preferences and objectives. Users may sort recipes by meal type, dietary preference, and ingredient to get everything from high-protein dinners to plant-based meals. Fit Meal also provides tools to assist consumers keep up their healthier choices, such as meal planning and grocery list generation.
Problem
Despite a growing understanding of the value of eating well, many people struggle to find convenient ways to include wholesome meals in their daily routines. It can be challenging to sort through recipes to find ones that are in line with dietary goals and restrictions because existing recipe apps frequently prioritize convenience and taste over nutritional value.
Goal
Create a mobile app with a user-friendly UI/UX that is visually appealing and encourages users to make healthier food choices by making it simple to access healthy recipes and helpful cooking tips.
Project overview
Introduction
My role
UI/UX designer leading the app. User research, strategy, usability testing, prototyping, visual design and branding from conception to delivery
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
User research
Project summary
The majority of interviewees claimed to still often eat processed meals and takeaway, which can result in a variety of health problems.
A new healthy recipes mobile app should be able to offer personalized solutions that prioritize nourishing meals without sacrificing convenience or flavor, according to the feedback gathered through research. This will make it simpler for people to make better food choices and enhance their general health and wellbeing.
Pain points
First impact
1
Time
Not having enough time to organize and prepare healthy meals.
2
Experience
Insufficient knowledge and abilities to prepare healthy meals at home.
3
Information
Finding recipes that have clear nutritional details and instructions is challenging.
User Personas
Persona 1
Sarah is a busy workaholic who often resorts to fast food or pre-packaged meals due to lack of time to cook at home. To help with this, she needs a way to save her favorite recipes for later and receive personalized recipe recommendations based on her dietary goals and culinary preferences.
User Personas
Persona 2
David needs to change his eating habits, since he was just diagnosed with high blood pressure. He wants to be able to search for recipes that are low in fat and cholesterol, learn new culinary techniques, and acquire cooking tips and tricks to make dinner preparation faster. He also wants to be able to filter dishes by nutritional information, such as salt level.
Ideation
Paper wireframes
I started outlining my ideas using the well-known design ideation exercise Crazy Eights to start the design process.
Ideation
Digital wireframes
I developed the first iterations of the app for nutritious meals. Users can browse, search, and save recipes with ease thanks to the user interface's simple, intuitive design, which was developed after some brainstorming and paper wireframes.
Prototype
Low-Fidelity Prototype
I made a low-fidelity prototype that linked the user flow of browsing recipes where users could add meals to their favorites lists and grocery lists for future purchase
Iteration
Mockups
I made design improvements based on the findings from the usability testing, such as giving a color scheme and a clear description of the meal with nutritional information for each recipe (calories, protein, fat, carbs etc.).
Also, I've added a ingredients calculator that is dependent on the number of servings the customer wishes to produce along with thorough meal cooking instructions.
Iteration
Mockups
Moreover, the live cooking block now includes the name and picture of the session's chef as well as the total number of online participants. Furthermore, rounding was made to the cards to more soft visual to the user.
UI Kit
Typeface
UI Kit
Color & Icons
UI Kit
Components
