caption editor

Editing captions is a finicky process. The editor needs to be able to zoom through every line of speech in a (potentially long) video, read a lot of text, make tiny edits, and check how the captions will look to the end user. And our existing editor didn't make it easy to do any of that!Ā Come see how IĀ fixed it.

The problem

Donni from Customer Service department had the unhappy task of fielding literally thousands of SERV tickets about our stupid captions editor. The current version had been cobbled together super quickly 3 years before I joined the company and literally every customer who used it hated it.

It was my job to convince the CC Editor to be Human-Centered and actually solve more problems than it caused!

This was always going to be a big job but it was honestly kind of heartening to know that there was literally no way to make this tool worse than it already was. DONā€™T WORRY DONNI Iā€™M FIXING IT!

Research:Ā The airing of grievances

Remember how I said that every customer hated our Captions Editor? I scheduled some interviews with the most frequent complainers to walk through their process and figure out what was actually important.

These were the most common complaints:
  • A user finishes editing a caption. They try to click into the next caption. Oops! Actually they need to press "save"Ā first. This was the number one complaint and it made customers' blood boil.
  • The video preview window scrolled offscreen, which meant that the user was blind when editing captions far down the list.
  • Clicking "add caption"Ā puts a random caption alllll the way at the bottom of the list of captions, instead of at the timecode at the video that the user is currently viewing
  • It wasn't obvious that it was necessary to hit "publish"Ā in order for viewers to be able to see edits
Now there's no doubt about what's wrong with this feature!Ā Now let's go come up with something better.

The design

The video preview can't scroll out of view anymore

I mean this was an easy win, but putting the captions in a scrollable table took 1 second to decide on and solved like 75% of the usersā€™ issues. Previously, the captions just freely extended to Timbuktu and the video preview was pinned to the top so users couldnā€™t see any of their captions in the video preview

A timeline makes it so easy to navigate the file

Users hated having to struggle with tiny, intermittently visible playback controls on the Player Preview-- so I put in a timeline! This allows the user to scroll easily through time and see the length of captions represented visually instead of literally having to do math with timecodes.

I removed clicks from the editing process

Users also hated that they had to press a ā€œconfirmā€ button when a caption was changed. Their instinct was to simply click into another caption and begin editing-- the ā€œconfirmā€ button really felt like a hindrance.

Here, the user can simply click a caption or use arrow keys to navigate, with no added friction.

IĀ added a more obvious "published"Ā and "unpublished" toggle

With the addition of this little nugget, there's no ambiguity about whether or not a caption track is visible to viewers.

The result

The caption editor went live as part of a heroic sweep of ALLĀ of our track editors -- chapters, audio, and ad cues!Ā The workflow improvements were immediately obvious to users, except for a key one:Ā the timeline!Ā This feature was unfortunately descoped.

Despite the absence of the timeline-- users responded really positively to the overall workflow improvements and we receive FARĀ FEWERĀ complaints from customers. And that keeps Donni from Customer Service happy!