ABOUT THE PROJECT
This project introduces a new approach to vegan bakery and help bakers of any experience to improve their skills.
The goal is to make the readers feel in control and able to replicate the recipes at home.
TOOLS // Sketch · InVision · Hotjar · Squarespace
THE CLIENT
The client is an Italian influencer and vegan baker. They requested the ideation and creation of an easy to use recipe website.
MY ROLE
I worked as Web Designer and UX Consultant. Conducting user research, designing, prototyping and creating the website experience using Squarespace.
COMPETITIVE ANALYSIS
The Vegan Bakery industry was completely new to me. Thanks to online searches and briefing with the client, I was able to gain more insights and knowledge.
Once ready to move on, we started exploring possible direct and indirect competitor websites. The main focus was on the website value to users, functionalities and website usability, especially on mobile devices.
USER RESEARCH
During the initial brainstorming sessions, we were able to define specific survey questions. The goal was gaining an understanding of the audience. The survey included questions about their background, pain points, baking habits and experience.
Following the launch of the online survey on the client's social media accounts, we received 386 responses. Analysing the survey responses was enlightening. Having insights and honest feedback, allowed us to have a deeper understanding of the potential readers. This also helped with the project vision and identifying the top 4 competitors.
AFFINITY MAPPING
Organising the data writing down the most frequent answers from the user surveys. The following were the main themes we decided to focus on:
Dietary preferences / restrictions
Behaviours
Device used
Baking experience level
Pain points - What went wrong?
USER PERSONA
USER EXPERIENCE MAP
This step involves a deeper understanding of the user's emotional experience during the baking process.
The most critical point seems related to the recipe specific page. Usually on recipe websites the ingredients and steps are not clear, or tend to be overwhelming. This is true especially when using a mobile device.
STORY BOARDING
PAPER SKETChes & wireframes - homepage
USER FLOW
PRIMARY USER FLOW - MOBILE
Here’s the concept of the primary user flow starting from the homepage. This shows the users happy path, as an ideal flow. The visitors enter the site, navigate through the main categories until they find the best recipe. If this is right for their needs, it's time to start baking!
Primary user flow applied to low-fidelity wireframes
ITERATIONS
The design iterations following the website launch are currently still being tested and optimised analysing user heat maps and screen recordings, gathering results using Hotjar.
STYLE
COLOUR PALETTE & CTA BUTTONS
TYPOGRAPHY
DESIGN CHALLENGE
During the user testing it resulted the need to display the ingredients and recipe steps without too much scrolling. This can be frustrating, especially when using mobile devices.
Usually on recipe websites there are two main sections: "Ingredients" and "Method". The "Ingredient" list shows the amount of each ingredient needed to proceed with the recipe. However, when scrolling down to the “Method” section, the ingredient amount are missing. This forces the user needs to scroll up and down to check the ingredients, or write them on paper.
SOLUTION
We decided to include the measurements for each ingredient in the “Method” section.
Even if simple, this improvement made a difference since it minimises the user’s memory load. With the ingredients displayed inline, there’s no need to scroll up to check the amount needed to complete the step.
In any case, we decided to keep the “Ingredients” section. This can be used as shopping list, to first scan the ingredient list before starting the baking process.