Health Savvy
Project overview
Health Savvy is a healthy recipe responsive web app that offers personalized recipes for people who follows a strict diet due to their underlying health conditions such as diabetes, obesity, heart problem, kidney diseases, etc and who have dietary restrictions. Easy Meal planning with shopping lists and plenty of video-guided recipes make user’s life a lot easier.
Problem
Most people who have underlying health conditions and dietary restrictions can not find plenty of personalized recipes. Not able to keep track of their portions intake and frustrate with a return trip to stores if any ingredient of the recipe is missing at home.
Solution
Home-cooked meals meet more of the guidelines that define a healthy diet. Health Savvy offers users to find recipes easily according to their health issues and dietary restrictions. Users can also avoid any ingredient that they don’t like to get in their recipes. Easy meal plan option to track portion intake and time-saver by not standing in front of the fridge or pantry deciding what to cook. A grocery list that group foods by category, helps users to remember the ingredients and avoid a return trip to the store.
Responsibilities
User Research
UX Design
Visual Design
client
CareerFoundry
Tools
Sketch
Invision
Photoshop
Design Process
The design process is based on User-centered design (UCD) where user is the center of the design and development process.
Discovery
Competitive Analysis
Analyzed similar web apps Yummly and Forks over Knives. I did the analysis based on their key objectives, Overall strength, Market advantage, SWOT Aanlysis and UX Analysis.
User Research
5 w's for Health Savvy
What
Users can choose a diet and then select a guided video recipe categorized under breakfast,lunch,snack and dinner or can directly search a recipe by the name or the ingredient. Users can also go for a weekly/monthly diet plan as per their health issues by an expert nutritionist or create by themselves. They can also make a shopping list.
Who
The app is for the people who want to follow a diet to resolve or prevent their health issues and a monthly/weekly meal planner to follow.
When
The users will be engaging with the product every day when they plan for a meal. They will also use the app to follow the guided recipe video if they don’t know how to make the food.
Where
The user will use the app at home when they r preparing the meal through their phone, iPad, or computer. At the grocery store through their phone or iPad while buying the ingredients required for the recipe.
Why
In one platform the users can search a recipe, make a weekly/monthly customized or expert made diet plan, create a shopping list and buy the ingredients through the app.
User Interview Synthesis
I interviewed three participants to know about their eating habits, If they have any underlying health issues or they follow any specific diets, how often they cook at home and where they look for a recipe. I tried to identify their needs and goals, pain points and frustration.
- All the participants cook their meals very often and they all follow a healthy diet for their health-related issues.
- People these days are following a healthy lifestyle and prefer to cook their meal at home.
- Noteworthy quote(s) “ I want to eat healthy food but it has to be tasty”.
- Frustration - The recipes do not mention the nutritional value of the ingredients and the calorie intake.
- Needs and goals - They all are having some health-related issues and finding recipes with nutritional value is important for them.
User Persona
Concepting
User Stories and Feature Requirements
MVP : Minimum Viable Product
MVP Objective
This app will allow users to create personalized recipe recommendations by choosing a healthy diet and filtering out their dietary restrictions or dislikes. They can also directly search a recipe by the name or the ingredient or by cuisine from a wide range of recipes. Users can also go for a weekly/monthly diet plan as per their health. They can also make a shopping list.
Goal
The main goal of this Minimum Viable Product (MVP) document is to gain validation from target users that such an app will be used to to make a meal plan or find recipes beneficial for their health-related issue.
User Flows
I created user flows to demonstrate the steps that will help the users to complete tasks.
Ideate
Exploratory sketches
Created low-fidelity prototypes using crazy 8 methodology to highlight the high-level functionality of the core features of my app.
Paper Prototype
Rapid prototyping gets users involved early on in the design process to ensure the designs are suitable for them and actually solving their problems. So i created a interactive prototype using Mavel app and tested by three users.
Testing
User Testing
Early Usability Testing
I conducted usability testing to get a better sense of how I could improve designs for my app. I did a few interviews in person and a few over skype. I gave them a few scenarios in which they were required to take certain actions. I evaluated the ability or inability of users to complete specific tasks and I watched, listened, and took notes.
I gave them two tasks to perform.
- Open the app and personalize the recipes according to your likes and dislikes.
- Create a Meal plan and add recipes to the meal plan.
Outcome of the Test
Design
MoodBoard
After looking at few sources of inspirations I created a mood board to get a more concrete visual direction for my app.
Orange enhances a feeling of vitality and happiness. it draws attention and shows movement but is not as overpowering. Citrus orange is associated with healthy food. It stimulates appetite and is warm, vibrant, and flamboyant.
Green symbolizes health, new beginnings, and wealth. Green is the easiest on the eyes and can be used to relax and create balance in a design. Green is usually used for eco-friendliness, natural, organic, healthy food choices. For those who are conscious about healthy eating, this color is appealing.
Style Guide
Final Designs
Sign Up
Landing Screen
Customized Recipes
Search Results
Recipe Details
Meal Plan
Shopping List
Menu Screen
Responsive Designs
Interactive Prototype
Click on the screen to find the hot spot.
Retrospective
I designed the app in a way that offers personalized guidance in every step with great customized meal plan option and shopping list which improve life in kitchen.
What went well?
I got valuable feedback from a few potential users during an early usability testing session with the paper prototype. I analyzed the findings and incorporated the solutions in my design. Since I conducted user testing using a paper prototype, it was easy to fix them and saved my time. The process of designing this app helped me to understand various UX concepts and how to incorporate human-centered approach in my design.
- Skills: Early usability testing, rapid prototyping, iterative design.
- Processes: User-centered design.
- Solution: Always do user testing at the early stage of the design process.
What didn’t go well?
I spent long hours in searching images that fit into my design as images were integral part of the website. Because of that I made few compromises on other aspects of my project.
- Skills: Use of proper media
- Processes: Prioritizing quality, polishing designs.
- Skills gap: Time management and inefficient search.
- Solution: Find good sites containing high resolution images to use in different breakpoints. improve time management skill.
What can be improved?
The logo and icons used in the project can be better.
- Skills: Logo and Icon design.
- Skills gap: Adobe illustrator and other designing tools.
- Solution: Learn Adobe illustrator to create better logos, icons, and illustrations.