VideoMyJob Subtitles Case Study

Project Overview

When posting on social media feeds where videos autoplay on mute, videos without subtitles receive less engagement. They are also not accessible to viewers who are hearing impaired. We saw an opportunity to include subtitles in the video creation process to provide additional value to our users and meet enterprise accessibility requirements.

Process

Create user personas
Understand tech requirements
Conduct competitor research
Sitemapping
Wireframing
High fidelity designs
User Testing
Analyzing results

Understanding The User

User Type 1: The VMJ Champion

Within VideoMyJob teams, we see most success when there are users that champion video as a recruitment tool, encouraging the rest of the team to adopt. This is usually a Recruitment Manager. They care a lot about the engagement that their getting on their videos and how it affects metrics that are important to them. We believed that this type of user would use subtitles to increase engagement on their videos. These users are time poor but will adopt new features when they see the value in it.

User Type 2: Just Checking The Box

The other type of user we foresore using the subtitle editor were recruiters who were instructed to add them by managers. This would either be because their managers saw the value of subtitles or to meet an accessibility requirement set by the company. While not as time poor, this type of user would try to get through the process as quickly as possible.

Across both user types, using a large assortment of tools is not common and so are generally not tech savvy.

User End Goal

Add accurate subtitles to my video on all applicable platforms.

Understanding Tech Requirements

Audio Transcription

Our developers were able to create a proof of concept using Amazon transcribe with around 90% accuracy depending on accent and pronunciation of words. This was an important step to undertake before design as not having audio transcribe would increase the user effort to add subtitles significantly and influence whether we thought the tool would provide enough value to our users for them to adopt.

Subtitle Publishing

Another important technology unknown was whether users would be able publish their video with subtitles included and have them display on platforms correctly. Developers were able to upload videos from our platform to Facebook and YouTube with subtitles included. LinkedIn is not a platform that we can currently publish to because of API limitations, so we knew we had to provide a solution for users that wanted to do download their video and post them elsewhere with subtitles included.

Competitor Research

Before diving into designing anything, I first researched subtitle editors to see what kind of features and UX solutions they have implemented while keeping in mind the specific type of user they are designing for. I use this to get inspired but also to see where poor UX tends to occur with this type of tool.

YouTube Subtitle Editor

Automatic audio transcription takes out a lot of the work
Has the flexibility to to add, edit and delete subtitles
Ability to adjust the start and end time of each subtitle to perfect timing
The user is able to reach a wide audience with the ability to add multiple subtitles in different languages
They have the ability to save their subtitles as a draft and publish later

YouTube Subtitle Editor UI

The YouTube subtitle editor has good customisation options for users that want high quality subtitles and to reach viewers from multiple countries. However, the extra features adds to the complexity of the tool which results in a cluttered UI and lowers ease of use.

Clideo

Does not automatically transcribe audio resulting in extra user effort
Small, hard to read font
Has ability to customise the appearance of subtitles
Users can download video with the subtitles added or download the subtitle file separately

Clideo Subtitle Editor

Clideo has many useful features while not feeling overly cluttered. It is however missing auto transcription which makes adding subtitles time consuming. The ability to customise the appearance of subtitles if wanting to add subtitles directly on the video is nice.

Kapwig

Unusual layout with low importance given to the video preview. Subtitles are stacked instead of horizontal, removing the need for horizontal scrolling
Hard to view subtitle text on small video preview
Subtitle styling options included
Subtitle translation option is great

Kapwig Subtitle Editor

Kapwig has an uncommon layout with a small video preview and vertically positioned subtitle timelines. While the overall hierarchy places the main task of subtitle editing at the top, a small video preview makes it difficult to invision the subtitles.

Web Sitemap

I first created a sitemap for the web experience. This allowed me to quickly figure out the basic user journey and how I might organise all the steps users need to take.

Subtitle Editor Exploration

