brief
Subtitles for YouTube is a chrome extension which does exactly as the name suggests, adds subtitles for YouTube videos. Currently, it's been used by 40k+ users and the extension allows us to add any .SRT(subtitle file format) or search any subtitles to be added to the video from the opensource subtitle library projects such as Amara or OpenSubtitles. This was developed by a friend of mine and he requested me to help around with the interface designs and the implementation of it.
initial ideations
It was a first time for me to work on a chrome extension, be it designing or developing it. I consider myself as an average chrome extensions user. I had to dig deeper into what extent a chrome extension can actually alter the behavior of the web page experience.
With the simple reading of docs, found out that a chrome extension can replace or change any aspects of the loaded DOM in a web page.
I also categorized the usual extensions into the following
- Performing actions through the popup from browser's extension bar
- Altering existing web page content or elements
- Adding new elements along with the existing web page content or elements
Various possible types of extensions
Designs
There were three main actions of the extenstion which the user will interact on.
- Search Subtitles - Search any subtitles and apply them to the video
- Upload Subtitles - Use custom subtitles for the video
- Settings - Few user settings on default language, subtitle providers etc
After getting to know the possibilities of a chrome extension, understanding what type of users would benefit such extensions - I decided to make the subtitles search and upload functionality inclusive with the existing YouTube UI instead of the popup UI which would be an obtrusive experience. My main goal was to not alter the existing video viewing experience of YouTube which is awesome.
Addition of the subtitles option along with other YouTube options to keep it consistent
Appstore screenshots showing the functionality
Marketing website for the extension
Challenges
So far, I liked the way Subtitles options was introduced without any obstruction to the users. But I found two main challenges which need to be addressed:
- There was a possibility where users might actually miss out on the sweet new subtitle tab below the video since there was no prior education for the user unless they saw the screenshots posted on the extension listing.
- What if YouTube changes their UI?
Decided to add a nifty on-boarding modal for the first time when the extension loads to handle education to users regarding the new extension which was installed. This creates visibility and a way of interaction to the users instead of just getting installed in the background. Regarding YouTube changing their UI, I believe the only way to handle was to update the extension to support their new UI when it changes.
Key Takeaways
This was a fun project to work on. I learned a lot on building extensions, got my hands dirty with the way of modifying users experiences on websites which I believe is a very powerful tool.