BBC
Audio.

The BBC are the oldest and largest local and global broadcaster by stature and by number of employees.

I spent 10 months working for them across Web, Mobile & CTV but this case study focusses on the audio play experience.

I worked on this alongside another UI Designer who focussed on Web & a UX Designer who helped me up to the wireframes.

What we did

We designed a new, audio play experience for podcasts & news.

user experience • PRoduct • USER INTERFACE • Strategic thinker • Creative Problem Solver • Creative Direction • Strategic thinker •

I worked on the BBC Mobile app for 10 months in total, I came into an existing design system using Tokens Studio, multiple libraries & external files.

I helped out where I could, picked up other designers work, helped do accessbitility audits and re-constructed the design system.

Then I was trusted to lead the design for the audio play experience.

Sticking with the brand

The BBC has an extremely recognisable brand so we had to work within these limitations.

WIREFRAMES

I was given some lovely wireframes from Mike (Hi Mike!)

I then was then given the task of making something 'cool' without breaking the strongest brand in the UK...

Have you tried clicking the eyes yet?

JECT

BBC-X's brand guidelines are very strong & regimented, so it was a challenge to think outside the box whilst staying within certain restraints.

Here are the wireframes that I had to work with, the brief? Make something happen.

How do make this interesting?

Black, White & Grey colour palette, where does the spark come from?

BBC has some very strong restrictions around colour, border radius, everything as you'd expect from the household name.

We thought that maybe the colour could come from the artwork itself, this would inject a bit of life to the app whilst keeping within the set rules.

Full Colour.

The Idea behind this one was to take the most prominent colour from the artwork and use it for the background on the modal & mini player.

We all love a Gradient, right?

The next idea was to take that colour but work it more into the brand as a gradient, this also helps solve accessibitlity issues further down the line.

Blur. Song 2. Woo-hooo!

This idea was the simplest way to get colour involved without having to try have a bespoke colour picker for every artwork, the simple option.

Decisions

We had three solid options here and we had to make a decision.

Each design had their pro's and con's so we presented these to the client to let them decide.

1 - All Colour, No Frills

This concept relies on a colour picker to select the most prominent part of the artwork and use that as the background colour, unforunately this lead to accessibility issues.

2 - Gradients

Accessbilitiy was the issue with the first option, this version meant using a darker gradient to still have a contrast for the features whilst still being able to incorporate some colour from the artwork.

3 - Blur

Having an image blur was a much easier way to get the colour effect than having to go through a colour picker working out accessibility issues.

Due to the nature of BBC's branding, paired with being the easiest solution from a development perspective, we went with the blur solution.

Next up, we had to design the episode, series & brand pages using this visual treatment.

Brand, Series, Episode

The structure of the brand & series pages had already been created for Web.

But the episode page didn't exist in web format so I had to make something new.

The majority of the audio play experience had been designed by this point so it was now about refining screens, working out functionality, interactions for the modal & mini player.

But, don't forget the small things, we still had the playback speed, up next queue, sleep timer & overflow menus to design.