The Project

YouTube Stamper is a proposed feature addition to YouTube that would allow users to create and save custom lists of timestamps.

For this project, completed as part of DesignLab's UX Academy capstone projects, over the course of three weeks I created a working demo prototype of the functionality and its design.

The prototype is a design mockup created in Webflow, adding the proposed feature to a representation of YouTube's existing interface.

The prototype interface has functioning timestamping and timestamp editing features.

Research, design and usability testing work was performed solely by myself.

‍

Overview

YouTube has implemented tools for navigating inside videos, such as timestamping and visible sectioning (YouTube Chapters) and “most-replayed” highlights in video scrub bars.

However, the only way for average users to create their own custom lists of timestamps (without having to rely on the video creator) is to add a comment with a manually typed-out list of times.

This is potentially inefficient and also means that users have to keep scrolling down to find their comment to view their timestamps.

In addition, YouTube comments are all publicly viewable, which might be undesirable if a user just wants to have a list of timestamps for their personal use.

For these reasons, I wanted to explore an expansion of YouTube’s timestamping functionality.

‍

Research

Originally, I wanted to focus specifically on extending YouTube’s Embed Video feature, and creating a way for people to add custom lists of timestamps to videos when they went to embed them on third-party websites.

Thus, my original research question was the following:

‍How useful would a timestamp list on embedded videos be, and how many people would use it?

A random survey was conducted to get first-hand data regarding YouTube usage.

Survey questions were based around how people used YouTube, what videos they tended to watch, how often people used YouTube Video Chapters and YouTube’s built-in timestamping functionality, and how often people used YouTube’s embed video functionality.

If it could be shown that both chapters/timestamping and embed videos were reasonably popular, there would be a case that adding timestamping to embedded videos would be a useful feature for a significant number of users.

Survey Results

Though I ended up receiving rather fewer participants than I was hoping for in the time I had for the survey, I did gain some interesting insights.

The results of the survey were somewhat middling in regards to my original idea - though it showed that Video Chapters and timestamping were reasonably popular with general users, it also showed that hardly anybody used the embed video functionality.‍

The survey did, however, show that videos for which timestamping could be useful - how-to’s, educational, cooking, and music, etc. - were reasonably popular.

Average video lengths also skewed longer, suggesting that most people watch videos with lengths that could make timestamps useful.

‍

Defining the Design

The survey results showed, in short, that while timestamping is reasonably popular and desirable, the general user base does not often interact with the embed video menu.

As a result, I decided to pivot my focus from expanding the embed video functionality to designing a new timestamping feature for the general YouTube interface itself.

In this new formulation, YouTube Stamper would be a feature that would allow users to create custom lists of timestamps to be saved to videos.

I created the below user flow map to define how a user might use the feature. Click for a larger image:

From Wireframes to Design Prototypes

I built my first designs around testing the basic functionality of creating and updating custom timestamp lists, and how the feature can be integrated into the YouTube interface.

Usability Testing

To improve on the initial designs, usability testing was conducted with a group of random participants with the objective of answering the following questions:

• Are users able to find and open the new Stamper feature?
  ‍
• Are users able to use the Stamper feature to create timestamps while watching a video?
  ‍

The methodology for each test was as follows:

1. Participants were invited to find and open the new feature, after which the purpose and functionality of the feature was explained.
   ‍
2. They were then asked to start playing the video - a “Hot Ones” interview - and asked to create timestamps for every moment in the video when the interviewee was asked a question, along with a description of what the question or topic was.
   ‍
3. Notes were taken as to their actions while performing the exercise, and follow-up questions were asked about pain points and feedback.

‍

Usability Testing Results

A number of areas of improvement were identified as a result of the tests:

• Most participants were not able to immediately identify where the new feature was, and had to be prompted in order to find it.
  ‍
• Almost all participants were observed to start clicking on the description field itself to try to edit timestamps, and were noted to be briefly frustrated when they realized they needed to click on the separate edit button itself.
  ‍
• Participants almost always preferred using the auto-timestamp button rather than the manual entry fields, and some feedback was received suggesting that the manual fields were superfluous.

‍

Iterated Designs

Back to Demo Video, showing iterated designs.

• Control to open the feature modified for higher visibility, and to fit with YouTube’s own designs for elements such as live chats.
  ‍
• Timestamps can now be edited by simply double-clicking on the description or time.
  ‍
• Manual entry fields removed and auto-timestamp button given more prominence.

‍

Next Steps and Thoughts

Given more time, the next step for this project would have been designing out timestamp list sharing/exporting.

The feature as designed is envisioned to automatically save timestamp lists and edits to local data or the user profile, but it may also be useful and desirable to have a way to share the saved timestamp lists with others.

With more time, I would wish to explore the best ways to add this feature to the interface.

This was a highly interesting project for me in terms of research and usability testing, mainly because the results on both steps caused me to significantly challenge and re-evaluate my previously held assumptions.

For the preliminary research, seeing how few people actually engaged with the embed video menu caused me to pivot my original design intentions to ones that would be useful to a wider audience of users.

For usability testing, seeing how people actually interacted with my interface caused me to re-evaluate what I thought was the most intuitive method of editing timestamps.

I think this was an excellent experience for me to work through, and an example of the power of user-focused design thinking to provide new and useful perspectives.