Project overview
Teachers using Canvas Studio could upload captions or request auto-generated ones, but any corrections had to be made in third-party software. This required downloading, editing, and re-uploading files, which was a time-consuming, multi-step process.
This project introduced an in-platform Caption Editor that lets teachers edit captions directly in Studio with real-time video previews, eliminating the need for external tools.
Problem statement
The Challenge
Teachers could upload captions or request generated ones. Automatic captions had frequent errors, especially in technical or subject-specific terms. The only way to correct captions was to leave Studio entirely, edit in third-party software, and re-upload the file.
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
I joined after initial user interviews were conducted. My first step was to reprocess the research data and identify why earlier designs fell short. Although these designs addressed most user needs based on the interviews, several issues became apparent for the team, even without further testing.
Key problems
Modal editing was inefficient
Too many clicks and no way to edit multiple captions in sequence.
Lack of live preview
Teachers couldn’t see if captions fit the video timing or length.
Need for scalable editing
The design had to handle both a single typo and a full caption rewrite.
Design process
Ideation
These insights led me to recommend to the team to take a step back and let me come up with a new and fresh approach, rather than iterating on the existing design.
What I wanted to achieve
Keep video visible at all times, without obscuring elements or distractions.
Minimize clicks, while fully accommodating both minor edits and extensive ones.
Ensure the design is future-proof, can later support caption creation from scratch.
Prototyping & Testing
I proposed a fully dedicated Caption Editor page where every UI element served the editing task. No distractions, no nested modals. We went through multiple iterations, each time refining the design based on quick in-house usability tests and team feedback.
Solution
Caption Editor Page
The page had three main parts:
Vertical timeline
Searchable timeline, displaying each caption row in sequence. Each row is a clickable element that opens the editing panel. The rows can be deleted and new rows can be added.
Editor panel
Simple text area with start/end timestamp fields (millisecond precision), with auto-save feature.
Live video preview
The video is always visible, providing the user immediate visual feedback on adjustments.
Accessibility support
Accessibility was considered as soon as possible:
Ensured full keyboard navigation for caption editing and timeline navigation, with a clear focus order to prevent users from losing context while editing.
Defined ARIA labeling to all controls for screen reader compatibility.
Results and Impact
This update for Canvas Studio resulted in the following positive experiences in the affected schools:
Workflow simplification
Teachers could complete bulk caption edits in a single session without tool-switching. This reduced the editing process from 4 steps to 1.
Reduced editing time
Captions were fixed in minutes instead of hours, resulting in earlier caption access to students.
Legal compliance
Feature ensured adherence to U.S. accessibility laws for educational video captions.
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.
Personal highlights
Challenged inherited designs and pushed for a complete rethink based on research.
Future-proofed for features beyond the initial scope.
Integrated accessibility from day one, not as an afterthought.
.svg)
.png)