Rebranding BBC Bitesize: How to keep your cool as a UX designer

UX Designer Charles Burdett discusses the challenges of the BBC Bitesize rebrand.


Charles Burdett

Charles Burdett

BBC UX&D Alumni

Bitesize's new brand identity

Do you remember Bitesize? If you are a UK millennial then chances are you have. 80% of secondary school students and 40% of primary school students use Bitesize, making it the most popular dedicated educational site in the UK.

The BBC Bitesize website in 2011.
The BBC Bitesize website in 2011

Bitesize covers 329 subjects, with 9,137 study guides and over 5,000 videos. It's now in its 20th year of service with a new support offering and a fresh new brand designed by Rufus Leonard. Bitesize is expanding its audience to include young adults, as well as still being down with the kids.

With a looming deadline of the start of the school year, multiple development teams across two nations and a spanking new brand with a nod from the powers that be, how do you go about rebranding a website as gargantuan as Bitesize?

As a UX designer who only recently joined the Bitesize team, you could compare my experience as a defender being subbed on in the 85th minute. The team was already four goals up and a lot of the hard work with the brand had already been done. We now had five metaphorical minutes to make sure we didn't concede any goals (implement the brand), and maybe score a couple more goals before we win the league (make it more awesome).

New BBC Bitesize website page designs.

Implementing the brand was a challenge, as we had three audiences to design for (Primary, Secondary and Post-16), whilst maintaining the core thread of the Bitesize brand. Elements such as the typography, illustration, colour and tone of voice all change depending on which phase of learning you are in. The brand had to adapt to either a calmer and mature audience, or a younger and energetic one. The brand had been through rigorous testing with our users and Marketing & Audiences team so we were confident proceeding with this multi-audience brand.

Here's what we learnt:

Have an overview of everything, in one physical place

In the early stages, we flexed the brand across different breakpoints and page types. This helped us work out a consistent look and feel across the whole of the website. We had designers in Salford and Glasgow all working on the brand implementation. To keep us all on the same page, we printed out everything we had done, stuck it up on a wall and stared at it for a while.

The BBC Bitesize team sticking up work on a wall.

We dragged a fine-tooth comb through the pages to highlight inconsistencies. With a set of common components, we made some design decisions on their appearance and behaviour. The interaction guidelines were born!

Have a single source of truth

Collating all of our design decisions into a single place was the most crucial thing we did to ensure consistency. To create a shared understanding of the brand, we created a project where every component had its interaction states defined. The Zeplin plug-in is a useful way of inspecting your Sketch files for details pertinent to development, (eg. pixel dimensions and type styles).

A section of the style guide showing interaction states.

Any questions, most of the time, could be answered by this document. Anything new that came up was discussed, designed and updated in the guidelines. It became an ever-evolving, collaborative document that everyone could reference. These guidelines also helped inform how to brand the app, and influenced a lot of external marketing materials.

Make decisions as a team

Talk it out. The more points of view you seek when making design decisions are invaluable, as you may not appreciate the implications a small decision can make. When you all understand that in these early stages there are no right answers, making decisions becomes less stressful, especially when there's shared responsibility of those decisions!

Form follows function

When you roll out a new brand it's very easy to lose sight of the function of things when your goal at hand is to change how things look. Aesthetic decisions can have a significant impact on function. When applying the new brand, function, accessibility and consistency were the main considerations at the heart of our decisions. It might look like we're painting everything orange, but we were doing it with a purpose.

A section of the style guide showing the colour palette.

There were instances where the new brand clashes with old functionality. It's tempting to want to fix these things as you go, but resist. As crafters of things, the fine details do matter - but in the grand scheme of hitting a deadline, we can sand those down when the dust has settled. Everything can be iteratively improved; we're not carving a statue out of marble! Don't be afraid to make decisions, even if they turn out to be wrong.

As long as the content is accessible, the brand is secondary

Stress levels can get high when there is a deadline. Everyone wants it to go right. But if things don't always go your way, or there are aesthetic choices that could be improved, just remember that the content is still there, and it's still accessible. That's what people are coming to Bitesize for, not shiny new colours or animated logos!

A variety of screen sizes showing the new responsive BBC Bitesize website.

If you've made it this far, you might be interested in reading Stuart Brown's article from an engineering perspective.

Check out BBC Bitesize.