A website that offers a friendly and easy way to find and view cooking tutorials, providing clear and fun navigation.
Buen Provecho is a website that offers a friendly and easy way to find and view cooking tutorials. The target customers are young people who like to learn how to cook.
My role:
UX designer designing an app for a Beer Garden menu from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
The problem:
Inefficient systems for browsing often the browsing systems give too many options to choose from, and that becomes overwhelming for the users.
The goal:
Design a Cooking website to be user friendly by providing clear navigation and a fun, fast and easy way to look for cooking tutorials.
Understanding the user
User research
Personas
Problem statements
User journey maps
Starting the design
Initial design concepts
Digital wireframes
Low-fidelity prototype
Usability studies
Refining the design
Mockups
High-fidelity prototype
Accessibility
Takeaways
Next steps
What I learned
Understanding the user
User research: summary
After conducting user interviews, I discovered that many people see cooking as a relaxing activity where they can spend a funny time.
The time it’s an important factor when people consider what to cook, people enjoy trying and learning new things when they have good and clear guidance. However, many cooking websites are overwhelming and confusing to navigate, which frustrates many users. This makes the user abandon the website.
Personas
User research: pain points
1
Time
With a lot of options and menus to choose from, the users feel overwhelmed and frustrated to spend a lot of time searching for their ideal recipe.
2
Accessibility
No filters for different types of users like beginners or advanced.
There is no way to give a quick look at the process.
Not all websites have videos of how to make the recipe the user choose, this makes the cooking process lengthy.
3
Choices
A lot of different cooking recipes appear when the user opens the one they want to try, this is confusing and distracting.
Starting the design
Sitemap
Initial design concepts
In the first phase, I based the designs on feedback and findings from the user research.
Digital wireframes
Usability study: findings
Round 1 findings:
1 Users confused about the icons that represent the difficulty of each recipe.
2 Users wants an accessible menu bar all the time so they can change easily from different recipes.
3 Users wants a way to save their favorite recipes.
Refining the design
Key mockups
After usability studies, I changed the type of menu bar and the icons that represent the difficulty of the recipes, also I added a feature to save the favorite recipes easily for the users.
High-fidelity prototypes
The final high-fidelity prototype presented better cues of navigation so the user can look for the ideal recipe with different filters to get quickly to the option wanted.
Detailed imagery for the recipe options helped all the users to see it faster without having to read all the descriptions or to have to look detailed the process recipe by recipe to get to know which one fits best for them.
Accessibility considerations
1 Provided a feature to help the user to print their recipe.
2 Used icons to help make navigation easier.
3 Used detailed imagery for the recipes so the user can choose faster from the different options provided without having to read all the descriptions.
4 Provided access to users who are visually impaired by adding alternative text to images for screen readers.
Takeaways
Next steps
Conduct another round of usability studies where the user completes all the processes of cooking a meal from the recipe options from the app so we can validate better whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
What I learned
I learned throughout the project that the type of filters for searching between different options you chose to add to the app is crucial because that depends if the user will want to keep using your app or not.
Thanks for watching!