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

Things were simpler back then!

Bitesize covers 329 subjects, with 9,137 study guides and over 5,000 videos. It is now in it’s 20th year of service, and as a part of the new careers advice offering; 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?

The core brand colour is orange, which is the thread that ties all the phases together.

As a who only recently joined the Bitesize team, you could compare my experience as a defender being subbed on in the 85th minute. The team is already four goals up and a lot of the hard work with the brand had already been done. We now had 5 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).

The typography and illustrations get thinner, and the colours get calmer as you go up the learning phases.

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 was adaptive to either a calmer and mature audience, or a younger and energetic one. The brand had been through rigorous testing with Marketing & Audiences and our users, 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 have 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 and stared at it for a while.

The Wonder Wall in Bridge House, Salford. We sketched out the design decisions on paper before moving to Sketch. Pictured: Rob Scott, David Cunningham and Charles Burdett.

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 Zeplin project where every component had its interaction states defined. Zeplin is great as you’re able to inspect a Sketch file for its details pertinent to development, such as pixel dimensions and type styles.

Being able to communicate why things are the way they are, really helped with creating a shared understanding of the brand.

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 look to who have questions, or contribute to with new answers. 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 is 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.

Orange is used as the interaction colour, which meant that the affordance was consistent across all of the colour schemes.

There are 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!

Source link


Please enter your comment!
Please enter your name here