The ART TUTORIALS Responsive Website
Project Overview
The Art Tutorial responsive website gives artists and art students the opportunity to access beginner’s and advance levels art tutorials. The classes feature videos and supporting documentation.
The problem:
Although artists and art students are generally busy creative professionals, they also need to advance their design skills to expand their portfolios of sellable designs for their clients and inventory offerings.
The goal:
The Art Tutorials website provides access to video tutorials and teaching materials to artists and art students to learn specific drawing and painting techniques taught by distinguished art professionals.
We will measure effectiveness by tracking the number of students logged in and actively viewing the video tutorials.
My role & responsibilities:
Lead UX designer & UX researcher, responsible for user research and analysis, sketching, wireframing, lo-fi and hi-fi prototyping, design concepting and design execution.
User Research
I conducted live interviews with 5 users and created empathy maps to understand their perspectives and needs. The primary users identified through research are art professionals and art students who seek to expand their design skills to expand their portfolios.
This user group confirmed initial assumptions about the need for art tutorials to enhance art skills. Further research revealed that students are looking for insightful documentation to the video tutorials, as well as a platform where they can publish their own work.
Pain Points
1 Accessing Tutorials
Artists and art students are serious about expanding their skills. They often find it difficult to find suitable classes that help them in specific technical aspects of their skills.
2 Sticking With The Tutorial Schedule
Once art students have found a tutorial of interest with a teacher of their liking, they would like to keep learning and practicing.
3 Connecting With Peers
Art students see online studying also as an opportunity to connect with their friends and peers. They’d like to showcase and view the works of the other students.
4 Support Materials
Students also requested additional support materials for the classes viewed in the video tutorials.
Persona
Milly Lacombe
Problem statement:
Milly is a busy, creative professional who needs to advance her design skills through online art tutorials, because she needs to expand her portfolio of sellable designs for her clients, as well as her inventory offerings.
User Journey Map
Milly's goals:
Advance her design skills through online art video tutorials so that she can expand her portfolio of sellable designs when presenting to peers and clients.
The sitemap for the Art Tutorial responsive website
Sitemap priority:
The primary concern about the site’s flow was the users’ ease to access video tutorials quickly, using the site’s top navigation. My goal was to make strategic information architecture decisions that made website navigation simple and time-efficient. Special attention was also given to integrating the student’s portfolio page in a user-friendly way.
From paper wireframes to lo-fi mockups
Paper wireframes
5 different screens were sketched to select the best user-friendly components, such as the bottom nav bar with the star and upload button, or the ‘Featured Artist’ component. Priority was given to the artists’ bios as content entry point.
Lo-fi prototype
Users can navigate from the top nav to all the sections, and/or access a tutorial video directly from the home screen and start their class.
Conducting the usability study
The parameter of the usability study
5 Participants
Study Type: Unmoderated usability study
Location: United States, remote
Length: 30 - 40 minutes
The findings of the usability study
1
All users want expanded project descriptions, such as the teacher’s name, what is covered in the tutorial, the length of the video, and what materials are needed.
2
All users need more user-friendly UI features such as an expanded video screen icon, one video play-button, a clearer portfolio UI icon, user-friendly uploading buttons, and sharing links.
3
All users need enhanced portfolio features, such as text entries for name and theme, descriptions, and uploading features.
4
More than half the users want a clearer distinction between ‘beginner’ and ‘advanced’ student.
Insights were then prioritized based on the analysis of the usability study
For analysis, an affinity map was conducted, and themes and topics were identified.
Priority 0
Based on the theme that: Tutorial videos need expanded project descriptions, an insight is: all users want to read as much as possible about the video tutorials they are choosing for studying, such as the teacher’s name, what is covered in the tutorial, the length of the video, and what materials are needed.
Based on the theme that: UI functions need be refined and more user-friendly, an insight is: all users want better UI interactions throughout, such as an expanded video screen icon, only one video play-button, a clearer portfolio UI icon, and user-friendly uploading buttons and sharing links.
Based on the theme that: the portfolio feature needs to be enhanced, an insight is: all users want more options when uploading content to their portfolio page, such as text entries for name and theme, descriptions, and uploading features.
Priority 1
Based on the theme that: the nav bar items need to be better prioritized, an insight is: 3 out of 5 users want a clearer distinction between ‘Beginner’ and ‘Advanced’, and a more user-friendly placement of the search function.
Based on the theme that: horizontal scrolling is received positively, an insight is: 3 out of 5 users want more horizontal scrolling content.
Priority 2
Based on the theme that: users like options when viewing the tutorial video, an insight is: 3 out of 5 users want enhanced video viewing options, and listings of related videos in the category.
Based on the theme that: User like to customize their choices, an insight is: 2 out of 5 users want to review all the content before making a choice, and also that they do not choose based on ‘Beginners/Advanced’ recommendations.
From lo-fi mockups to hi-fi designs
Home screen
Based on the insights from the usability study, I made changes to the categories of the video tutorials, distinguishing between ‘featured’, ‘advanced’, and ‘beginner’ levels.
Portfolio screen
Based on the insights from the usability study, students want to highlight and share their works. They also want an 'About Me' section, that highlights their accomplishments and history.
The mobile screen adaptation
The design variations for the mobile screen work well with the scroll-down user interaction.
Hi-fi prototype
Users can navigate from the top nav to all the sections, and/or access a tutorial video directly from the home screen and start their class.
Accessibility
Accessibility improvements were made for a better and more user-friendly experience.
1
Categories of video tutorials are clearly labelled, categorized, and made scrollable-to, by either scrolling horizontally within the category, or vertically, on the screen.
2
UI features and screen icons are prominently displayed on the screen.
3
The descriptions text are larger in size for easy readability.
Key takeways
Impact:
Users like quick access to the video tutorials. They want to spend their time learning with their favorite teachers, as well as connecting to their peers on the same platform. In tandem with studying along the videos, users want support materials such as descriptions and step-by-step help.
What I learned:
Users want to find their video tutorial of interest in an efficient manner.
Users like expansive learning, meaning, they like to use the platform for showcasing their works.
Users prefer categorized tutorial sections.
Thank you.