Subtitalizer

Product design Prototyping Machine learning
Subtitalizer tool being used to correct a transcript
I was the UX lead of a project to help journalists create captions for video content so that they are accessible to everyone throughout BBC’s New outlets. This was a three month project, working with the BBC's News innovation team – Newslabs.
Subtitalizer tool being used to edit subtitle timings A detail of the subtitalizer tool, showing interaction design of caption timings
The tool automates the creation of subtitles but gives users control to edit and format them quickly, ready for any BBC outlet.

Observing editors

I ran observations with video editors to see how they work and how they create captions. Combined with interviews this built up a picture of their pain-points and revealed how automation could help them best. Although creating captions and subtitles is time-consuming this research revealed the creative control journaists wanted to have over their video content.

A user creating captions during a ethnographic research session.
Ethnographic research with video editors helped to understand their creative process.

Mapping workflows across systems

A flow chart showing the steps video editors go through to create content for the News.

To help explain the complicated tasks journalists have to complete, I mapped out their workflows. This helped developers to understand how the tool needed to fit in with the already complex ecosystem of tools and identified how best to speed up the process, while ensuring editors had as much creative input as before.

Sketching ideas with users

A sketch of the tool created during the concepting phase Another sketch of the tool created during the concepting phase

Once I had identified some opportunities to help editors, I ensured they were involved as much as possible in the design process. Sketching the tools and it's interactions with them made sure we didn't make any assumptions about how they work and helped them to consider new possibilities.

Involving developers in these early sessions also helped generate ideas and ensure the team were aligned.

Prototyping complex interactions

To test detailed interactions, I used Axure to create interactive prototypes. Eventually the prototypes lost their ability to drive insights as we got closer to building the tool, but were useful to specify complex interactions to remote developers in slack without resorting to extensive documentation.

Animated gif of captions being edited in an interactive prototype
Animated gif showing editing of individual captions on a timeline

The solution

The solution aimed to make captioning as simple as creating a transcript in a word doc. We relied on the known behaviours of text editors which allowed captioning to become a much more flexible, creative process, allowing editors to compose, edit captions and publish in many formats.

Once editors upload the video, speech to text processing occurs. The user can amend a transcript of this and reformat the captions for any platfom and publish.

We also aimed to give them the power of a video editor timeline and text editor in-one, to make the most uncluttered captioning interface available. Knowing the exact needs of the users made it possible to strip out all but the required functionality and make for a simple, intuitive interface.

The tool is now used by BBC teams and speeds up subtitling of longer videos when the speed of getting an accessible video online quickly is important.

Subtitalizer being used to translate captions.

Other projects:

A map of the BBC News' planning process

BBC News Planning

Mapping & improving the various process involved in planning newsgathering activities.

Screenshots of an iOS app used for recording and sending video to the newsroom.

Mobile Newsgathering

Getting corresondents to send content into the newsroom faster.