In our current generation, more people are living a busy life with less time to plan for the activities at home, especially for what to cook. In families, the parents are finding more time to spend in activities such as taking care of their children and working a job, and would like to identify some new recipes to impress their children and spouse. But they have limited time and resources to discover a recipe. In the life of Bachelors, they find themselves less involved in cooking in the kitchen. They try to identify quick and tasty meals.
As a part of 3 month UX/UI design from scratch course at Designerrs Academy, I worked on this project. The problem brief was provided by Designerrs and I completed it under the guidance of a mentor.
As the only UX/UI Designer on this project, my responsibilities included everything end-to-end, following all the aspects of design thinking. Right from conducting user rtesearch, defining the problems, brainstorming solutions to creating wireframes and finally conducting usability tests, I designed a functional prototype.
I followed the user centric design thinking process to design a solution for this problem. It consists of the following five phases.
To design the best solution, I had to empathize with the users. By conducting both secondary and primary research, I was able to understand the user’s actual needs and pain points.
Secondary Research
Before the actual research I defined the goals of my project for a better understanding of the scope of the problem.
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
Now that I had the secondary research insights in hand, it was time for the primary research to know about the experiences of the actual users themselves. So, I conducted the user interviews by first creating a questionnaire based on the context of the problem and then I recruited 5 participants aging from 20 to 40 for the interview.
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.”
In the first phase, I empathized with the users. Now based on my research insights, I have to establish a clear idea of exactly which problems to solve for my users.
Affinity Mapping
After the interviews I gathered the user statements and grouped them together into 8 groups. These are: Frequency of cooking, Goals, Motivations, Pain points, New recipe tried, Problems when trying new recipes, Does, Try a cooking app. This helped in uncovering the major common pain points of the users and prioritizing them.
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
From the insights gathered, I observed common patterns of goals and pain points for the majority of the target audience. Putting those insights, I created one persona which will be my primary persona.
To find the possible solutions to the users problems, first I created the user experience map to know the actual journey the user has to undertake and the obstacles they have to tackle. And later I created the user flows for the app to fill the gaps.
User Experience Map
Now that I had the goals and pain points of the users, I created a user experience map to look at the journey and find out exactly where these pain points lie to create a better experience for the users.
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.
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
With the understanding of how the user’s journey was using the experience map, I created task flows and later user flows for the app that will fill the gaps in the physical journey of the end user.
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.
- Find a recipe
2. Search for a recipe
3. Buy ingredients
Sitemap
Observing the created user flows, I was able to identify the main entry point screens. Using those screens as a base and taking reference from the user flows, I was able to create a sitemap for the app which helped me to understand the overall flow and the structure of the application.
In this fourth phase of the design thinking process, I started creating low fidelity wireframes. After many iterations, I finalized one version and converted them to high fidelity wireframes. I also prototyped them so that it can be tested out with the users in the testing phase.
Low fidelity wireframes
I created the low fidelity wireframes before getting to the final ones. Many iterations were done in these wireframes before they were finalized.
High fidelity wireframes
After finalizing the low fidelity wireframes, I added details to the existing wireframes by putting the content information and upgrading the components.
Style Guide — Color and Typography
I wanted to evoke a feeling of excitement,hunger and craving in the users while using the app. Also I wanted them to have a pleasant experience. So, I created a moodboard accordingly and hence the color palette was chosen. And as my case study is a cooking app, hence I chose Orange as my primary color as it is known to be an appetizing color. I want the users of my app to be excited when they try a new recipe and have fun during the process.
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
Applying the style guide to my final high-fidelity wireframes, I started creating the UI mockups.
It was time to test the live prototype with potential users and check how they respond to it. Based on the testing insight it is decided if any alterations are needed in the mockups.
Moderated Usability Testing
After creating the final screens, I conducted a moderated usability testing with 5 participants that fit my target audience. I wanted to see how the users perceive the apps main features such as,
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
You want to make Macarons. Try to find the recipe for it.
Scenario #2
Try to search for recipes having apple as an ingredient.
Scenario #3
You are missing some ingredients for the recipe. Try to add the eggs and sugar to the cart and place an order for these ingredients.
Testing Insights
The users found the app easy to use. There were some missing points that I was not aware of during the design phase.
The major insight was that on the search page a filter option was not available. So, I made the changes accordingly.
Final prototype
Conclusion and Takeaway
This was my first-ever UX project. It was fun to work on the whole design process which helped me to learn and grow as a designer. A few important things I have learned through this journey are:
Design Thinking is an iterative process, even after the designs are created we need to go back and think about the users and gain feedback.
The process is as important as the design itself. Only when our thinking process is set in the right direction, then we can make the right design decisions and hence the right design.
Read the full article here
