主播大秀

To ensure a consistent design approach across its digital services, the 主播大秀 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 ''. 

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 主播大秀 and, importantly, how we have approached our work in GEL.

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

The new website is  to provide a way to create consistently amazing online 主播大秀 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 主播大秀-wide implementation of Typography.

Typography at scale

All over the 主播大秀'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,  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  & , 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.

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 主播大秀 Sport codebase, thinking that we might be able to make it re-usable for everyone. This proved to be successful across the 主播大秀 Sport & LIVE pages that we were working on at the time.

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

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

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  account so that it could be re-used by as many teams as possible.

We have since had 30+ developers and designers contributing from across 11 different teams. The Typography repository has now been made  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 . Work is underway to create a similar implementation for .

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 , the limits are endless.

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