Timer Feature for Youtube

Project Overview

Youtube has a plethora of channels and videos that are dedicated to helping people sleep. The one thing that is left is what happens to the video when the person falls asleep. There has to be a way to stop the app once a person falls asleep. This project is focuses on creating a timer for that purpose.

Button Text
Time
6 Weeks
Role
Researcher & Designer
Tools
Figma,  Photoshop, Google forms

Research

Competitive Analysis

I looked at some of the video services that offered a product similar to youtube. The three direct competitors were Netflix, Hulu and Prime Video. I also looked at Audible, Scribd and spotify as  indirect competitors.  They also offer services that can help people sleep.

Competitive Analysis Main Points

  • The main show platforms don't have a direct sleep timer (Netflix, Hulu, Amazon Prime video)
  • Netflix was testing one out but there is no roll out or further information about what happens next
  • People on the community section of hulu are asking for the sleep timer on live tv, it has 171 votes (it was posted 4 years ago)
  • Audible, Scribd and Spotify have a sleep timer

Survey

I created a survey to get some responses in hopes to validate my feature. I created a google form with 11 questions. I modified the survey after 4 responses because the responses weren’t enough to support the feature and didn’t ask the participants about their frustrations. There were 15 survey takers.

Survey Results

Secondary Research Findings

Secondary research revealed these interesting key points below:
  • Users have to find other workarounds to stop the video
  • Youtube doesn’t have a direct timer

Persona

Making the persona was a little tough. I couldn’t figure out how to write the goals/ needs and the bio. I ended up using the personal statement for the bio and pulling the goals and frustrations from the survey.

Information Architecture / Sketches

I used netflix's example and scribd to get an idea of the flow.  Youtube was also key in helping me figure out how this addition would fit into the current flow. I took screenshots directly from the youtube app and used it to help me create a visual task flow.

Sketches

I created some sketches to visually see the layout before moving on to the wireframes. The sketches helped me to figure out what screens to create. It also helped me to figure out the order.

UI Design

I then created a mid-fi wireframe. This wireframe was a basis for all the screens. It saved me a lot of time. I just had to look for icons and photos to add to it afterwards. I reference some of the screenshots I took from youtube as well. This helped me to able to work on the spacing as well.

Main Screens

User Testing

Screenshots from the User Test

Test Results

Key Insights Affinity Map

Revisions

These were the main revisions from the research results
  • Add room to custom boxes
  • Timer starts immediately or has a delay
  • Add second flow of making video clickable and having timer icon there
  • Maybe after timer is set (have message say timer is set but you can always change the settings in the video as well)

Final Prototype

Next Steps

Key Takeaways

Trust the process
  • It was important to remind myself that each part of the design process will lend to another
UI/UX is an iterative process
  • Keeping this in perspective helped to move the project along

Case Study Images Credit : Unsplash.com