Experimental video player

A concept player optimised for scanning through technical videos that are predominantly speech

Roles

  • Interaction Design
  • Motion Design
  • Prototyping

This work is from my role as an experience designer at an advertising agency

A major computing company with a large library of technical videos tasked us with concepting a central destination for video content discovery. The goal was to create an interactive video experience that can answer people’s questions.

Considerations for technical video content

Unlike other popular video platforms with more visually-driven content, the videos on this platform are dominated by voice-overs paired with static visuals. Since many of the videos were long and covered multiple topics, it would be especially helpful to provide quick access to a specific part in a video. To achieve that without manual tagging of the large library of existing content, I proposed using the company’s own speech-to-text service to automatically generate timecoded transcripts at scale, improving navigation within these videos, as well as discoverability of the content via search.

A slide with high level bullet points Speakers sitting on stage
Many of the videos are composed of long static shots of narration over slides or talking heads, making it difficult to identify a place in a video using the seeker

Video transcript prior art

Educational video platforms commonly provide a way for users to browse through the full transcript of captioned videos. However, it is typically tucked away and kept separate from the video. For this platform’s narrative-driven, long-form videos, I saw an opportunity to improve navigation within a video by more closely integrating the transcript.

TEDx’s transcript view puts the video in a miniplayer Khan Academy puts the transcript in a smaller frame below the video
Educational video sites like TEDx and Khan Academy provide transcripts in a separate, secondary space from the main video

Video seeker for narration-focused content

Since the videos are generally in the format of static slides accompanied by long narrations, the video frame-based seeking functionality of regular video players was less useful for identifying a specific portion in the videos.

Instead, I proposed making the transcript the main focus when seeking, allowing users to browse through a video as though scrolling and skimming through an article.

The full transcripts are shown while scrubbing through the timeline, making it easy to see where you are in video even when the visual portion itself is not informative

Answering questions

Another natural language API available in the platform was an answering service that can take a natural language question as an input, and extract snippets from a corpus to answer the question. I proposed integrating this into the search functionality of the content hub, utilising automatically generated video transcripts as a corpus for answering questions. The search results would display answer snippets in text, and allow users to jump to the referenced portion of the videos.

Video library search results page, with answer snippets for each result
Users can ask a question on the video library and get exactly the part of the video that answers their question

Prototyping

Due to the complex functionalities in this experience, it was essential to create an interactive prototype to validate the concept. The prototype was created in Principle, making extensive use of independent components with multiple states.

Screenshot of views and components broken out into separate pieces
Breaking the designs down into separate components for prototyping, which also allowed design changes to be incorporated later
Motion design and interaction prototyping done in Principle