The objective of this UX study case is to design and develop an Art Tutorials Responsive Website, which aims to provide an engaging and educational platform for art enthusiasts to learn and improve their artistic skills.
The website's primary goal is to offer a user-friendly and inspiring experience that caters to both beginners and experienced artists.
THE PROBLEM
1. Help art enthusiasts find a wide range of Beginner art tutorials.
2. Help artists to find advanced tutorials to inspire and teach them new techniques.
THE GOAL
Create an easy to use website that helps users find Art tutorials that are specific to their needs .
DURATION
3 weeks
ROLE
UX, UI Designer
RESPONSIBILITIES
Plan and conduct user research and competitor analysis.
Interpret data and qualitative feedback.
Create user stories, personas, and storyboards.
Determine information architecture and create sitemaps.
Create prototypes and wireframes.
Conduct usability testing.
USER RESEARCH: SUMMARY
To gain insights into our target audience, we conducted interviews with both aspiring and experienced artists. Key findings included:
1. Diverse Skill Levels: Our users ranged from complete beginners to professional artists looking to refine their skills.
2. Preferred Learning Styles: Users showed a preference for visual and interactive tutorials that could accommodate various learning styles, such as step-by-step video tutorials and written guides with illustrative images.
3. Motivation: A common motivation for users was the desire to explore various art forms and techniques, including drawing, painting, digital art, and sculpture.
PAIN POINTS
Finding a suitable art tutorial is time consuming
The art tutorilals I find are very complex and long
The serach results are usually not in accordance with my needs
PROVISIONAL PERSONAS
USER JOURNEY MAP
User task:
Use the art tutor website to Find a Tutorial
SITEMAP
Difficulty in finding the right tutorials was a primary pain point for the users so I used that knowledge to create the site map
My goal was to make strategic information architecture that would make the tutorials easy to find using filters at every stage.
PAPER WIREFRAMES
Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about navigation, browsing, and finding the right tutorial in mind.
PAPER WIREFRAMES SCREEN SIZE VARIATIONS
Because Art enthusiasts will access the site on a variety of different devices, I started to work on designs 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.
Prioritizing useful filter locations and search options was essential and the home page was a key part of my strategy.
DIGITAL WIREFRAMES SCREEN SIZE VARIATIONS
Because Art enthusiasts will access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
LOW-FIDELITY PROTOTYPE
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of finding a tutorial and watching it.
USABILITY STUDY: FINDINGS
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
Once at the tutorial screen, users didn’t have a way to save or share the tutorial
Users thought that the suggested videos should be related to the tutorial
MOCKUPS
Adding more customization options to the Art Tutor Video Tutorials
HIGH-FIDELITY PROTOTYPE
The hi-fi prototype followed the same user flow as the lo-fi prototype, which is findings tutorial to watch, and included the design changes made after the usability study
Impact
Our target users shared that the design was easy to navigate through, the tutorial and organization of element was very helpful in finding the needed tutorial, and demonstrated a clear visual hierarchy.
What I learned
I learned that focusing on the pain points and needs of the users must always come first and guide all design decisions and that the smallest detail matters.
Next Steps
Conduct follow-up usability testing on the new website
Identify any additional areas of need and ideate on new features
Create subtitles and multiple languages options