After fleshing out the basic structure with a user flow diagram I created some low fidelity sketches to explore different layouts. When I felt I was ready to flesh the layouts further, I dove into high fidelity designs in Sketch. I created versions with features that at this stage we were not sure if we wanted to include in version 1. This helped us get a sense of what the editor could be like and if we felt these features would be valuable to our users.

Version 1

This version had the subtitle editing on a side pane to the left and a timeline below a video preview. It only had the option to save and cancel and was missing a couple crucial options. I felt the hierarchy of different elements worked well though.

Combining Subtitle Text Editing And Timeline

This version allowed users to edit the subtitle text directly on the timeline which decluttered the screen quite a bit. There were down sides to this design though as users would have to use horizontal scrolling instead of vertical and for users that only want to correct spelling and grammar, this was a more complicated experience.

Exploring Styling Options For v2

In the nav bar I added the option to toggle subtitles on and off. Having the ability to toggle the subtitles was crucial so that users could display them once they have checked for spelling and grammar mistakes.

I also explored how subtitle styling may work, adding the 'text' and 'design' tabs. While this wasn't planned for v1, it was good to make sure this feature would work with the rest of the subtitle editor I had designed.

Final Subtitle Editor

I shifted the text editing panel to the left so that the video was centered on the screen. I simplified the options in the nav bar and added a switch that clearly communicated whether the subtitles were on or not and that you could toggle this option.

The service we used for transcribing the video audio to subtitles also had a confidence rating which could indicate how confident it was that it had transcribed a certain word correctly. I was able to use this and highlight which words we may have gotten wrong. This made it easier for users to find potential errors. The progress bar also encouraged them to check them all before turning their subtitles on.

We were unsure whether or not to put in the dev effort to include the timeline editor for adjusting timing. During user testing of early builds, the users didn't indicate that they wanted to adjust any of the timing, generally wanting to spend as little time as possible finessing the subtitles. This was great as were able to validate the need for this feature before commiting time to it. It also resulted in a simpler interface, increasing ease of use.

We also didn't include the option to add or delete subtitles, only to change the text. The result was a tool where the user was encouraged to only complete a handful of tasks; review, check spelling and grammar, and turn on the subtitles, everything else was done automatically. When the user selected to turn on their subtitles, we also communicate what steps to take if they wanted to add subtitles on a platform that we don't currently support, e.g. LinkedIn. And linked to a step by step guide.

Final Designs

These include all modals, error states, empty states etc.

Some other small details that improved the overall user experience:

We tweaked subtitle character limit tolerance to avoid large blocks of text
If a video has a caption overlay, the subtitles shift up so that they don't overlap
Coach marks added to help users understand how to use the subtitle editor
Users can re-transcribe subtitles if set to wrong language

Results

Subtitles Turned On Compared to Video Published

Since release, 16% of published videos had subtitles enabled. While not high, I feel that this is inline with the kind of adoption that we were expecting. However, there are likely some opportunities to increase this number in the future.

Subtitle Editor Completion Time

Users who go from opening the subtitle editor to turning on subtitles and finishing editing within one sitting do so in 5 minutes and 54 seconds on average. While we can't determine exactly that this was within one sitting, setting the conversion time frame to 30 minutes increases that likelihood. I think 5 minutes on average is a great time and is inline with our goal to create and easy to use subtitle editor.

Conclusion

This project had many unknowns and a lot of reliance on tech to ensure a great user experience. We ended up with a subtitle editor that automatically creates subtitles based on the audio of your video with relatively high accuracy that takes little time.

There were opportunities during the project where I believe we could over built the editor and added features that were not necessary to meet our users goals. We could have added the ability to add and remove subtitles that were not placed there by the automatic transcription and added the ability to adjust timing slightly. I believe having these features here would complicate the editor, giving more options would have made the tool harder to use and appear more intimidating to try out. Users may have felt inclined to use these and fiddle around with small details without much gain.

It would have been great to have subtitles also publish to LinkedIn, but this is unfortunately a limitation of LinkedIn's API. This project reiterated the value of MVP product development. We were able to test assumptions without using extra dev time and created an easy to use subtitle editor that met our user's goals.

Video Subtitle Editor