Cover
1

About Cookin

Cookin is a total solution for recipes where users can make their favorite food within a minute. It allows users easily find their recipes by searching for food ingredients, cooking time, difficulty level and categories etc. They can also add their own recipes,  save favorite ones and add all the ingredients into shopping bag to have them delivered to home. It gives them the freedom to customize their dishes with detailed instructions which help them cook easily.
Role
I worked individually on UX/UI design. My responsibilities included conceptualizing, user research, competitor analysis, identifying features of the app, developing user flow and site mapping, wireframes, usability test, prototyping and visual design etc.
Tools
Sketch, Adobe Photoshop, InVision, Usability Hub, Principle
Timeline
Sep - Nov 2021
mockup
Validating the Problems
  • I have no ideas of what to cook.
  • How can I make my food what I have in my fridge?
  • How to instantly finds matching recipes?
  • Does cooking take me a lot of time?
  • How can I prepare the ingredients in the recipe?
  • How can I search recipes with ingredients or matching my fitness goal?
  • How can I share my home made recipes?
Design Solution
  • Organizing and categorizing the recipes so that users can easily find the right recipes.
  • Recipe suggesting based on ingredients, diet preference and searching history.
  • In-App grocery shopping to save users’ time.
  • Adding specific categories to meet their special needs.
  • Showing the nutritions and calories for fitness and healthy purpose.
  • Step by step video instruction.
The Challenge
The app design included the comprehensive and diverse functionality which had to be presented to users in a simple and clear way. I had to analyze and prioritize all the points, as there was a high risk of overloading the screen.
2

Design Process

As I created the project from scratch, I defined some particular stages which are necessary to go through in order to get nice result.
design process
3

User Research

At this stage, I aimed to understand my users' needs and behavior by breaking down the research into clear objectives. I surveyed 8 people to identify their struggles when searching for recipes online, gathering key insights.
Survey Insights
Most of them choose to cook at home because they think it’s more healthy and economical.  Some of them are vegetarian or having certain health issue. Some of them don't want to invest much time in cooking, due to lack of time.
key quotes from users
“we are vegetarian parents and my child has cows milk protein allergy so I need to look for recipe suited for allergy kid.”

“Video instruction would be nice to have but it should be short. “

“I only browse for recipes to try new things, but normally I cook the same stuff over and over.”
4

Persona

persona
persona
persona
5

User Stories

Based the persona, I created 3 user stories to identify the key features and user flows.
“As a user who is a vegetarian and has a child with milk protein allergy, I want to be able to easily find these specific recipes, so that I can cook under our strict dietary requirements.
Allow users to refine their searches for special diet and health purpose.
“As a user who is a vegetarian and has a child with milk protein allergy, I want to be able to easily find these specific recipes, so that I can cook under our strict dietary requirements.
Allow users to search recipes with difficulty level.
“As a user who is a vegetarian and has a child with milk protein allergy, I want to be able to easily find these specific recipes, so that I can cook under our strict dietary requirements.
Allow users to add the recipes to their favorite list.
6

Lo-Fi Wireframe

In this phase, I conducted Crazy 8s method to sketch out ideas and explore more possible solutions. The methodology is simple but effective:  Roughly sketch eight different design solutions to the same design problem in eight minutes. Then select the best design solutions for further iterating.
sketch
7

Usability Test

The goal of this test is to assess the usability for users interacting with the recipe application Cookin for the first time on mobile. I would like to observe and measure if new users understand the navigation, how easy is to complete basic initial functions such as searching for recipe, using filter, adding recipe to favorite list and add ingredients to shopping list.
Objective

Find out if participants can easily reach to the recipe screen.
Can participants easily find the search?
Do the search results meet their expectations?
How many errors do they made during the task?

‍
Find out if participants can easily use the filter function.
Can participants easily find, understand and use the filters?
Are the filters clear and useful to reach a desirable result?
How many errors do they made during the task?

‍
Find out if participants can easily add recipe to favorite list.
Can participants easily find the find the favorite icon?
How many errors do they made during the task?

‍
Find out if participants can easily add ingredients to shopping list.
Can they easily find the adding button?
How many errors do they made during the task?

Click here to view the survey
Results Synthesis & Error Rating

0 = I don't agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix and should be given high priority
4 = Usability catastrophe: imperative to fix before product can be released

8

Mid-Fi Wireframe

wireframe
9

Style Guide

10

Key Features

In-App Grocery Shopping

All recipes are fully customizable and seamlessly shoppable! Tap "Add to shopping cart" to seamlessly shop ingredients online.

key feature
key feature

Easy Searching & Filtering

The search and filtering feature allows users quickly find their ideal recipes. With categories like difficulty level, cooking time, cuisines, and ingredients, users can easily navigate to what they're looking for.

Save Your Favorite

Users are able to save and collect their favorite recipes with one click. Once saved, create collections for easy organization and viewing when cooking and grocery shopping.

key feature
9

Responsive Design

12

All Screens

13

Crit Feedback

Positive
Celine Gestas:
  • My first impression is excellent! I like the colors, the clarity of the information.
  • I like the bottom navigation bar; the features are evident. I also like the "+" button would allow me to add one of my recipes.
  • The reviews are clear.
Shane Saxton
  • First of all this looks absolutely stunning, seriously a beautiful design!
  • I love the simple use of color and white space, it embraces minimalism so well and the font choice really supports the art direction.
Constructive
Celine Gestas:
  • I would have liked to see the ratings on the thumbnails (left). I don't find it useful to display a red dot below the current tab.
  • Filter - Cooking time: the "<" sign is not clear, and I will instead see a “-".
  • Favorite: I don't understand what the "Edit" button in the top right corner is for. I don't expect to see the "Recent Viewed" section in the favorites.
Shane Saxton
  • The only thing I could see that stuck out to me was the tertiary button being underlined, because it's not a hyperlink and just bring you to a new page (assuming), the underline seems unnecessary and doesn't fit the minimal style very well.
14

Reflection

Takeaways
  • I learned that by simply talking to users, I’d get a far better idea of what features should take priority, and which ones didn’t really solve any existing pain points.

  • I learned that early sketches need not be perfect, simply display sufficient detail to draw usable insight before proceeding to concentrate on higher fidelity prototyping.

  • Iterate, iterate, iterate. Don’t try to build a complete product right from the first attempt. Always iterate and test after each iteration.
Next Steps
Next steps would include designing the additional screens within the app as well as conducting more usability tests. I’m also thinking to add some fun interactive motion to the app to bring the app more personality and make the whole user experience more pleasing.
Prev: Kidzout
Next: Locally
Design With Empathy ©2024
EMAIL
LINKEDIN
DRIBBBLE
BEHANCE
Design With Empathy ©2024