Cameron Grice - Notes

Creating a global experience language for the BBC

25 October 2013

Notes from Bronwyn van der Merwe's talk at UX Australia 2012.

The Challenge

To unify the BBC's visual language and experience design across the web, TV, mobile and tablet.

The BBC's audience is the entire UK population. If each and everyone of them pay for it (taxes) they rightly believe that they own it.

Initially there were 17 design teams and around 400 websites.

Where to start?

The wall of shame, print outs were stuck up showing:

  • Over 70 audio/video players.
  • 1000s of unique icons.
  • Inconsistent banner styles.
  • Inconsistent navigation.
  • Broken user journeys.

Generally a lot of energy was being expanded every time they came to a new project.

"Brand soup"

A complete travesty. There was no thought when a new brand was created.

Grid

A 'foundation' grid was designed.

Universal embedded media player

A universal media player was created and available with black or white controls.

Consistent Mastheads

They had a big fight with marketing to break up the brand lock-ups so you only had the BBC logo visible once on each page.

Mobile Branding

The visual language was rolled onto mobile.

Business goals and strategy.

Do fewer things better.

We wanted to find the soul of the BBC. We wanted to create a distinctive voice and a recognisable aesthetic. We wanted to create some drama and most of all what we created was truly cross platform.

User Research

  • In-depth interviews
  • Diary studies
  • Surveys
  • Card sorts
  • Usability testing
  • Competitor analysis

Polar Mapping

They mapped where in relation to other sites do we want to be. - Functionality - Fun

Brand personality

The following was created to guide the brand:

  • Brand promise
  • Key personality traits
  • Brand mood boards "modern british". They created a mood board for each of the aspects of the brand we wanted to emphasise.
  • Tone of voice guides

Digital Brand Guidelines

Initially they had lush brand identities made for billboards or TV, they didn't work in miniature sizes common on digital platforms.

They made logos that would work in small spaces, 16x16 icons favicons.

Brands didn't work as part of a portfolio online. Online the brand is used to give context to content, 'background to the content'.

Radio Brands

Created a new set of vector logos that worked as favicons.

We created set of vector parts to inject personality into digital products.

A common size and treatment for all brands

Design Philosophy

  • Modern British
  • Current
  • Authentic
  • Compelling
  • Distinctive
  • Pioneering
  • Joined-up
  • Universal
  • Best

Simple Useful Intuitive.

New manifesto, call to arms.

Areas of the process in creating GEL

  • Exploratory design concepts
  • Vertical and baseline grids
  • Masthead, search and log-in
  • Multi-level navigation
  • IA and navigation models

Image guidelines

  • Drama
  • Aspect ratios

Typography

  • Tight leading
  • Tight tracking
  • Consistent spacing

Iconography

Key components

Design patterns

What differentiates GEL from a style guide:

  • Interaction/animation guidelines
  • Linked to a code library

After trying to implement GEL on an existing property they realised it was too prescriptive and striped it back to the bare essentials.

Key site sections

BBC Mobile

Considerations for mobile:

  • System fonts
  • Clean, modern, flat colour, no gradients, bold use of colour, bold use of image, bold use of typography. Remove furniture and ordainments of the page.
  • Both orientations.

IPTV

The pixel size on TV is different. A single line of pixels flickers. Minimum of 2 pixels. Colour contrast. 5 pattern input.

BBC Tablet

  • BBC Tablet Websites vs Apps
  • BBC Tablet Responsive Design

They are moving towards a responsive website wrapped in an app framework. Helps with experience portability and can still take advantage of touch gestures/camera etc.

GEL Outcomes

  • Shape and define the personality of a brand
  • Unifies the vision
  • Unifies the presentation and user experience
  • Provides a distinctive and recognisable visual design
  • Consistent navigation and interaction design
  • Improves broken user journeys
  • Reduces design and developments costs
  • Improved content discovery
  • Encourages brand loyalty and repeat visits
  • Reduces churn
  • Guidelines for 3rd parties
  • Future-proofs product development
  • Usable and fully accessible

Insights

Vital ingredients: - The right environment - Board-level buy-in - Company-wide communication and evangelisation - Clear sign-off and QA process / sign off gateway

Deliverables

  • Styleguide
  • Design Patterns Library
  • GEL website
  • GEL posters

Insights

  • Centralise your design resources
  • Create a living document

  • Collaborate

  • Don't be too prescriptive

  • Be the carrot not the stick

  • Develop or distil your signature experience

Signature experience

How GEL links to the BBC brand? Influence from the BBC clock.

Insights

  • Create a coherent brand experience
  • Define your design philosophy and guiding principles
  • Coherence of experience and consistency of application is key
  • Evangelise

Question Time Answers

At any given time there is inconsistency. Focused on most trafficked properties first. It's a slow rolling kind of thing.

Process to distill down to 9 principles/philosophy. Interviews, board and the design team. 1 person from each team met.

Applied GEL to a property to test.

GEL is really about best practise, best usability, best innovation and codifying them so when designers came across the same problem they can find a solution of the shelf. This also helps the audience, it's compassionate so they don't have to relearn. There's a consistency and conference to make it easier to find things.

Moved away from the term sites to products.