Recipe App UI/UX Case Study
![Healthy Indian Cooking](img/healthy-indian-cooking/01hic-case-study@2x.png)
Inroducing Healthy Indian Cooking
![Healthy Indian Cooking](img/healthy-indian-cooking/02hic-intro@2x.png)
![Healthy Indian Cooking](img/healthy-indian-cooking/03hic-intro@2x.png)
Thousands of Recipes For You to Choose From, Discover New Recipes Based on Your Diet, Your Favorite Recipes in One Place.
![Healthy Indian Cooking](img/healthy-indian-cooking/04hic-intro@2x.png)
Customize Ingredients in Every Recipe and Set a Timer When You Cook
Overview
Healthy Indian Cooking is a Recipe app that specifically deals with the Indian cuisine. There are thousands of healthy recipes to choose from that open the users’ eyes to the possibilities of Indian cooking while also maintaining their lifestyles and diet. The app will allow users to filter search results based on their diet preferences and also give them the option to substitute ingredients within the recipe itself.
I was the sole designer & researcher for this project and the duration was 2 months.
The Problem
- There is a huge market gap when it comes to healthy Indian recipes.
- Users with dietary restrictions have a hard time finding recipes they can cook.
- Users who find a recipe they like don’t have options to substitute ingredients within the recipe.
The Solution
- Bridge the market gap by creating an app that deals specifically with healthy Indian recipes.
- Create an inclusive app where people can choose recipes based on their dietary needs.
- Allow the users an option to substitute protein/dairy for each recipe.
Design Process
![Healthy Indian Cooking](img/healthy-indian-cooking/05hic-design-process@2x.png)
User Research
While conducting research, I came up with a list of questions to interview real users. This was done to better understand their needs and experiences. While doing so, I found some patterns that emerged:
- All of my participants didn’t like reading too much information before a recipe.
- All had specific dietary requirements and couldn’t always find recipes that matched.
- All needed a better way to save their favorite recipes and keep them all in one place.
- All of them liked Indian food and prioritized healthy eating.
Target Audience
Adults aged 25-60 who like to cook Indian cuisine while maintaining their health requirements.
User Personas
![Healthy Indian Cooking](img/healthy-indian-cooking/06hic-user-persona@2x.png)
![Healthy Indian Cooking](img/healthy-indian-cooking/07hic-user-persona@2x.png)
![Healthy Indian Cooking](img/healthy-indian-cooking/08hic-user-persona@2x.png)
User Flows
![Healthy Indian Cooking](img/healthy-indian-cooking/09hic-user-flow@2x.png)
Low Fidelity Sketches
![Healthy Indian Cooking](img/healthy-indian-cooking/10hic-low-fidelity@2x.png)
User Journey: Testing Out my Prototype
![Healthy Indian Cooking](img/healthy-indian-cooking/11hic-user-journey@2x.png)
Mid Fidelity Screens
![Healthy Indian Cooking](img/healthy-indian-cooking/12hic-mid-fidelity@2x.jpg)
Mood Board
![Healthy Indian Cooking](img/healthy-indian-cooking/13hic-moodboard@2x.png)
Style Guide
Logo & Icons
![Healthy Indian Cooking](img/healthy-indian-cooking/14hic-logos@2x.png)
The logo is a line design with a fork and spoon representing food. It also has leaves to show freshness and health. The lines in between form a ‘H’ for Healthy Indian Recipes. The Text of the logo is in the Lato Black font.
![Healthy Indian Cooking](img/healthy-indian-cooking/15hic-Icons@2x.png)
The icons I have created are thin outlines to embody a clean and modern feel. The standard size for the icons is 24px for XS and S screens, for M and L the size should be 40px.
Typography
![Healthy Indian Cooking](img/healthy-indian-cooking/16hic-typography@2x.png)
The typeface used for the App is Lato. To keep the clean feel of the app, the Bold options of the font haven’t been used. The thickest version used is Medium for the buttons. For M and L screens, the text should be scaled accordingly.
Color Palette
![Healthy Indian Cooking](img/healthy-indian-cooking/17hic-colors@2x.png)
Key UI Designs & Styles
![Healthy Indian Cooking](img/healthy-indian-cooking/18hic-design-styles@2x.png)
Imagery
![Healthy Indian Cooking](img/healthy-indian-cooking/19hic-imagery@2x.png)
The Imagery used should be professional, appetizing photos of the food. It should feature the main dish with side dishes (like dips, sauces, fruits and vegetables) around it to increase its visual appeal. All the images should have warm tones (red, orange or yellow) to highlight the Indian spices and styles that are used in them.
Recipe Card
![Healthy Indian Cooking](img/healthy-indian-cooking/20hic-recipe-card@2x.png)
Final Screens
![Healthy Indian Cooking](img/healthy-indian-cooking/21hic-high-fidelity@2x.png)
![Healthy Indian Cooking](img/healthy-indian-cooking/22hic-high-fidelity@2x.png)
![Healthy Indian Cooking](img/healthy-indian-cooking/23hic-high-fidelity@2x.png)
Project Retrospective
Challenges
I came across some roadblocks while designing by responsive screens. I was confused and had to watch some tutorials to figure out different breakpoints for my responsive web app. In the end, although time consuming, I was able to design all my screens so that they were responsive to all breakpoints.
Takeaways
After lots of testing, I believe that I have created an app that solves the problems users face with existing recipe apps. By adding customizable recipe ingredients and also a timer, I have managed to give my app new features that the ones already in the market lack, while using a familiar UI design.
![Healthy Indian Cooking](img/healthy-indian-cooking/24hic-thankyou@2x.png)