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.

Link to the lo-fi prototype in Figma

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

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.

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.

All users need enhanced portfolio features, such as text entries for name and theme, descriptions, and uploading features.

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.

Link to the hi-fi prototype in Figma

Accessibility

Accessibility improvements were made for a better and more user-friendly experience.

Categories of video tutorials are clearly labelled, categorized, and made scrollable-to, by either scrolling horizontally within the category, or vertically, on the screen.

UI features and screen icons are prominently displayed on the screen.

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.

Access the full case study for the Art Tutorial responsive website

Thank you.