Cookmap : A cooking recipe app — UI/UX case study

User centric design thinking process

Secondary Research

Goals of Secondary Research:
Type of cuisine people prefer
Age group of the people
Availability of Ingredients
Types of problems in current applications

With these defined goals I started researching cooking blogs and websites and gained insights regarding the problems in the existing cooking applications. Cutting out the extra information I focused on the insights that would help me to create this project.

Secondary Research Insights:
More women cook in comparison to men and spend more time in the kitchen
Other than Indian cuisine, other countries’ food are also loved in India.
People who cook range from students o working professionals.
Existing apps suffer from problems relating to UI.

Primary Research

Questions that I asked the users:
How often do you cook?
What type of new recipes would you like to try making?
Why do you want to try these particular recipes?
Do you face any problems while you are cooking?
Which new recipe have you tried recently?
Did you face any difficulties while cooking?
What can be done to make your experience easier?
Will you try to use any cooking app and why?

After he interviews were conducted I gained some insights as to what problems users face while cooking.

Some of the user statements are,

“I want to try baking because I love sweets and baking seems challenging to me and I like to challenge myself.”

“I looked for the recipe but there were sites which gave too much information and did not provide the recipes directly which was a bit frustrating.”

“If I see a recipe online, I have to look for the things that if I have them or not. If not then I get confused where to buy them.”

Affinity Mapping

Affinity Diagram

Insights obtained:
People try to cook what they like, find challenging or to get a healthy lifestyle.
People face problems related to measurements and ingredient availability.
Not giving the proper information before the recipe can be confusing but providing too much information can also be frustrating.
People will try to use a cooking app if it will fulfill their requirements and cater to their needs.

User Persona

Primary Persona

User Experience Map

I started for planning of the cooking and thought about the steps that the user will have to take to go along with a particular recipe and finish cooking.

User Experience Map

Identified areas of improvements are,
While looking for particular food, provide genuine user reviews and ratings so that user can choose accordingly.
In the list of ingredients, give proper amount of those ingredients in front of their name.
On the recipe page, provide photos and videos so that user can understand clearly.

User flows

Task 1 : Finding a recipe — Users will login or sign up to the app, on the home screen, choose a particular cuisine with the help of photo and name and then choose a recipe.

Task 2 : Search based on availability of ingredients — Users can search for the recipes based on the ingredients they have readily available. So they can either choose an ingredient category or take photos of the ingredients and then select particular ingredients and thus a recipe.

Task 3 : Buy ingredients — If the users are missing the ingredients for a recipe, they can buy those ingredients by adding them to the cart and buying them.

After completing the task flows, I created user flows considering all possible scenarios that might happen when the user will interact with the app.

  1. Find a recipe

2. Search for a recipe

3. Buy ingredients


Low fidelity wireframes

Hand drawn low fidelity wireframes
Digital low fidelity wireframes

High fidelity wireframes

High fidelity wireframes

Style Guide — Color and Typography

Now, for the typography after exploring lots of typefaces, the geometric sans-serif typeface ‘Poppins’ was chosen because of its legibility and distinct letter forms. Also this sans-serif typeface is cutting edge and has the advantage of good readability on all types of devices.

Title — Poppins Semibold, 36
Heading — Poppins Medium, 20
Body — Poppins Regular, 15
Button — Poppins Semibold, 18
Overline — Poppins Regular, 12

Final Mockups

Moderated Usability Testing

With keeping these goals in mind, I created a few tasks and prepared a questionnaire to follow during the testing session. Some of the scenarios given to the participants are,

Choosing a cuisine
Finding recipes easily
Search by ingredients availability
Buy the ingredients for a recipe

Scenario #1

Scenario #2

Scenario #3

Testing Insights

Final prototype


Conclusion and Takeaway

Read the full article here

Leave a Reply

Your email address will not be published.

ChatGPT meets UX Research: unlocking new frontiers

ChatGPT meets UX Research: unlocking new frontiers

We will face a double challenge as Generative AI progresses at astonishing

The Key to Scale Your SaaS Product

The Key to Scale Your SaaS Product

Table of Contents Hide IntroductionWhat is a Tech Partner?

You May Also Like