Embedded Files
LearnCraftly is an e-leaning platform that offers artcraft tutorials to help all users enjoy accessible tutorials.
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
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
User paints points
Personalization
Personalization
Finding videos that fits the viewer’s previous knowledge is tedious
Feedback
Feedback
Lack of feedback with online tutorial make it difficult for craft-enthusiasts to improve.
Experience
Experience
Browsing endless video-website takes the pleasure out of crafting for craft-learners.
Problem statement
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
User journey map
I created a user journey map of Naïa’s experience to help identify pain points and improvement opportunities.
Design process
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
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
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
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
Usability study on low-fidelity prototype
Usability study on low-fidelity prototype
Moderated
Berlin, remote
5 participants
20-30 minutes
Main findings:
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
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
Screen size variations
Website on desktop
Website on mobile
High-Fidelity Prototypes
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
Design kit
Accessibility considerations
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
Impact
Our users shared that the design was engaging and intuitive to navigate
Going forward
Going forward
Conduct follow-up usability testing after launch
Identify any additional areas of need and ideate on new features
Page updated
Google Sites
Report abuse