BBC Sounds

Introducing Dark mode in app

 

Role

Sole UX/UI designer on this piece of work, taking the lead on auditing the light mode, research & visual design requirements.

Tools & Platform

Main tool of choice was Sketch, while using WebAim Colour Contrast Checker to ensure our colour themes are accessible and Zeplin for pairing with our developers.

This was a Native App project.

Project Length

This project lasted 3 weeks from brief, audit, research and visual design with constant engagement with your stakeholders.

Problem Statement

BBC Sounds negative reviews

Sounds had received over 40 negative reviews in the app store related to the app being too bright and the need for dark mode.

The Solution

BBC Sounds Dark Mode Mock Up.png

Deliver a dark theme for the Native App that is accessible, easy on the eye and doesn’t dilute the Sounds branding.

High Level Process

 
Dark Mode Competitve Analysis.png

01. Competitive Analysis

I started off looking at other products that had multiple themes to understand the following things:

  • If/ how they adapted their colour palette to a dark theme.

  • What did they do with already dark UI elements for accessibility.

  • General settings around dark mode e.g. automatic or manual turn on in the settings.

Identifying components.png

02. Identify Components

I went through the whole app with a fine tooth comb to pick out all the areas in the app that could stay the same and things that needed a colour variant.

The colour palette of BBC Sounds was 60% White, 30% Black and 10% Orange and Teal.

Choosing Colour Palette.png

03. Choosing a colour palette

My next step was to look at the background colour as this is the main problem for our user; it having a bright white background. I started by exploring existing colours in our light theme palette to see we could avoid adding additional colours, which would need to be managed in our design system.

I didn’t have much success with this as known felt right, so I explored different shades of these colours to ensure we didn’t venture too far from the brand.

I found a number of great colours that could be used and I managed to narrow them down to 3 preferred options to take to my team and senior stakeholders.

I made prototypes of the app with the 3 different colour themes to test in low light; as this was one of our original problems pointed out by our users. Long story short, all options were sufficiently dark while maintaining contrast.

Dark mode options.png

04. Internal testing

As the project didn’t have any budget to do any user testing, I tested the different options with our team and a number of other colleagues in the BBC.

The feedback was great, and I had a range of different feedback such as:

  • “Option 3 looks too similar to our iPlayer product”.

  • “Option 2 is too harsh, especially with the light text style”.

  • “Option 1 is really nice and fits with the Sounds brand”.

Given the positive response with option 1, this is the styling that we went with.

Stakeholder management

Throughout the process, I would hold meetings with the product manager, creative director and lead engineering to get constant feedback.

Now back to the UX process

Dark Mode A11y.png

05. Accessibility

I wanted to make sure these new themes were accessible and if not, what colours would need to change. With the new background colours, I tested all the text and icon styling to ensure they passed at minimum the AA WCAG standards.

An example above is where I had to change our teal colour as this did not have sufficient contrast with the dark theme. This colour was tweaked so it passed AA but still looked the same to the naked eye.

Screenshot 2021-02-28 at 17.33.10.png

06. Finalised the requirements and paired with developers

Now that we have agreed on the styling, the palette meets accessibility guidelines and isn’t bright in low light - I proceeded to spec the new dark theme requirements such as the new colour palette, icon & text styling.

Once complete, this was uploaded to Zeplin and I worked with the developers till it was complete and ready to launch.

 

Result

The result of the dark mode feature lead to the App store rating to increase by 0.5 star.

Indirect result

Now Dark mode is used by default which was a first for the BBC.

Some App store quotes

 

“…dark mode is a godsend”.

-Review from Tom on Google Play 15 Jan 2021

“Very pleased that now there’s dark mode!”

-Review from Isabel on Google Play 14 Nov 2021

“Hurray for the dark background!”

-Review from Natalie on Google Play 24 Sept 2020