Project overview
The product:
Cooktorials is a website that allows users to find and watch recipes and cooking tutorials. The typical users are 17-35 years old, and most users are those who are just learning to cook and want to explore new recipes
Project duration:
Oct 2022 - Nov 2022
The problem:
Available online cooking tutorial websites have cluttered designs, inefficient systems for finding and exploring recipes, and lack discoverability for new and unique recipes
The goal:
Design a cooking tutorial website that will act as a centralized hub to find and discover cooking “how to” videos. All while being easy and simple to use
My role:
UX designer leading the Cooktorials’ website design
Responsibilities:
Conducting interviews, paper and digital wireframes, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Understanding the user
- User research
- Personas
- Problem statements
- User journey maps
User research: summary
I discovered that many of our target users love to cook and try out new recipes. However traditional cookbooks and blog sites are often hard to follow, and the current cooking video options lack the discoverability aspect for finding new foods and recipes.
User research: pain points
1
Experience
The current method for finding recipes and cook tutorials is one that involves scouring the internet across multiple different websites which results in confusing navigation
2
Discoverability
Current cook tutorial video platforms lack discoverability for new recipes
3
Centralization
There is currently no cooking websites solely dedicated to offering a wide selection of cooking tutorials
Starting the design
- Sitemap
- Digital wireframes
- Low-fidelity prototype
- Usability studies
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap
My goal here was to make strategic information architecture decision that would improve overall website navigation. The structure I chose was designed to make things simple and easy.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the experience.
Low-fidelity prototype
To create a low fidelity prototype, I connected all of the screen involved in the primary user flow of finding a recipe and viewing the Cooktorial
At this point, I had received feedback on my designs. I made sure to listen to the feedback, and implemented several suggestions in areas that addressed user pain points
Refining the design
- High-fidelity prototype
- Accessibility
Mockups: Original screen size
High-fidelity prototype
My Hi-fidelity prototype followed the same flow as the low-fidelity prototype, and included the design changes made after the feedback from the usability study.
Accessibility considerations
1
Experience
I used headings with different sized text for clear visual hierarchy
2
Discoverability
I used landmarks to help users navigate the site, including users who rely on assistive technologies
3
Centralization
I designed the site with alt text available on each page for smooth screen reader access
Going forward
- Takeaways
- Next steps
Takeaways
Impact:
Our target users shared that the design was intuitive to navigate through, easy to engage with the content, and demonstrated a clear visual hierarchy.
What I learned:
I learned that even a small design change can have a huge impact on the user experience
Next steps
1
Conduct Follow up usability testing on the new website
2
Identify and additional areas of need and ideate on new features
Let’s connect!
Thank you for reviewing my work on the Cooktorials Website
