Tutorial Tree

A responsive website project

Tutorial Tree is a tutorial website that offers a simple organized way to search and view tutorials. The typical user is between 18-65 years old.

My Role

UX designer leading Tutorial Tree’s website design. Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and design iteration.

The Problem

Available tutorial websites have cluttered and distracting layouts.

The Goal

For Tutorial Tree to be user friendly by proving simple, less cluttered, and less distractions when searching and viewing tutorials.

User Research Summary

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users look to tutorial websites to gain work knowledge, learn something new, or for do it self improvement projects. However, many tutorial websites are overwhelming and distracting, which frustrated many target users into spending more time than they wanted on the tutorial sites and not finding what they searched for. This caused a normally enjoyable experience to become challenging for them, defeating the purpose of finding a specific tutorial and wasting time that could be spent elsewhere.

User Pain Points

Time

Users spent more time than they wanted to searching for tutorials which led to frustration

Information Archetitcture

Users were unable to find the tutorials they searched for

Keywords

Users did not know what key words to use to enhance their search for particular things

Persona

Alonzo is a busy working father of 3 who needs intuitive tutorial website searching because he has limited time for research.

User Journey Map

I created a user journey map of Alonzo’s experience using the site to help identify possible pain points and improvement opportunities.

Sitemap

Difficulty with distractions while searching for tutorials was a primary pain point for users, so I used that knowledge to create a sitemap.

My goal was to make strategic information architecture decisions that would improve and simplify overall website navigation

Paper Wireframes

I sketched out paper wireframes for each screen in my website, keeping the user pain points about overcrowded viewing, and simplicity in mind.

The home screen paper wireframe variations focus on optimizing the browsing experience for users.

Paper Wireframe Screen Size Variations

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.

Digital Wireframe Screen Size Variations

Designing with multiple size devices in mind.

Low fidelity prototypes

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of clicking through tutorials.

Usability Study Findings

5 usability studies were complete. Users had confusion around my list and tutorial categories.

My List

Users found it difficult to add videos to my list.

Tutorial Categories

Users felt tutorial categories should be organized differently.

Mockups

Based on the insights from the usability study, I made changes to improve the site’.

My List

I added more ways to quickly add tutorials to "My List" throughout the pages.

Category Order

I updated the categories to reflect the card sort outcome in which users voted alphabetical order as the preferred order.

Key Mockups

Mockups: Screen size variation

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users search from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.

Mobile

Tablet

Desktop

Accessibility Considerations

There are 3 accessibility considerations that were included in the design of the app.

I used headings with different sized text for visual hierarchy

I ensured the colors met WCAG requirements

I designed the site with alt text available on each page for smooth screen reader access

Key Takeaways

Impact

Users were very elated with the hide related tutorials option. This was a common theme that seems to be missing from many other tutorial websites. This helps users stay focused and not easily get distracted from their search and limited users from reaching frustration and losing time on distractions.

What I learned

I learned that even a small design change can have a large impact on the user. I designed for a common tutorial website. There are already a lot of them on market. The most important lesson is that by focusing on the real needs of the user, you are able to identify design changes that can benefit a lot of people.

View Previous Project

View Next Project