20th Anniversary Bitesize
Bitesize is the BBC’s Educational resource for school-age students across the whole of the UK, and turns 20 this month. We brought the site up-to-date with a new look and a suite of personalisation features.
1998
1998 is a fascinating year from a technology point of view. It was in 1998 we saw great strides in Artificial Intelligence and Computer Vision with the launch of the scarily life-like Furby. A company called Google was founded to help you find out more about your favourite Backstreet Boy or what time Lethal Weapon 4 was on at the cinema. Oh and the first pop-group with a wildcard in their name stormed the charts with a song called “C’est la Vie”. What a time to be alive!
In order for the BBC to keep up with such revolutionary innovations, it also had to change, and did so by looking to the web, launching its very first online-first product — BBC Bitesize.
This week sees the launch of a not only a brand-new look and feel for Bitesize, but a personalised resource for students of all ages. Getting here wasn’t just rebadging the Mini Metro, it was our biggest engineering undertaking to date.
Paint it orange
Our in-house UX team worked with creative agency Rufus Leonard to devise a system in which our brand could be consistent yet change with our users. We were extremely pleased with the result — consistent typography and structure across the site, but iconography and colours that change depending on the age of the user (brighter oranges and yellows for primary students, muted purples for those revising for their exams.)
This new unified front-end experience addressed a source of frustration with both our users and developers. Different parts of Bitesize looked dramatically different from each other. And that’s because technically they were — monolithic PHP applications serving different types of pages. The pages for Primary kids were served from one app, Secondary another.
Mighty Morphin Nanoservices
Our first step into breaking the monoliths came from the development of Morph, an internal project created by BBC Sport. You can read more about Morph in this post by Matthew Clark, but the key idea is that Morph allows you to build sites around “nanoservices”. A nanoservice is an “independent component that does one job well”. So, for example, the navigation component on Bitesize is a nanoservice. This component is responsible for fetching only the data required to display the correct links to the user. This nanoservice’s data is accessible via a url in which in turn another service can use to construct the HTML/CSS/JS to use. We can easily put together an entire page this way.
Being forced to develop to the principle of single responsibility is a great way to stop code bloat and make sure that all modules are reusable with minimal duplication. We follow this principle all the way from our front to back-end with a system we call “Blocks”. Blocks is a combination of iSite (our CMS), React, and Morph. Individual pieces of content are created in distinct chunks — a text block, a video block, etc. Each of these are nanoservices which are requested by the containing webpage and then curated into an article. This has the immense benefit of being able to develop and deploy individual pieces of the site independently of each other — a fantastic benefit when working in a large cross-location team.
Font
Typography-nerds will have heard about the introduction of Reith — the BBC’s new typeface. The rebrand was the perfect opportunity to apply it to the whole of Bitesize, but in all honesty, the idea of not only releasing an entire new look and feel of the site in one go, but updating the font at the same time scared the bananas out of us.
Release what you can
Not wanting to be left with no bananas, we decided on a phased approach. One that could still allow the brand to be revealed with a bang instead of silently mutating the site slowly over time. Phase 1 would be aspects of the site we could release to the audience now without being considered unique to the brand. So we switched the font to Reith across the site without fuss. We also refactored our page header into a single reusable component as well as other small improvements. All things that were needed to be done for the rebrand, but instead were now live to the audience, and therefore shrinking the size of the “big reveal” down to a more manageable task. Captain Risk is wounded -6 HP.
Flag it
“The best code is the code you have with you”. “If code’s not live then it doesn’t exist”. There’s probably a good saying in there somewhere. What I’m trying to say is that on launch day, how do you know everything is going to work? The answer is because it actually went live a week ago.
Every single feature we developed for the new brand was hidden behind a feature flag. Our code would check whether a certain query string was passed via the page url and display the new brand to the user accordingly. This meant we could continue our practice of Continuous Deployment without disturbing users with flashes of odd colours or broken pages. It also meant that we could run our suite of automated tests with each release.
Having our rebranded site live but hidden meant developers could work closely with the UX team to see how the new designs were shaping up on the live site with real content. This provided a tight feedback-loop, allowing us to continually tweak and deploy new versions.
Hello American Investors
Hover over the new Bitesize logo and you’ll see it come to life! (well, move around a bit). No, it’s not an animated gif or video. It’s actually one single png sprite animated like a flick-book. I first saw this effect being used for this fantastic animated Google Doodle. This technique proved the best trade-off between file-size and performance while still looking great.
You also may have noticed what we call “sparks”, the little background shapes that float in the background. These are a collection of svgs randomly placed using a JavaScript module we created called Mr. Sparkle. Because we arrange these sparks client-side, it means every single page is different — a great way of confusing the screenshot comparison tool we use for testing.
You can read more about the design process on the BBC’s GEL blog.
My Bitesize
Modernising the visual aspect of Bitesize would be frivolous if we didn’t also modernise the experience of our users. With the launch of My Bitesize, users can save Revision Guides for later and continue where they left-off. Powered by the BBC’s single login system, BBC account, Bitesize will continue to become more personalised, tailoring its experience to the user whether they’re studying at home on the web, or wherever they are with our updated Android and iOS apps.
We love the new design and features and hope you do too.
To another 20 years 🥂.
