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

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.

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. 

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. 

Support Materials

Students also requested additional support materials for the classes viewed in the video tutorials.


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


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 

Priority 1

Priority 2

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 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


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: 

Thank you.