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.
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.
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