YouTube Stamper

Link to YouTube Stamper Prototype Demo

• Uses YouTube Video Embed, best viewed on Chrome and Edge.
• Click on clock icon to add timestamp, double-click on timestamps to edit, enter or unfocus to save edit.
• Supports "v=" URL argument for YouTube Video IDs, e.g. https://youtube-stamper-demo.webflow.io/v3?v=qxGmGGmvFD8

The Project

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

The Webflow prototype adds the feature into a YouTube-style interface with working timestamp creation and editing.

I handled the full cycle: research, design, prototyping, and usability testing.

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 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 both chapters/timestamping and embed usage were reasonably popular, there would be a stronger case for adding timestamp lists to embedded videos.

Survey Results

Though I ended up receiving fewer participants than hoped for, I gained useful insights.

The results were middling for the original idea: while Video Chapters and timestamping were reasonably popular, hardly anyone used the embed video functionality.

The survey did show that videos where timestamping is useful - how-to, educational, cooking, and music content - were reasonably popular. Average video lengths also skewed longer, suggesting timestamps could be valuable.

Defining the Design

Since timestamping was desirable but embed menu usage was low, I pivoted from expanding embed functionality to a timestamping feature for the general YouTube interface.

In this new formulation, YouTube Stamper would let users create custom timestamp lists saved to videos.

I created the below user flow map to define how a user might use the feature:

From Wireframes to Design Prototypes

I built initial designs around testing core timestamp list functionality and integration with the YouTube interface.

• Design prototypes were created in Webflow to demonstrate adding, editing, and removing timestamps.
• There were two ways to add timestamps: auto-stamp at the current video location or manual time and description entry.

Usability Testing

To improve the initial design, usability testing was conducted with participants to answer:

• 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:

1. Participants were invited to find and open the new feature, after which the purpose and functionality were explained.
2. They were asked to play a Hot Ones interview and create timestamps for each question moment with a topic description.
3. Notes were taken on their actions while performing the exercise, followed by pain-point and feedback questions.

Usability Testing Results

• Most participants could not immediately identify where the new feature was.
• Many participants tried to click description fields directly and were briefly frustrated by requiring a separate edit control.
• Participants strongly preferred the auto-timestamp flow, and some feedback suggested manual fields were unnecessary.

Iterated Designs

Back to Demo Video, showing iterated designs.

• Open control was updated for better visibility and closer alignment with YouTube patterns.
• Timestamps can be edited by double-clicking the description or time.
• Manual entry fields were removed and auto-timestamp was given greater prominence.

Next Steps and Thoughts

Next steps would focus on timestamp list sharing/export and on refining save behavior for local or account-based storage.

This project showed how user research and testing can quickly redirect scope toward a more useful, intuitive solution.