Simply Sweet
Simply Sweet
Project: End to End Case Study, Baking Website
Role: UX Designer
Tools Used: Figma, Miro, Optimal Workshop, Zoom
Introduction • About Simply Sweet
Simply Sweet
Simply Sweet is a baking website designed with simplicity and straightforwardness kept in mind throughout its creation. Since baking can already be a complex task, Simply Sweet was created to help users enjoy the process, eliminate roadblocks, and provide access to the right tools to successfully bake any recipe.
Inspiration
The project was inspired by my love for baking and to ensure that bakers of all experience levels have a positive baking journey.
Learning to bake offers numerous benefits. It serves as a creative outlet, encourages experimentation, teaches patience, allows for the enjoyment of various flavors, and can provide a sense of accomplishment. However, some people can be easily discouraged because it can be complex and overwhelming.
This led me to look into the possible challenges faced by those looking to learn to bake or enhance their baking skills. Additionally, I wanted to understand what keeps them motivated and engaged in their learning journey. By identifying the challenges bakers encounter, I can explore solutions to make learning to bake more effective and enjoyable, ultimately helping to sustain their motivation and encourage ongoing use.
Approach
Emphasize • To understand the user, their needs, and their problem
Focus
The goal was to pinpoint the challenges users face when baking or enhancing their baking skills, to develop solutions to create a product that will offer a seamless experience in learning how to bake.
Objective
1. I want to know what aspiring bakers or seasoned bakers want to learn.
2. I need to learn what motivates them to continue learning.
3. I need to understand how they have learned to bake in the past.
4. I need to discover the problem space and pain points when baking.
Research
Using in depth analysis using SWOT for competitor and secondary analysis, I discovered many of the websites provide a range of features for
Learning how to bake or acquire new skills, covering everything from cakes and cookies to bread, pastries, and sweet decoration.
A noticeable trend among these sites includes various offerings such as package deals, mix-and-match classes, single courses, and monthly or annual memberships, with some even providing free recipes.
They cater to all skill levels, showcasing recipes from credible sources, community reviews, step-by-step instructions, and video tutorials.
Additionally, some sites offer extra features like unit conversion charts, recipe converters, monthly competitions, blogs, Q&A sections, and rewards programs.
Aside from Udemy, none of the other websites offer AI features, which presents an opportunity to integrate AI into baking websites to enhance the users learning experience.
Competitive Analysis
Secondary Analysis
User Interviews and Surveys
To gain a deeper understanding, and to gain some insights of their motivation to bake, I carefully crafted interview questions to gather as much information as I can to see if there are any common themes or any pain points in their process of baking.
Who Are Our Participants?
Adults with experience in learning how to bake and a range of age ranges (18 or older), ethnicities, genres.
4 participants were interviewed via zoom
5 participants completed a google survey
Affinity Mapping
After gathering all of the data from user interviews and surveys, I categorized the data using affinity mapping.
The Motivations Behind Baking
Frustrations/Obstacles users encountered when baking
Preferences that helped or supported users simplify their baking experiences
Simplification
Saving time is essential for people who are looking to bake
Features/resources that have helped users simplify their baking journey
Key Findings
Most Users Prefers
A straightforward, efficient and time-saving approach when learning to bake
To avoid lengthy website pages, pop-up ads, and distractions
Concise tutorials, especially for simple recipes
Users Are Motivated To Bake By
Personal fulfillment
The desire of challenge
Being able to share their experiences and their baked goods with others
Resource Usage and Preferences
Learning styles
Dietary restrictions
Availability of baking tools
Several Negative Feelings
Frustration over the lack of helpful tips and hints
Overwhelming nature of websites
The need for excessive ingredients
Feeling a sense of failure when their baking attempts don’t go as planned
Define • Synthesizing research to define the problem…
Personas
After research, this led me to 3 personas to know who the target users will be to effectively design a baking website keeping these personas in mind.
Problem Statement
POV 1
I’d like to explore ways bakers can easily access helpful tips, as they often spend extra time searching for advice on other websites, which can cut into their baking time.
HMW 1
How might we add helpful tips on the website?
POV 2
I’d like to explore ways to help people who are trying to save time in learning how to bake, by providing condensed versions instructions/tutorials because they can feel discouraged or overwhelmed if it demands too much time or resources.
HMW 2
How might we condense instructions/tutorials?
POV 3
I’d like to explore ways bakers can have access to an efficient, simple website because they often get overwhelmed by too much information or unnecessary features.
HMW 3
How might we create an efficient simple website?
Card Sorting & Site Architecture
To create a site architecture for simple intuitive user experience, 4 participants were tested for a 30 topic open card sorting test through Optimal Workshop.
First the participants went through a screening process:
How often do they use a baking website or a baking app to bake?
What is their primary reason for using the website?
Are they familiar with all of the features within a baking website? (i.e. resources, blogs, baking tips, content of recipes, etc…)
After the screening process, the participants categorized 30 topics into these categories:
Participant 4
Created 7 categories
Extra
Ingredients
Tools
Recipes
Settings Payment
Toppings
How to
Participant 1
Created 5 categories
Getting Started
Baking FAQ’s
Assistance
Profile
Baking Filter
Participant 2
Created 3 categories
Cooking Tips
Functionality and Tools
Recipes
Participant 3
Created 5 categories
Account
Baking-Prep
Resources and Tools
Baked Goods-Recipe
Site Architecture
Although the card labels were categorized differently by each participants, there were similarities in the category names which allowed me to group them into a theme based on their greatest similarities. This allowed me to create a site architecture for easy navigation based on the card sorting results.
Ideate • Brainstorming and generating solutions to help those needs…
Storyboard
To illustrate the user's experience, a storyboard was created to show how a user, uncertain about the consistency of their batter while baking, can receive help from the AI Bake Bot by uploading an image for analysis.
A second storyboard highlights a user feeling overwhelmed by lengthy tutorials. When the user discovers there is a baking website that offers both full-length and condensed video tutorials, allowing users to choose the format that best suits their needs, the user successfully bakes a recipe and also enjoys the process without feeling overwhelmed.
Feature Prioritization
By keeping the personas and the problem statement in mind, I prioritized these features thinking about which features will have the most impact and weighed the amount of effort it would take to incorporate each features. This allowed me to have a balanced approach to create a website that will have positive impact on users as well as completing this project within a specific time frame.
-
Account Creation - User registration, sign in, and account page so the user can access all their relevant and specific data such as previous purchases
Search Bar - Search recipes by skill, content, category as well as search for any resource within the website
Payment Section - Annually subscriptions
Navigation Bar - About Us, Recipes, Ingredients, and Resources
Recipes - Recipes by skill level, content, few ingredient recipes, and category with the ability to save recipes
Ingredients Check List - List of ingredients with check mark. Users can check off ingredient since they have gathered the ingredient
Recipe Scale Conversion - Users can use to multiply ingredients if they need to double, triple the recipe
Free Recipes - Offer several free recipes to entice users to sign up for a 7 day free trial
Step by Step Instructions - Condensed step by step instructions with images and checklist
Video Tutorials w/voice command - Option for long and condensed version with voice command to pause, forward, or rewind
AI Bake Bot - Users can ask for any helpful tips if they have further questions
Blogs - Can provide users with helpful tips in depth
Resources - Baking tips such as tool list, purpose of tool, baking terms defined, baking techniques, about basic ingredients
Interactive Webcast - Live chat for troubleshooting if other helpful features do not help
Social Content - Ratings of reviews, allow comments of users, and the ability to upload images of their final product
-
Community Features - Access to social group i.e. Facebook group
Interactive Webcast - Hands on learning with tutors and live classes with ability to engage and use chat
Interactive Webcast - Live classes with ability to engage and use chat
-
New Weekly Recipes - Users can access new recipes to look forward to
Unlock Baking Potential - Personalize to set goals to bake an x amount of recipes a month or set goals to learn a new baking tips
Pricing Calculator - Prices of ingredients
-
Challenges - Monthly competition with prizes for winners
Interactive Webcast - Recorded live classes for busy users that were unable to attend the live classes
Unlock Baking Potential - Rewards program such as goodies or discount on future ongoing subscriptions
Ingredient Locator - Informs user where they can buy the ingredient
User Flow
To understand how users will interact with the website, a user flow was created for the following to show the paths users will take when completing tasks:
Creating an account and signing for a subscription
Finding a recipe
Using the AI Bake Bot
Prototype • Create wireframes and prototypes to visualize solutions…
Lo Fidelity Sketches
Low fidelity frames were created by sketching different screens for each key unique screens.
3 different screens for the main page
2 different screens for the search of recipes
3 different screens for the recipes that includes the list of ingredients and the step by step instructions
Mid Fidelity Frames
Before creating the mid fidelity wireframes, 3 participants were asked which devices they typically use while baking. All 3 participants stated they usually use a phone or a tablet while looking at the recipe and instructions since it is portable. To visualize the direction of the design, mid fidelity wireframes were created for both mobile and tablet versions.
High Fidelity
5 key screens were created to emphasize the importance of these features that fulfills the user personas:
Homescreen
Recipe
Ingredient List
Step By Step
AI Bake Bot Chat
UI Kit
Testing • Validate designs through user testing
Usability Test & Results
I conducted usability test via zoom involving 5 participants to complete 4 different key tasks:
Task 1
Creating an account and managing subscription
Results:
3 out of 5 participants were able to successfully complete the tasks without any errors.
2 out 5 participants clicked on settings instead of billing to find manage subscriptions.
Task 2
Using the AI Bake Bot for assistance when question arises
Results:
When asked how they would proceed by using the AI Bake Bot for assistance, 3 out 5 quickly found the CTA button at the bottom of the page.
They were asked to upload a picture using the AI bake bot and all 5 participants successfully completed the task. All 5 participants were able to exit out of the task to the homepage.
Task 3
Finding a specific recipe and find the ingredients & step by step instructions
Results:
4 out of 5 successfully found the recipe without any errors.
1 out of 5 participants had looked at the main page first to see if the recipe were on their first before proceeding to the search icon.
When asked to find the step by step instructions first, then were asked to view the ingredient list, 2 out of 5 participants had a difficult time finding the ingredient list.
When 3 out of 5 participant viewed the ingredient list first, then to step by step instructions, they were able to go back to the list of ingredients without any problems
Task 4
Locating their section where they have stored their favorite recipes
Result:
2 out of 5 participants found the heart icon on the navigation bar.
2 out of 5 participants clicked on the hamburger menu to find the saved recipes under account.
1 out of 5 participants clicked on the hamburger menu and clicked on the recipe.
Iterations
Iterations were made based on usability test with 3 levels of priority.
Priority 1
Under Step By Step instructions:
“Ingredient” and “step by step” CTA was placed on top of the page for users to toggle back and forth
An “X” was placed at the top of the page to exit the recipe page
Changed the “Finished” CTA to “Rate It”
My Account:
Changed the word “billing” under account to the word “subscriptions”
Homepage:
Changed the logo for accessibility
Added 7 day trial CTA button
Added a hero page, feature section, and featured on section
Added footer
Priority 2
Hamburger Menu
Deleted saved recipe icon on navigation bar and added “saved recipes” under hamburger menu
Priority 3
Recipe Box
Added the heart for saved recipes on images to be to be white for better contrast since it was
getting blurred in with the image. I also changed the heart to be filled with pink when saved to avoid having excessive teal
High Fidelity After Iterations
Tablet Version
After making iterations for the mobile screens, I then created a responsive design for 5 tablet screens and 1 desktop screen.
Prototype
The high fidelity prototype highlights the task flow of using the AI Bake Bot by uploading an image for the batter to be analyzed to see what changes can be made within the batter to have a higher successful rate of the intended outcome of the baked good. The second part of the flow highlights the important screens through finding a recipe emphasizing the ease of flow and a simple straight to the point baking journey.
Results
Next Steps
By designing a baking website that provides simple straight to the point directions with images and provides a short and long tutorial users can choose between depending of the complexity of the recipe, and to integrate AI Bake Bot where users can upload an image of their batter to get feedback or gather helpful tips to ensure the likelihood of getting the intended outcome, I believe these solutions meet the pain points for the personas.
Now, the next steps would be to find participants for further usability tests on the final iterated design to ensure no further iterations will need to be made.
Reflections
In the duration of my first case study, I gained a significant amount of knowledge in the process of UX/UI. It is a very meticulous journey designing a user friendly and functional design tailoring to the pain points of the personas. Creating Simply Sweet was a fulfilling project to work on, especially being able to see my vision come to life. I particularly thought it was very interesting to hear unique individuals' responses through user interviews and surveys and seeing how everyone’s thought processes work differently. Reflecting back, if I had to do one thing different, it would be to use an audio transcriber during the user interviews. Even though I recorded user interviews via zoom, it would be helpful to have a transcription since it was difficult to take notes during the interview. I believe that it can help save time during the documentation process and utilize the time saved on other areas of the project, especially when there is a specific time frame to complete the project. Overall it was a great experience and I’m excited to see what I will discover and learn in my next project!