Canvas Studio - Hassle-free caption editing

Project overview

The Caption Editor in Canvas Studio lets users edit captions directly on the platform, eliminating the need for external tools or downloading and re-uploading files. It aimed to make editing easier and smoother for teachers, with real-time previews on the videos.

The team

1 Product Designer

1 Product Manager

2 Accessibility Engineers

2 Software Engineers

My contribution

Processing research data

Design & testing

Accessibility audit

Problem statement

The Challenge

Teachers could upload captions or request generated ones. In case of mistakes or typos in the captions – which happened quite often with automatic ones – they had no option to edit them inside Studio. The only way to correct a mistake was to download the caption, edit it with a third-party software, and upload it again.

The Goal

The goal was to provide teachers with an easy and efficient way to edit captions within Canvas Studio. By enabling in-platform editing, we aimed to simplify the workflow for teachers, saving them time and effort, and improving their overall experience with the product.

Research and Insights

Processing research data

The initial research iteration of the project was conducted before I joined. The team performed user interviews to understand the needs and pain points of users. Based on this first iteration some initial designs were created. Although these designs addressed most user needs based on the interviews, several issues became apparent for the team, even without further testing.

Key problems

Editing each caption row within a modal felt too isolated and required too many clicks between rows. This method was only effective for correcting 1-2 minor mistakes but not for extensive editing.
Users could not see a preview of their edits on the video while making changes, because the modal was above everything. This made it difficult to determine if a caption line was too long.

Design process

Ideation

We realised that merely adjusting the previous designs would not achieve our goals. I proposed to the team to take a step back and let me thoroughly process the research data. I requested a few days to come up with a completely new and fresh approach.

What I wanted to achieve

An interface that was clear and free from unnecessary distractions.
The new design needed to accommodate both minor edits and extensive caption editing.
Additionally, I envisioned a design that would be future-proof, enabling teachers to create captions from scratch, thereby eliminating the need for external tools not just for editing but also for creation.

Prototyping

My concept was presented to the team, incorporating the research data and solutions to our common concerns. We went through multiple iterations, each time refining the design based on quick in-house usability tests and team feedback.

Solution

Caption Editor Page

Based on the research data and the concerns that were brought up, it was clear that the best solution would be to have a fully isolated page, where everything serves the purpose of editing the caption. The page had three main parts:

Vertical timeline

Half of the page is a vertical timeline where each entry is a "row" in the caption. Each row is a clickable element that opens the editing on the right side. The rows can be deleted and new rows can be also added.

Editor

A simple text area accompanied by two input fields for the start and end timestamp, on a milisecond level. These fields use auto-save.

Preview

The video itself is always visible, where the changes made in the editor can be previewed in real-time.

Mobile view

We successfully implemented the mobile version of this page. The video is always on the top of the page, only the the vertical timeline below it is scrollable. When the user taps on any of the entries, it opens a full-screen modal with the same input fields as on desktop. On mobile the auto-save feature is lost, the user has to manually save the editing of an entry, which closes the modal and brings back to the preview.

Results and Impact

This update for Canvas Studio resulted in the following positive experiences in the affected schools:

Accurate captions

The human-generated captions significantly improved accuracy, reducing the need for teachers to review and correct them.

Balanced work time

Teachers saved considerable time by not having to check and edit captions, allowing them to focus on other tasks.

Legal compliance

The feature ensured compliance with legal requirements for educational video captions in the United States.

Next steps

To ensure continuous improvement, the team plans to gather ongoing feedback to refine and enhance the feature further. Additionally, the aim is to explore the development of new functionalities, such as automated approval based on cost management details, and more detailed analytics for administrators.