Baking School: Online Learning Platform
Role
UX/UI Designer
Tools
Figma
Notion
Miro
About
Natalya is a professional baker who has a passion for making desserts. She loves to share her knowledge through an offline baking school. The number of students enrolled in the school continues to grow. Natalya wants to reorganize the educational process and move her school online to reach a wider audience.
Currently, Natalya only posts baking events in Facebook groups, but she wants to take her business to the next level and create a website.
Define
Problem
People struggle to cook well even when they find detailed recipes on the internet. They view images of finished desserts that look extraordinary but are so often unable to reproduce these desserts in their own kitchen.
Solution
Develop an educational platform that connects chef mentors with students. During the course, Natalya Li and chef mentors will teach students proper cooking techniques and baking tricks. In addition, students will have the opportunity to order through the platform exactly the same ingredients and tools that Natalya and the chefs use.
How I Arrived at This Solution
Competitor analysis
I discovered three online pastry schools to conduct competitor research. Two of the pastry schools provide feedback from the chef mentor, which increases students' motivation and offers greater engagement. One of the pastry schools gives students a list of necessary tools for the course but they would need to search and order these tools outside the platform. This was the inspiration for allowing students to order tools directly from the Natalya Li Baking School platform.
But how we can persuade people to pay for the course? I noticed that all three pastry schools share free sample lessons so that people can learn more about the teaching style and what to expect from the course. It is important to have student testimonials and photos of their work on the website, which will offer course credibility.
Potential opportunities from competitive analysis
Student motivation
Students will feel more motivated and less isolated if they have a student community and mentors
Ordering tools
School provides a list of necessary tools and the ability to order those tools through the platform
Responsive design
Course is accessible from all devices so students can watch videos from laptops, tablets, or phones
Field research
I observed a research participant, Jonathan, in his usual environment to understand conscious and unconscious behavior. I asked him to choose any dessert recipe online and try baking it at home. Let's see how it goes.
Interview results
In addition to field research, I conducted six interviews to learn more about people's cooking habits and problems. I interviewed two groups of people. The first group included those who attended culinary master classes at least once. The second group included someone who regularly searches for recipes online.
Why did 100% of the participants struggle when preparing a meal from the Internet?
1. Poor explanation
The recipe does not explain/show important tricks or techniques
2. Unreliable sources
Recipe from unknown sources may be unreliable and not very good
3. Novice cook
Limited cooking experience and lack of basic culinary knowledge
4. Incorrect ingredients
People need to spend time buying ingredients. For ease, they cook with what they have available at home
5. No substitution option
People with allergies substitute or skip key ingredients because there is no substitution option listed
6. No feedback
There is no feedback from chefs or knowledgeable sources explaining why the meal did not come out well
What do people love about cooking classes in person?
1. Community
People have a good time cooking and meeting new people based on their interests
2. Tools & Ingredients
No need to stress out and search for the right tools for cooking. They are provided along with the ingredients
3. Professional teacher
There are professional chefs who can point out mistakes and teach you proper techniques and tricks
Empathizing with Melissa
From interviews, I realized that people really enjoy cooking lessons in person, but it can be expensive and time-consuming. Based on these and other frustrations disclosed by my interviewees, I developed the user persona: Melissa.
Potential opportunities from interviews and field research
Taking notes
During or after the cooking lesson, students can take notes on the platform
Ordering ingredients
Students can order ingredients through the baking school. Consider an Amazon order link
Time stamp
Add a time stamp feature for the instructional videos, where each new section links to a point in the video
Ideate
Sitemap
Using insights from user interviews, field user research, and competitor analysis, I created a sitemap for the Baking school website.
User Flow
Next, I created a user flow to ensure users can efficiently navigate through the website. I used two main paths: On one path, the user wants to enroll in a course. On the other path, the user is already part of the course and wants to go to the lesson.
Design
Mid-Fidelity wireframes
During the creation of mid-fidelity wireframes, I made sure to constantly check Melissa's user persona so that I would not miss important user pain points. The priority for the learning platform was to keep students motivated and make the learning process as easy as possible.
UI Kit
It was important to reflect the founder's identity through the style of the website. Natalya loves to make desserts with berries and a delicate texture. Therefore, I wanted to create a refreshing and light design for the baking school. Green raspberry leaves and berries on a white biscuit will remind users of a delicious cake.
Hi-Fidelity Wireframes
For Hi-Fidelity Wireframes, I created the landing page, course details, sign-in, preparation, and course pages. To learn more, click the "View all wireframes" button.
Based on my interviews, I focused on creating a simple onboarding process. Through the platform, students can order all the necessary tools and ingredients for the course. Another important focus was to provide students with professional feedback on their work.
View all wireframes
Usability Tests
what did i test?
I conducted five moderated tests using a prototype in Figma. To get the most out of the usability tests, I asked the participants to think out loud while doing the tasks. I developed a usability test with the following tasks:
1. Find out how users learn more about the course and how they attempt to enroll in the program.
2. Test how efficiently users can find lessons. Then, test how users would order all of the necessary tools and ingredients for the lesson.
3. Test how students would submit their work and how they would initiate a chat with a chef mentor.
What was successful?
1. Completing Tasks
100% of participants were able to complete the 3 tasks without difficulty.
2. Effective Layout
100% of participants found the layout simple, organized, and intuitive. It was easy to place an order for tools and ingredients.
3. Appealing UI
Participants commented how they love the brand colors and pictures on the website. They were positive about the overall design and idea.
Areas for improvment
Problem
It's hard to understand what the difference is between the buttons: course details, course view, and go to course.
Solution
To go to the platform and view the lessons, students need to sign in first. I created a more familiar CTA for users.
Problem
There is not enough information related to the work of students. People don't trust pictures alone.
Solution
Positive reviews and testimonials build trust and increase business credibility. For more personalization, I included photos of students with their names and quotes.
Problem
It's not clear if comments can be added to the text field. It looks inactive and blends in with previous comments.
Solution
To make it clearer that you can leave a comment in the text field, I've added an outline. The outline color is similar to the CTA which helps connect them.
Reflection
The client was thrilled to see the final design and will implement it as soon as she finishes creating the content for each of the lessons.
Small businesses usually have limitations due to cost and time constraints. While I've learned from my interviews that people need the ability to substitute ingredients, the business owner's original recipes don't yet have that option. This may potentially reduce the number of customers with allergies, but it is important to create the first product and continue to iterate on it over time. In summary, I learned how to achieve the best user experience within the business requirements and prioritize the main goals.
Next steps
While the business owner is creating videos for the baking school, my next step will be to create additional pages for the platform. Once all pages are complete, I will conduct an additional usability test before implementing the design on the site.
View More Work
