Recipe App UI/UX Case Study

Thousands of Recipes For You to Choose From, Discover New Recipes Based on Your Diet, Your Favorite Recipes in One Place.

Customize Ingredients in Every Recipe and Set a Timer When You Cook

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.

• 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.

• 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.

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.

Adults aged 25-60 who like to cook Indian cuisine while maintaining their health requirements.

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.

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.

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.

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.

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.

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.