Artboard 2.png

GEL Design Patterns

Design Pattern for GEL, Global Experience Language


Areas I explored at a granular level for the BBC include: how we create a unified approach to external website links & how we present a consistent approach time and duration across all products.

Role: Research | Realisation


01_Gel Pattern

What is Gel? GEL (Global Experience Language) is BBC’s shared design framework that’s used to build it’s entire online output.  It creates a consistent user experience across the whole of BBC online. GEL promotes efficiency as we share the solutions for common design challenges between teams “Gel helps designers focus on meaningful differentiation”

While working with BBC Three, I developed a simple, reusable Gel Pattern for external website linking that can be used across the BBC

Design Pattern for External linking for the GEL Library:
When we link to content across the BBC, it’s important to differentiate between internal and external links so our users knows exactly what to expect. External links direct people outside of the BBC domain, and are clearly indicated with an icon. The pattern consists of a text link and a GEL External Link icon, displayed as a single component. Clicking the link should load the external content into the same window or tab, instead of opening a new one. The icon size should line up with the cap-height of the accompanying text, and both icon and link should always appear as a single component.

Accessibility:
It's important to be clear about where a link will take our audience, including visually hidden or suitable alt text within the link for screen readers. Using the icon in a consistent way across products is best practice, for cognitive accessibility as well as GEL ideals. Consistency between inline links or grouped links at the end of an article is also important.

Our audience should always be informed that they will be moving out of the BBC domain, and exactly which domain they are moving to. This is especially relevant for those with cognitive impairments, or people using assistive technology.
https://www.bbc.co.uk/gel/guidelines/external-linking


testbigimage.png

02_Time & Durations

Standardising Time + Duration formats across the BBC:
In addition to contributing to GEL, I also ran a research project to synthesise recommendations on a single visual time format for content used across all BBC online services. The proposed single format needed to work across products and languages, sit comfortably with timestamps, labels & CTAs and also work for both long and short format content.

The research included fully assessing internal BBC practices and also the formats that other digital competitors are using. Once this was collated, a single approach was proposed that would work across products and also solve the other design challenges identified.

I identified 4 key format options. Exact (00:25:25), HMS (1h 20m) MINS (65mins) and also explored a mixed approach, weighing up the advantages/disadvantages of all. Our Recommendation was for a MINS.