Bread baking video tutorial responsive website

UX design certificate project case study

Web page created for bread baking enthusiast who wants to sell her experience of natural rye bread baking in 4 video lessons. Added value – unique recipe and plenty of tips. 

Project duration: 4 weeks May, 2023

Role: UX designer, UX researcher

Responsible for concept and design – paper and digital wireframing, low and high-fidelity prototyping, conducting competitor research, user interviews and usability studies, securing accessibility, iterating on designs and responsive design, UX writing.

After competitor research and potential user interviews project task defined.

Anda works as a teacher in a local school. She don’t have much time on daily bases to cook, but she likes to delight her family on weekends. She has thought, that she would like to learn natural starter bread baking. She has checked internet, but mostly she has found social posts on the issue or master classes via learning platforms. Long commitments she cannot afford and social posts do not give enough details. She would like an easy access, affordable short video tutorial on the issue.

Frustrations

1. Most tutorials are too long, they have to be engaging, short, but still explanatory.

2. I should afford these from teachers salary.

Sitemap

Web site is fairly simple, information grouped in logical order that is convenient and logical for end users.

Initial site map I changed when started to draw first sketches. I deleted FAQ part. It may appear later when content on site grows and baker has established interaction with users.

Both «lighter boxes» are not present on site in current stage, but sitemap was designed with further development in mind. 

Since mobile phones are part of peoples life and accessing information on the go gives flexibility of time management, I used a mobile-first design philosophy - first designed for mobile screens, then web page and then for tablet sized screens.

On home page I used featured image layout on top and Z shaped navigation model lower.

Featured image to create strong first impression + added quote from baker to start personal story and Z shaped structure with noticeable CTA buttons to guide to enrollment.

Z-shaped eye tracking model allows to add content easily when it grows.

Low fidelity prototype

Conducted moderated usability study, 5 participants, research participants selected from age group 21-60y, men, women who are interested in cooking.

First usability study of low fidelity prototype revealed the following:

1. Users could not get to next video if they wanted to go directly right after watching the previous.

Solution: added CTA button "Next video" on video watching page.

2. Most users were confused by navigation text «My story». It was not enough descriptive and intuitive. Also «log in» text was confusing. 

Solution: this led to reconsidering all navigation texts.

Accessibility considerations

1. During design process I was concerned about color palette – it well expressed the theme, but I was concerned about color blind people. I used colorblindness simulator which showed that texts are legible also for colorblind people.

2. I used fairly large font sizes on all screen types. This helps not only people with visual impairments, but all users if they want to watch video from distance and try new skills in practice in their kitchens while watching and following written tips.

3. I used large CTA buttons to support people with physical difficulties. This improves user experience also for those who are with dirty hands experimenting in their kitchens.

Web page screens

Link to high fidelity web site prototype  

Mobile phone screens 

Link to high fidelity mobile version 

Takeaways 

During the design process I planned place holders for explanatory texts, bet I noticed how important for users is actual content. This observation I will pass over to tutor-baker who will later administer her web page.

Next steps

1. Since texts explaining benefits and unique selling proposition are crucial – invite good copywriter.

2. Check page design if texts get significantly longer – how it might influence page design.

3. Evaluate payment plugins – how they might influence page layout and user flow.

Peer learner assessment: "Very aesthetic design" 

Mastering UX Design is as satisfying as creating your own bread which lasts fresh for a week, if you store it right;) What’s «right»? Join the master class and find out.

Feel free to contact:

kagelv@outlook.com