Main content

BBC UX&D on creating a GEL foundation for everyone

Alexander Jones

User Experience Designer

Tagged with:

To ensure a consistent design approach across its digital services, the BBC uses a shared Global Experience Language (GEL). In this post, User Experience Designer Alexander Jones explains how the team achieve this and what it means to create and support a design system that can benefit all.

It’s 27th July 2012 at 8.43pm. I’m in a caravan with some friends on a weekend away in Anglesey. We have gathered round a small 15’ inch telly to watch the Opening Ceremony of the London 2012 Olympics.

The spectacle is fantastic. As I marvel in awe and swell with pride I'm also extremely inspired. One particular moment of the ceremony struck me most, though. Sir Tim Berners-Lee (the inventor of the World Wide Web) comes along, sits down at a computer and types 'this is for everyone'. 

London 2012 Olympic Opening Ceremony

In the context of the Opening Ceremony the sentiment rang true across the World that the Olympics had arrived and it was for everyone, no matter who you are or where you lived. It also reminded us of the one key principles of the web: Universality.

This sentiment made a permanent impact on how I approach my work as a Designer here at the BBC and, importantly, how we have approached our work in GEL.

The full launch of our new GEL website this month signifies the beginning of something special.

The new website is part of an ambition to provide a way to create consistently amazing online BBC products and experiences that are accessible to all, no matter who they are or the technology they use.

The site aims to help anyone creating online experiences to re-use our best practices, methodologies and front-end techniques. Affording more time for innovating new and exciting features for our audience.

So how do we make a Global Experience Language work for everyone and what does it mean in practise?

Introducing our Foundations

The best example of this is with what we call our Foundations - the Grid and our use of Typography & Iconography. These are a consistent requirement across all our websites and apps. It doesn’t make any sense for designers and developers to be re-thinking and building these over and over again.

An example of how we solved this is shown with our BBC-wide implementation of Typography.

Typography at scale

All over the BBC's website we have text; lots and lots of text. Headlines, articles, video descriptions, football stats and scores plus much more.

Making sense of how we present this text so it's readable, useful and consistent across every device is a big challenge.

Myself, Shaun Bent and our other colleagues came across this challenge 18 months ago when creating the different features for events like the 2014 FIFA World Cup and the 2014 Commonwealth Games. We were communicating well, and collaborating through pairing, but our workflow didn't feel as good as it could be.

Luckily, we have GEL, which provides a thoroughly researched set of Typography Guidelines. At the time this was in the form of a PDF, and provided 8 different type sizes and line heights which then needed to be applied to the correct elements on the website.

Taking inspiration from Harry Roberts & Jeremy Keith, we realised that if we provided a memorable name for each of these sizes, it might make communication between Designers and Developers an easier task - also saving time and providing more design control all in one go.

We chose names from original type measuring techniques

So for each set of sizes and line-heights, across devices, we came up with a name until we had a list that suited the Typography scale. We wanted something future-friendly but still related to typography, so we took names from traditional type measuring techniques dating back to as early as 1582.

  • Canon (.gel-canon)
  • Trafalgar (.gel-trafalgar)
  • Double Pica (.gel-double-pica)
  • Great Primer (.gel-great-primer)
  • Pica (.gel-pica)
  • Long Primer (.gel-long-primer)
  • Brevier (.gel-brevier)
  • Minion (.gel-minion)

So instead of a type definition being described by designer as '32px on devices that are 600px wide and above' it would simply be 'this is Trafalgar'.

This was one step towards creating a simpler dialogue between Designers and Developers, by reducing the need for complicated redline documents and improving the chances of iterating in the browser.

Reducing duplication

We then abstracted this typography implementation away from the BBC Sport codebase, thinking that we might be able to make it re-usable for everyone. This proved to be successful across the BBC Sport & LIVE pages that we were working on at the time.

The GEL foundational code working across multiple products

We then attempted to make the abstracted typography code work for all of the other BBC teams and products. Our biggest challenge came with BBC News.

BBC News needs to support more than 30 different languages, 15 of which are non-latin such as Burmese and Arabic.

An example of the different languages supported by BBC News

This forced us to re-think our implementation and allow customisation of the fonts and values used. For instance, allowing line-heights to be increased for a scripted font with particularly high ascenders and descenders.

Growth and re-use

We made the code available on our main BBC GitHub account so that it could be re-used by as many teams as possible.

Our Typography Guideline and GitHub Repository

We have since had 30+ developers and designers contributing from across 11 different teams. The Typography repository has now been made open source and at the last count was being used by 18 different codebases.

With this sort of work alongside the GEL website we can really make a difference and the benefits are clear - by using GEL and re-using our foundational code, our audience gains from a consistent and familiar experience and we can save time and focus on adding new and innovative features to our offering.

We have since taken the principles and approaches we used to create a reusable implementation of Typography and done the same for the GEL Grid. Work is underway to create a similar implementation for Iconography.

The GEL Foundations will hopefully make an impact to our content and reach as many of our audience as possible, from caravans in Anglesey to astronauts in space, the limits are endless.

If you would like to give us feedback on this work, please add your comments below or via the GEL Website. Big thanks also go to Shaun Bent for his contribution to this work.

Tagged with: