BBC Subtitle Icon Redesign

The BBC iPlayer is used across all websites, including those used by international audiences. This project involved redesigning the current subtitle icon on their media player, so that all audiences can easily interact with it.

Current Subtitle Icon

The below images show what the current BBC iPlayer subtitle icon looks like, while turned off and on as well as when the subtitles are off or on while being hovered over. The only change between the icon having the subtitles on or off is a small pink line below the 'S' (Correct as of April 2018)

Subtitle Icon - Subtitles off Subtitle Icon - Subtitles on Subtitle Icon - Subtitles off, while hovering over Subtitle Icon - Subtitles on, while hovering over

On iPlayer, when the user hovers over the media player, the progress bar shows a little darker than the video background. This means that the subtitle icon must be a colour that can been seen with different coloured backgrounds. iPlayer currently has a pink and white theme over the entire website, including elements on the page, such as; the play button, the sound button, the fullscreen button and the time bar within the progress bar. This works well with the media player as the colours can be seen clearly over the progress bar.

Test 1 - Icon Association Questionnaire

I created a questionnaire to find out if people knew what each icon on the progress bar on iPlayer does, without letting them know these icons are from iPlayer.

The questionaire asked the participants their age bracket and then what they associate each icon with. The different icons shown were; the play icon, the subtitle icon, the full screen icon and the volume icon.

Results

This questionnaire had a total of 33 respondents, ranging from between under 16 and 66+. The test showed that most of the participants knew what each icon is used for, other than the subtitle icon, with only 16 of the participants knowing what this icon is for. 28 participants knew what the play icon is for, 25 participants knew what the fullscreen button is for and 31 participants knew what the volume icon is for.

This shows that there is an issue with the current subtitle icon, as many users don't know its purpose.

Inspiration

Once the problem had been identified, I looked at what other media player's subtitle icons looked like when turned on and off for subtitle inspiration. (Correct as of April 2018)

ITV, Netflix, Amazon and Channel 4 Inspiration YouTube, Ted, Twitch, and Vimeo Inspiration

I found that Netlix, Amazon and Ted's subtitle icons do not change when the subtitles have been turned on. Since this icon needs to be designed for global use, the icon cannot be a 'S' as 'subtitles' do not start with 'S' in all languages.

Ideas

Six ideas of possible new subtitle icons were then designed using the previous inspiration.

Idea 1

The first idea is to use a speech bubble as the main shape. This idea is taken from Netflix, Amazon and Ted's current subtitle icon as it looks like speech. The speech bubble is white and has three pink dots which switch colours when the subtitles are turned on. The three dots within the speech bubble represent 'S' for Subtitles as this is what it is in morse code.

Subtitle Idea 1 Design Subtitle Idea 1

Idea 2

The second idea keeps the speech bubble, but instead of containing three dots, now contains three lines, showing speech being changed to text, inspired by Amazon's icon. When the subtitles are turned on with this icon, the speech bubble turns pink and the three lines turn white.

Subtitle Idea 2 Design Subtitle Idea 2

Idea 3

The third idea, it has kept the same concept as the speech bubble and the three lines, but when the subtitles are turned on, as well as the speech bubble turning pink and the three lines turning white, a pink line has been added below the speech bubble, incorporated from the current subtitle icon.

Subtitle Idea 3 Design Subtitle Idea 3

Idea 4

The forth idea scraps the speech bubble idea, as it could be associated strongly with a message, due to the speech bubble. Therefore, the design was replaced with a rounded square. Another change made is that instead of the three lines within the icon, there are now only 2 lines which have been moved to the bottom of the icon. This is because, when subtitles are used, they take up 2 lines only and are usually shown at the bottom of the screen to not cover the TV show/film/news. When the subtitles are turned on with this icon, the rounded square turns pink and the two lines turn white. Like the previous idea, the pink line is below the rounded square.

Subtitle Idea 4 Design Subtitle Idea 4

Idea 5

The fifth idea is the same as the previous, but instead of the 2 full lines at the bottom of the rounded square, these lines have been split up into seperate line to look more like words, inspired by YouTube.

Subtitle Idea 5 Design Subtitle Idea 5

Idea 6

The final idea changed the rounded square idea, and replaces it with a rectangle, to make it look more like a media player. It still used the splited lines to look more like words as well as still using the pink line below the rectangle when the subtitles are turned on.

Subtitle Idea 6 Design Subtitle Idea 6

Test 2 - Icon Research Questionnaire

A second questionnaire was created. This questionnaire aimed to find out information about how people use subtitles and which, out of the six ideas they prefered.

Like the previous questionnaire, this questionnaire asks the participant their age bracket, and then how often they use subtitles, whether they think the hover feature is useful or not, and then which icon they prefer out of the six ideas. As idea 2 and 3 look the same while the subtitles are turned off, these idea have been merged together for this questionnaire, making 5 options.

Results

This questionnaire had the same 33 respondents ranging from under 16 to 66+. The results show that 9 of the participants never use subtitles, that 14 of participants sometimes use subtitles, that 9 of the participants always use subtitles, and that 1 doesn't watch anything online. As well as this, the results show that 27 of the participants find the hover feature useful when on the web, 3 find it unuseful, and that the remaining 3 find it somewhat useful.

Out of the 33 responses, idea 6 got the most votes with 12 participants choosing this idea. This was followed with 8 participants choosing idea 2/3, 5 participants choosing idea 1 and 4 participants choosing either idea 4 or 5.

Final Design

Idea six was chosen as the prefered subtitle icon. Below shows the final design and how it looks on iPlayer.

Final Subtitle Icon
Final Subtitle Icon on iPlayer Subtitles Off Final Subtitle Icon on iPlayer Subtitles On

Subtitle Icon Hovered

Now that the new subtitle icon has been selected, how it looks when a user hovers over the icon is the next important thing.

When the subtitles are turned off, the icon is a white rectangle with multiple pink lines within it. When the user hovers over it, the box around this icon turns pink. But when the subtitles are on, the rectangle is pink, with white lines within it in addition to the pink line below this. When the user hovers it, the box around this icon turn white. The icon when hovered is shown below, along with how it looks hovered while on iPlayer.

Final Subtitle Icon while hovered Subtitles Off
Final Subtitle Icon on iPlayer while hovered Subtitles Off Final Subtitle Icon on iPlayer while hovered Subtitles On

Final Prototype

Click on the image below to interact with the new subtitle icon on iPlayer. (Desktop Only)

Final Subtitle Prototype