Craft tutorial responsive website

LearnCraftly is an e-leaning platform that offers artcraft tutorials to help all users enjoy accessible tutorials.

The problem: Available online tutorial have cluttered designs, inefficient systems for browsing, and do not have feedback options.

The goal: Design a user-friendly responsive website by providing clear navigation and offering feedbacks while crafting.

Responsibilities: In this project, I was responsible of conducting interviews and a market research, determining information architecture for a responsive design, creating paper and digital wireframes, low and high-fidelity prototypes, conducting usability studies, iterating on designs while accounting for accessibility.

Project duration: December 2022- January 2023

User research

I conducted interviews with people with an interest in art and handcraft. The typical user is between 25 and 50 years-old, and most users are early-career professionals. Many said they wished they could find online classes because they do not manage to fit in-person classes in their busy schedule. My assumption was that they did not find content online to practice. The research showed that the users found videos, but videos did not allow them to improve their practice because they lack feedback, which creates frustration

User paints points

Personalization

Finding videos that fits the viewer’s previous knowledge is tedious

Feedback

Lack of feedback with online tutorial make it difficult for craft-enthusiasts to improve.

Experience

Browsing endless video-website takes the pleasure out of crafting for craft-learners.

Problem statement

Naïa is a busy professional with a passion for handcraft who needs to easily access adaptative tutorials because they do not have time to attend in-person class

User journey map

I created a user journey map of Naïa’s experience to help identify pain points and improvement opportunities.


Design process

I started with the site map, and moved from paper wireframes to dirigal wireframes, then to mockups, low-fidelity prototypes, usability testing, then high-fidelity prototypes.

Sitemap

A primary pain point for users is the website navigation. My goal here was to make strategic information architecture decisions that would improve the overall website navigation thanks to a simple structure.

Paper wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and checkout flow in mind.

The home screen paper wireframe variations focus on optimizing the browsing experience for users when searching for art and handcraft tutorials. 

The account screen paper wireframe variations focus on allowing the users to easily access tutorials they have saved for the future or have already done in the past. 

Finally, the tutorial screen paper wireframe variations focus on suggesting tutorials that fit users' interests and help them chose the tutorial they want to follow now, thanks to detailed filter options. 

Because LearnCraftly’s customers access the site on a variety of devices, I designed for additional screen sizes to make sure the site would be fully responsive.

Digital wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. I used AdobeXD in this project.

Prioritizing useful button locations and visual element placement on the homepage was a key part of my strategy. 

Screen size variation

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of searching for a tutorial, adding it to the cart and playing it. At this point, I had received feedback on my designs from members of my team about things like placement of buttons and page organization. 

Usability study

Usability study on low-fidelity prototype

Moderated

Berlin, remote

5 participants

20-30 minutes

Main findings:

1. Users found the difference between home and tutorial confusing

2. Users were confused by the “cart” option

3. Users expected a “my tutorial” screen visible from the homepage

Mockups

Based on the insights from the usability study, I improved the navigation. 

I renamed and reorganized the homepage. This allowed users to navigate the website more quickly.

Since the service will be subscription-based, there is no need for an "add to basket" button. To facilitate navigation, users can now either play the tutorial now, or save it for later.

Screen size variations

Website on desktop

Website on mobile

High-Fidelity Prototypes

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.

Design kit

Accessibility considerations

Headings provide clear visual hierarchy

Colors respect accessibility standards

There is both a video and a text tutorial for users of all abilities, improving people with visual impairment and non-fluent speakers' experience

Impact

Our users shared that the design was engaging and intuitive to navigate

Going forward