Challenge: Develop an application that
makes DIY YouTube tutorials more accessible.
Lo-Fi Prototype
Hi-Fi Prototype
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.
User Research
Summary
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.
Scrubbing
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.
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.
Goals:
- Save money by using DIY YouTube videos
- Alternative to fast moving captions
- Quickly navigate the process while her hands are busy
Frustrations:
- “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.
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.
Goals:
- Cook with her family without messing with her tablet constantly
- Avoid having to wash her hands every time she needs to touch her device
Frustrations:
- “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.
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.
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.
Considerations:
- 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?
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.
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.
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.
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.
The Result
Hi-Fi Prototype
