Rachel So
Case Study 2
Recipe
A website that provides cooking recipes with an assist function of several custom layouts and converters for units.
Project Overview
Product Description
-
Recipe is a website and an app that support users explore myriad types of recipes with the support of cooking tutorials.
The Problem
-
1) How do we provide a layout that is easy for many users to use?
-
2) How to make measurement conversion function easier?
Project Duration
August 2022 ~ October 2022
My Role:
UI/UX Designer
Understanding the Users
User Research
Online Questionnaire
Purpose of the Research:
-
Clarify and broaden understanding of user perceived culinary app/design issues
-
Identify user culinary app/website journey maps
-
Find motivation for users to use the culinary app/website
Targeted Audience:
-
Age between 20 ~ 50 years old
-
Live alone or rarely cook (~ 4 or less per week)
-
Live in Vancouver and Japan
Research on Reddit Community
We used the reddit platform as a source of research to find complaints about cooking when using the app and tried to better understand the users.
Affinity Map
After collecting data, I combined both information from the questionnaire and reddit information by creating an affinity map to organize the common themes of users carry.
Findings
1
Mismatch between the recipe/method of preparation and the user's food preparation preferences
I determined that some users prefer to prepare all the ingredients at first, then follow the direction and vice versa. The layout of the recipe may cause users to feel the need to scroll up and down.
“When I cook, I prepare the ingredients by looking at the recipe, and I get tired of scrolling up to check the amount of ingredients, and then scrolling back down to check the recipe”
“If I have a computer of iPad, I can use a split screen (on how to prep for the food and actually cook) to handle it either way, but it is inconvenient when using my phone.”
2
Findings
Frustrated by the lack of lightweight and portion size conversion
I discovered that most recipe are set with 2 serving portion, which could be difficult for users who wish to serve 1 or more than 2 servings, because it involve calculations. In addition, the difference is measurement standard can impede users to deriving the correct amount of ingredients and seasoning.
“I always convert on other websites because the measuring instruments used in Japan and overseas are different.”
“It's hard to do the math when making 5 servings for a recipe that serves two.”
Personas
Personas are created based on survey results and online research, with specific users in mind.
Problem Statement & Solution
Problem Statement #1
How can we create an layout that are inclusive to users with several preparation preferences?
If there is a function to change the layout of recipes and cooking methods, users would not have to scroll and the process of quantity would be smoother.
Implement a button that change layout of the recipe page
The layout is simple and can be changed at the touch of a button.
Problem Statement #2
How can we create a feature that can easily convert measurement from one to another.
If there was a feature to easily change the units at the recipe/preparation, it would make the cooking process smoother for the user.
Ability to change units within recipes
The layout is simple and can be changed at the touch of a button.
Design & Refine Process
Low-Fidelity Prototype
During the iteration process, I focused on:
-
Simplify Navigation
-
Align images to the size that is easy to read
-
Provide 8 layouts for more option
Usability Study 1 Findings
Problems
-
Button locations change from layout to layout, making it difficult to find buttons
-
Too many icons can be confusing when reading recipes
-
Too many layouts to choose from, which makes it time-consuming to select one.
UI Components
Takeaways and Next Step...
-
Be aware of "why you choose this design" for each design.
-
During the usability test, one of the participants pointed out that the structure of the website design was difficult to read. I realized that I had not paid much attention to the structure of the website, so I improved it so that users can follow it naturally.
-
​
-
-
Importance of Persona
-
In doing this case study, the persona creation helped me to be aware of the specific areas where users were dissatisfied. I learned firsthand the importance of the process of listening to the personas and users once when I was stuck and then rethinking and understanding them. I also realized that by reading the survey and Reddit threads, I could cover the weaknesses of the user survey.
-