Savoury Steps
The Product
Savoury Steps is a cooking tutorial website, geared at introducing users who are new to cooking. The goal is to help users make beautiful, delicious and healthy meals.
The Problem
People don’t know how easy it is to cook delicious home cooked meals.
The Goal
Design Savoury Steps a beautifully designed website catered to helping users make their first meal.
My Role
UX designer, designing a responsive website for Savoury Steps 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.
Project Duration
September 2023 - October 2023
Understanding the User
User Research
User research for the Savoury Steps involved gathering insights from potential to understand their preferences and needs to make a meal at home. This research included conducting surveys, interviews, and usability testing to uncover user behaviors, motivations, and pain points.
Through our user research, we uncovered that our initial requirements were not only essential but would result in the abandonment of the website if they were not executed well.
Limited Time
Users don’t have enough time to make a delicious meal at home.
Wrong Ingredients
Users want to be able to cook meals with ingredients that are accessible to them
Poor Eating Habits
Users want to be able to eat meals that have a balance between taste and health.
Problem Statement
Alex is a tattoo artist who wants to expand his knowledge of cooking because he wants to promote healthy eating habits for his family.
Starting the Design
Paper Wireframes
Next I sketched out paper wireframes of screen for the website. Keeping in mind the pain points and user flow I started with the homepage.
Digital Wireframes
Applying the designs from paper to digital wireframes made it easier to understand how the design could help address the pain points users have been experiencing.
Easy navigation to move around the website.
Displaying a quick brief of recipes will help users make decisions on what to eat.
Low Fidelity Prototypes
The low fidelity prototype connected the primary user flow of selecting and ordering candles so the prototype could be used in a usability study with users.
View Savoury Steps prototype:
Usability Study Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used high fidelity prototype and revealed what sections of the mockups needed refining.
Round 1 Findings
Users prioritized searching over using the headings in main navigation.
Users wanted a way to filter their results once they found a recipe category.
Users found the results page to be disorganized and dysfunctional.
Refining the Designs
Mockups
Based on the insight users use search more often than the categories, I made the search more prominent within the global navigation so users won’t miss it when they are on the sight. I also added a prompt within it as well to provide suggestions as to what the user can do with it.
Two address other two insights you can see a revamped recipes page with filters to go with it. The initial wireframe appeared to similar to the homepage and users were commenting on how they needed it to look and feel different.
I also included considerations for different screen sizes based on my earlier wireframes. Since our users predominantly use their mobile devices I felt it was important to optimize the design for these device sizes for an optimal experience. With that being said I created different designs for multiple breakpoints based on the most used resolutions; Mobile 360px, Tablet 905px, and Desktop 1440px.
To ensure a smooth and optimal responsive experience, I also created a responsive video showcasing how the designs would adapt based on the screen size being sued by the user.
High Fidelity Prototypes
The high fidelity prototype maintained the same user flow as the low fidelity, and I incorporated the design changes after the usability study as well.
View Savoury Steps prototype:
Accessibility Considerations
I used a colour scheme with a high contrast to the white background of the page to ensure users won’t have an issue with reading the content.
I designed certain headings and tabs with icons along with text to ensure readability and visibility between text.
I used landmarks and global navigation throughout the site to help users who rely on assistive technology.
Takeaways
Impact:
Our users found that the website was intuitive to move and navigate through, they found the images of the recipes to be very impactful and influential in how they decide what to cook.
What I learned:
I learned that even though you may have a completely different output in terms of a design. The steps that you follow to get the end product are the same and crucial to your success.