Recipe Tutorial
Site Design
Branding / UI + UX / Visual Design
I was the lead designer of a website that allowed you to search through thousands of available recipes, learn how to make them via video tutorial and discover new favorites
Date
Role
Team
Deliverables
Dec. - Jan. 2022
Lead UX Researcher/
Designer
Yours Truly
User Research, Wireframing, Low-
Fidelity Prototyping, High-Fidelity
Prototyping & Design Iteration
Design Process
01
Define
- Define Project Goals
- Define Key components to be included
Research
02
- Research Goals
- User Interviews (5)
- Persona Creation
Design
03
- Ideation
- Sketches
- Low-Fi Wireframe
- User Feedback
- High-Fi Prototype
Evaluate
04
- Usability Testing (5)
- Survey
- Interview
Main Objectives
The Challenge:
Design a site that not only brings users step-by-step cooking instructions for their favorite meals, but includes informative, how-to videos to go along with them.
Key Components to Include:
1. Search Function
2. Video Tutorial
User Research
Research Goal
To determine whether our application fits user needs, enhances their experiences and improves the convenience of their current needs
Methodology
I interviewed 5 Participants of different ages and backgrounds to determine the most important factors that the general public was looking for when searching for recipes online. I visualized the user journey to show the existing experience and summarized pain points and needs for all types of users.
Personas
The following personas were based off of 2 chosen interview participants. The goal of the chosen personas was to show the two most contrasting agendas available among recipe searches.
Matt
Age: 22
Occupation: Civil EngineerFamily: Single
Goals
“I Love cooking, but I kind of suck at it. I use YouTube for some tutorials, but it's so inconsistent.” - Matt
Bio
Matt is a recent college grad who recently landed his first job out of college. Matt’s recently discovered that he loves cooking for himself afterwork, although he isn’t great at it. He currently uses standard step-by-step instruction sites for new recipes, but they often don’t turn out how he’d expect. He’s looking for a more hands-on approach to recipe instructions.
- Improve cooking skills
- Discover new recipes
Frustrations
- Lack of tips on current meal site
- Recipes rarely turn out as intended
Julia
Bio
Age: 30
Occupation: Trainer
Family: Married
Julia is a dedicated personal trainer whose been in the fitness industry for 8 years. Every Sunday, she preps her meals for the week. She’s grown tired of the basic, bland meal prepping recipes and is looking for something to “spice” up her week.
“I’m tired of remaking the same 6 meal-prepping recipes. Chicken and rice will never be the same.” - Julia
Goals
- Find a meal-prep site that isn’t just
chicken, rice and veggies.
- Learn how to better prepare her
meals for the week.
Frustrations
- Tired of the same bland meal prep
Recipes
- Often quantities are too small
Insights
Opportunity Areas
Features
After synthesizing the insights from the interviews and learning about our user needs and wishes, I identified the following opportunities areas, which serves as the inspiration for ideation and feature design.
Design
Ideation
I brainstormed potential design solutions based off of user interviews:
1. Cuisine category based off of ethnic origin
2. Shopping List Function
3. Search Function
4. Side Navigation Bar
From Paper to Prototype
With objectives in mind, I started prototyping form paper to digital designs
Testing and Iterations
I made low-fidelity prototypes on Adobe XD for initial usability testing with 5 participants made up of the general public. Participants were able to navigate through the app, however, there was some friction and areas of improvements.
Following are the main iterations I made:
Iteration #1
Step-By-Step Instructions
During usability testing, one user noted that if she wasn't able to load the video, she wouldn't be able to cook the recipe.
The iteration was quickly implemented to appease users poor internet connection.
Iteration #2
Font Size
After reviewing feedback, I found that 2 users, one older and one far-sited were having difficulties reading as the font was too small.
After reiterating the design, they were asked to conduct the user journey one last time to see if the issue continued. The users were successful in completing the user journey with no issues reading the text.
Header Font:
SubHeader:
Standard Text:
34
30
18
+6 Point Font Size Difference
Header Font:
SubHeader:
Standard Text:
40
36
24
Iteration #3
Blur Unselected
Cuisine Categories
A user noted during the testing phase that, aside from reading the page header, there wasn't an indication what cuisine category they had clicked on. (Circular Photos at top of page)
I took this into consideration and reduced the transparency by 70% of the un-clicked options to better display what page the user was currently on.
Transparency: 100%
70% Reduction
Transparency: 30%
Usability Testing Results
1.
2.
3.
Added written instructions for those unable to load video tutorials which was the primary function of the site.
Increased Font size across site to assist visually impaired users. This was done carefully without compromising the structure of the site.
Reduced the transparency of unselected categories to increase non-written communication across pages.
Final Iterations
The final iterations of the design represent the final product. There is no user-flow associated with these iterations, only snapshots of chosen pages from the website.
Standard Home Page - First page user sees upon opening the site. Equipped with regional cuisine categories, seasonal favorites and upon scrolling includes recipes by chef, and holiday spirits. (Shown in Iphone Iteration)
Once a recipe has been selected, you're prompted with a video tutorial on how to prep and make. Below the tutorial are prep-times, cook times, level of difficulty, Ingredients used, Nutritional data as well as written instructions for those unable to load the videos.
A Recipe By Chef page was added upon user request. Here, you can see what the chef does, where they're located, professional schooling and expertise/ specialties. I also included a bio, allowing the user to get a more personalized experience, so they can better connect with whomever they're learning from.
Thank You!
Call
(952) 484 - 7806