FoodandDrank.com
The Product: Food&Drank is a responsive website that is focused on providing unique food recipes and cooking tutorials to its users. This website is for anyone who is interested in finding new recipes, sharpening cooking skills, or even learning how to cook from scratch.
Duration: September 2022 to January 2023
Net New Project - Completion for Certification Course
My Role: UX/UI Designer
Responsibilities:
-
Developing personas
-
Wireframing
-
Prototyping
-
Conduct Usability studies
-
Design / Design process
The Problem:
Busy individuals lack the time and resources to find easy recipes and cooking tutorials in a singular place causing them to not cook regularly in their day to day lives.
The Goal:
Design a website that provides a simple and efficient way to find new recipes and cooking tutorials so that busy or inexperienced users can incorporate cooking in their daily routines.
User Research
Questions:
1. How often do you cook?
2. Do you feel confident cooking?
3. What stops you from cooking daily?
4. What resources would inspire you to cook more?
5. What types of recipes do you like to make?
6. What would you use a website like this for?
7. Have you ever taken a cooking class?
8. On the scale of 1-10, how much to you enjoy cooking and why?
I chose these basic questions because I wanted to identify what limits individuals from cooking in their day to day lives.
The goal of the user research was to identify key desires, similarities, and characteristics of users and then use that information to develop user groups. Below is a few of the questions that I asked a large group of individuals. Based on their responses, they were then sectored into two primary groups.
User group 1
The first user group identified are individuals who are comfortable cooking but have limited time to lookup & make food in their day to day lives.
Would use the site to:
1. Find healthy new recipes
2. Save money by cooking at home
3. Find recipes that are quick and easy to execute.
User group 2
The second group identified are individuals who have little to no cooking experience. They would like to learn but may not have the resources or understanding of where to start.
Would use the site to:
1. Watch tutorials for basic skills & recipes.
2. Find easy recipes.
3. Save money by cooking at home.
Since time and knowledge are two key points described when talking through the challenges of cooking, a resourceful, easy to use food recipe and tutorial website will improve their overall experience with incorporating cooking into their day to day lives.
Key Guiding Principles
1. Efficiency
Users who have limited time in their busy schedules find it challenging to find easy, healthy, and new recipes from one source.
3. Accessibility
Most websites that include tutorials require some sort of membership. This makes it difficult for some individuals to afford on top of purchasing groceries.
2. Multi-purposeful
Most websites that include recipes, don’t also include tutorials on how to improve cooking skills and vice versa. Having a website with both would make a unique experience for the user.
4. Transparency
Food websites sometimes lack the transparency of how difficult it is to make the recipe, how much time it requires, and the nutritional value of the recipe.
Meet our Personas!
Macy is a woman who loves to watch cooking shows but rarely cooks herself. Since she doesn't have much cooking experience, she needs an easy way to watch skills & recipe tutorials to increase her confidence in the kitchen.
Jason is a busy working professional who needs an efficient and easy way to find healthy recipes because he is trying to improve his overall health, save money, and start cooking at home.
User Journey Maps
Goal (Page 1): Identify a healthy recipe by choosing a category and reading the summary.
Goal (Page 2): Identify and select a tutorial to improve cooking understanding and skills.
Site Map
The goal for this site map was to identify 4-5 key categories based on the goals of both user groups.
Recipes & Tutorials are the two top key categories desired by the user groups so having them easily accessible will improve navigation.
Paper Wireframes
Design Goal:
My goal throughout this step in the process was to develop as many design layouts as possible then ask a group of potential users what their favorite features were.
After feedback, I was able to combine favorited elements into the digital wireframes.
Digital Wireframes
Low-fidelity Prototype
In this user flow, I wanted to test if users were able to first, select a recipe until they are able to return to home then select a tutorial until completed to return to home.
1. How long did it take users to find a category?
2. Was there any point of the flow where users were confused?
3. Was there anything the user thought was missing from the flow?
Usability Study
Tested the two user flows with 5 individuals by sharing the prototype link. During the flow, users spoke out loud about what they were experiencing. At the end they all answered the same 5 questions.
1. Was there anything that stopped you from completing the flow?
2. Did you find any part of the process confusing or frustrating?
3. Were you able to navigate to the home screen at any point in the flow?
4. Was anything missing from the flow that would have made your experience better?
5. Would you use this website again?
Mockups
Mobile Variations
Accessibility Considerations
I utilized headings with different sized text, changed the typography and used contrasting colors.
I added the option for captions, transcripts, and screen/voice reader technologies.
Utilized landmarks and spacing to help users navigate the site with assistive technologies.
The Impact & Lessons Learned
Impact: "The website was so easy to navigate, I think it will inspire me to cook more and sharpen up my skills in the kitchen!"
I learned a lot about how important user feedback is when developing a product. Sometimes you can miss a very important element and through user feedback, you can iterate on the design to improve the overall experience.
What's Next?
