PROJECT OVERVIEW
My role
UX Designer from conception to delivery
Responsibilities
Conducting interviews
Paper and digital wireframing
Low and high-fidelity prototyping
Conducting usability studies
Accounting for accessibility
Iterating on designs
Responsive design
The Problem
Available online recipe websites don't cater to a wide range of users who would like to have the option to watch and/or read the recipe.
The Goal
Design a user-friendly online recipe website that provides users with different ways to view recipes in order to make searching and viewing recipes simpler and easy for all types of users.
Persona
The food enthusiast
RESEARCH INSIGHTS
Many working adults have difficulty balancing time to cooking meals.
Adults watch or read online cooking tutorials from a weekly basis to a couple of times a month.
Food enthusiasts like when cooking tutorials include an option to watch and read the recipe.
Tutorials that do not include all the necessary information, discourage users.
Users lose interest when cooking tutorials have extra information and aren't straight to the point.
PERSONA
PAIN POINTS ACROSS USER JOURNEY
HOW MIGHT WE
The watch/read was the most problematic part of the user journey so I decided to create design improvements that would address them. I asked myself the following questions:
CRAZY EIGHTS
I completed a Crazy Eights exercise to brainstorm ideas that will help answer the “How Might We” questions and solve user pain points:
“It irks me when a video recipe doesn’t also list the ingredients and directions.”
“I don’t like seeing cooking blogs that include a life story before the recipe. If I see that, I won’t continue.”
WIREFRAMES
From Paper Sketch
These are 5 different options I sketched of the recipe page. The last sketch is the refined version.
Based on what users wanted to find on a recipe page, I made sure to include the following:
Video
Ingredients
Directions
Reviews
Related recipes
*Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
SCREEN SIZE VARIATIONS
Users watch cooking tutorials on different devices. Therefore, I worked on designs for additional screen sizes to make sure the site would be fully responsive.
Tablet screen
Mobile screen
USER TESTING
I conducted two rounds of virtual moderated usability studies with a total of 5 participants. There were other features I tested but for purposes of keeping this short, I chose insights that related to the recipe page.
Round 1
Users need to know how many servings the recipe will make.
Round 2
Users need a different terminology for the “rate and review” section.
MOCKUPS
View My Recipe Helper website’s high-fidelity prototype.
TAKEAWAYS
Impact:
4/5 participants for the high-fidelity usability study mentioned the recipe website was easy to navigate and includes everything that they’re looking for.
What I Would Do Differently:
1. Conduct usability studies with a broader spectrum of users who use assistive technology.
2. Conduct A/B testing on the terminology in some parts of the website.
What I Learned:
While designing “My Recipe Helper,” I noticed that every user has a different idea of what they would like on a website or how it should look. Therefore, I learned how important it is to identify patterns/ themes in the data and come up with insights.