Closed Caption Editor

ROLE:

Design Lead

RESPONSIBILITIES:

UX Research
UX Design
UI Design

TIME FRAME:

Q1 - Q2 2023

RESULT:

A much more intuitive experience for customers, fewer help desk tickets

This was one of those really satisfying projects that improves the lives of my colleagues in addition to our users.

JWP's existing closed caption editor received SO MANY complaints from customers. It was kind of a low-level plague hanging over the heads of our help desk, PMs, and Account Managers. So I fixed it!

The problem

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.

Our existing editor didn't make it easy to do any of that! And Donni from the help desk was fielding a hopeless number of complaints from users.

How might we make the process of editing captions intuitive for our users?

Research: The airing of grievances

I scheduled some interviews with the most frequent complainers to walk through their process and figure out what was actually going wrong in their workflows. And they did NOT hold back! I was able to form a really detailed picture of how this tool was disrupting their workday.

A few complaints popped up across many interviews:

So essentially, what I needed to do was:

  • Remove friction when moving from one caption to the next
  • Help users understand where things exist in time
  • Make the video preview sticky so it can't ever scroll offscreen
  • Make it super obvious that caption tracks must be "published" in order for viewers to see them

Solutions

Frictionless movement between captions

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.

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

A timeline clarifies the duration and position of captions

Time was represented in a weird way in the existing tool. It was just a list of captions with timecodes, but users tend to think of time on the x-axis. Except in China, interestingly, but that's an issue for another day.

Ultimately, the way to allow users to form a correct mental map of this feature (and thus be able to predict where captions exist in time) is to provide a timeline! Now, instead of having to parse and compare hundreds of timecodes, users can see each caption represented as a chunk of time. It's much more obvious how the captions relate to each other! 

Now, when users add a caption, it appears right where they expect it to.

"I use the playhead to navigate to the correct spot in my video"

"I press 'Add Caption'"

"A new blank caption appears at my current position in time!"

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 solved the most annoying workflow problem for customers.

It's crucial to see captions overlaid on top of the video to assess length, legibility, and timing-- and this change allowed customers to view the preview no matter how far down the list they're working

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

Once this feature had been developed and passed QA, my team made the decision to release it behind a cookie at first. This would allow us to circle back with the angry customers we had interviewed in the research stage to ensure that the tool solved their initial problems.

The response was incredible! These users were able to create and edit caption tracks with very little guidance. The thing that seemed to really make the biggest difference was the timeline. All of a sudden, users were able to create an accurate mental model of how time worked within this tool.

Reassured, we removed the cookie so the new CC editor was available to all users and we never looked back.

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!