PhaseThru Logo

Challenge: Develop an application that makes DIY YouTube tutorials more accessible.

Lo-Fi Prototype
Hi-Fi Prototype
Phase Thru on clay mockups

The UX Design Process: Empathize

The problem:

YouTube tutorial videos can be challenging to follow along with and navigate.

The goal:

Design a solution that allows you to follow along with YouTube tutorials easily.

Image of mobile device loading YouTube videos

User Research


When the pandemic hit videos for "beginners" got over 9 million views in 2020 alone. When following tutorials on cooking, makeup application, auto repair, and other activities, the user often can't use their hands to scrub through videos. Besides situational challenges, disabilities such as hearing loss can make it hard to follow along with videos, and closed captions move as fast as the video. Crucial information often goes by rather quickly. Often video descriptions are hidden by default in videos as well.

Pain points

Video length

Creators edit tutorial videos to be descriptive but as short as possible.

Hand Limitations

Following a tutorial often keeps your hands busy. Some activities can even make your hands dirty, and dirty hands don't mix with expensive devices.


Even with timestamps and descriptions, YouTube videos can be challenging to navigate. Timestamps don't always take you to the right place, and video descriptions are often either long and wordy or of no help.

Image of a mobile device beside DIY tools
Dahlia Persona Photo

Persona : Dahlia

Dahlia is a thrifty DIY'er who needs more accessible YouTube how-to videos because of her permanent partial deafness disability and situational challenges when her hands are full, and she's trying to follow along.


  • Save money by using DIY YouTube videos
  • Alternative to fast moving captions
  • Quickly navigate the process while her hands are busy


  • “Some things I can do myself, but a 3 minute video for a process that takes 20 minutes is a recipe to keep messing with my phone.”
  • “My hearing is limited and the small closed captions are wordy and too small to read when my phone is a few feet away while my hands are busy or dirty to keep scrubbing back in the video.”

Dahlia is halfway to a B.A. in Applied Mathematics and works multiple jobs to pay her bills and avoid student loans. Dahlia has used YouTube for many DIY projects with her car and freelance art career. She values her time and would like to speed up her projects. Dahlia also needs to be able to see the steps written out concisely and in large text due to partial hearing loss and when viewing a process on her phone sometimes she can’t hear it and captions are often too small and wordy to keep up with.

Raina Persona Photo

Persona: Raina

Raina is a loving grandmother who needs more accessible ways to follow her YouTube cooking videos because she takes her time and cooks with her grandchildren.


  • Cook with her family without messing with her tablet constantly
  • Avoid having to wash her hands every time she needs to touch her device


  • “Cooking videos are great, but they aren’t really made to follow along with”
  • “If I forget something I have to stop, wash my hands, and search for the step again”
  • “I love cooking with my grandbabies, but they’re young and energetic and sometimes that energy is loud. I need a way to read the steps if I can’t hear it.”

Raina is a retired Art Director who loves cooking and experiencing different foods and exposing her grandkids to other cultures’ cuisines. She uses YouTube on her iPad to find and follow interesting recipes. Raina cooks with her grandkids and sometimes she stops to help them or forgets a step and needs to see a part of the video again. While cooking, she often has dirty hands and can’t touch her device and unless she keeps washing her hands, delaying the process even further.

Phase Thru User Map

User Journey Map

Our goal is to make YouTube DIY or how-to videos easy to follow along with and more accessible. To do this, I slow the video down by dividing it into steps and displaying concise descriptions in easily readable methods.

The UX Design Process: Define

Project History:

PhaseThru was a project I had the idea for during attending the MIT xPro coding bootcamp. I often used YouTube tutorials for coding projects as well in other parts of life. I've used YouTube tutorials to repair multiple vechicles, followed many recipies, and even used it when I was starting my own coffee shop to learn advanced drink recipes.

Old version of Phase Thru

Starting Point

The starting point was just a pieced-together group of elements coded with functionality in mind and little to no consideration for accessibility and design.


  • Platform most likely to be used on
  • Simple to use "phasing" interface
  • Step descriptions simple enough to grasp at a glance
  • Some people won't be able to sit and "phase" videos
  • What kinds of tutorials would this system work with?
Phase Thru Site Map

Information Architecture

I designed the website's structure to be simple and easy to understand. The application's structure is hierarchical, allowing the user to navigate through most tasks using the navigation bar or menu. This will also allow for new features to be added to the system without having to update the entire website's structure.

The phasing and viewing processes will simulate a sequential structure, although the page will not change. The video player will remain static and control the tutorial video. Meanwhile, the phase descriptions will be dynamically swapped with the user-submitted phase data.

The UX Design Process: Ideate, Prototype, and Testing

The Process:

I started with rapid iterating on the design with paper wireframes and mockups. I then built digital wireframes using Figma and the best design elements from the paper concept sketches.

Phase Thru Digital Wireframes

First Iteration

I translated the best elements from the rapid paper iterations to digital wireframes, and I created a rough low fidelity prototype for the first round of usability testing. This minimal prototype helped reveal flaws in the initial design and missing elements from the user flow.

First round findings:

  • Initial design of the phase description app was too small and hard to read.
  • Users had trouble understanding what was going on in the app. More screens were needed to follow the process from start to finish.
  • Users wanted a preview of any phases they could choose from, and the option to edit them.
Phase Thru Prototype

High Fidelity Mockups and Prototype

I addressed the issues brought to light from the first round of testing and put together mockups and a high-fidelity prototype. The user flow is more fleshed out with a complete phased video example. I maximized the space for the video description, added a progression element to show the user where they are in the phasing process, and reworked the initial search flow.

Lo-Fi Prototype
Hi-Fi Prototype

Phase Thru Mockups

Progressive Enhancement

As of 2021, mobile devices accounted for over 60 percent of YouTube viewing, and only 12 percent of all traffic is through desktops. This fact, in addition to the types of videos we are targeting for phasing: cooking videos, makeup tutorials, auto repair walkthroughs, and crafting videos, is not likely to be done with a desktop computer close. I have laid out possible mockups of other screen sizes using the principles of progressive enhancement. I will build out the user flows in these sizes and iterate over these designs to improve larger devices' user flow and structure.