1

bbc.co.ukUnifying Visual and Interaction Design

By Rick Barron

2

IN THE BEGINNING...1997

3

Why the change?

4

Overtime, dozens of agencies worked

independently on the site. The site took on a fairly

schizophrenic look and feel.

5

The goal

6

Unite the visual and interaction design of

bbc.co.uk and the mobile site. In short, take the organization and

its users into a more

compelling digital space.

7

BBC sought to create a design philosophy, or a set of values, to

unite the user experience practitioners across the business.

They focused on nine keywords which summed up

what they were about and trying to achieve.

8

9 words

9

Modern BritishCurrent

Authentic

Compelling

Distinctive

Pioneering

Joined-up

Universal

Best

10

After hearing six web agencies pitch their services,

BBC went with:

11

RESEARCH STUDIOS

12

WALL OF SHAME

13

BBC created a new wider, centered page template to take

advantage of wider screen resolution.

14

NEW TEMPLATE

15

Hundreds of different banners styles

were reviewed to present a new global and local

branding and navigation system.

16

BANNER STYLES

17

Took a different road and

created a universal embedded media player.

18

NEW MEDIA PLAYER

19

BBC created a new homepage, that migrated

throughout the website, and

eventually onto their mobile platform.

20

NEW HOME PAGE LOOK...

21

...AND NEW MOBILE LOOK

22

CREATING CONCEPTUAL DESIGNS

23

A new grid based on 31 sixteen pixel columns with two left hand

columns that can be split into four, and one wider right hand column, which accommodates the ad formats that appear on the international facing

version of the site.

24

NEW GRID

25

The team created a look of

interwoven vertical and horizontal bands. This gave the right hand column, across the

site, to be a feature.

26

VERTICAL & HORIZONTAL BANDS

27

With the 16 pixel vertical grid, BBC

added an integrated 8 pixel baseline. Doing this allowed the ability to align on a

page both vertically and horizontally.

28

16 PIXEL VERTICAL & 8 PIXEL BASELINE

29

A more dramatic use of typography was implemented. This

was made possible by the key

feature of the new GVL [global visual language].

30

The use of Helvetica or Arial in bold type was launched.

Variations in size was restricted so as to provide

control in consistency across the

site.

31

The core approach was to find a

simple, modern and compelling experience

based around dramatic and scalable editorial concepts.

32

TYPOGRAPHY

33

TYPOGRAPHY STYLING: STORY PAGE

34

TYPOGRAPHY STYLING: PROMO DRAWERS

35

CALL TO ACTION & PULL QUOTE

36

TYPOGRAPHY STYLING: TYPE OVER IMAGES

37

TYPOGRAPHY STYLING: SCALING & LINK STYLING

38

For non-branded areas, where the BBC masterbrand

appears, a highlight color palette was

created.

39

HIGHLIGHT COLOR PALETTE

40

Migrated from a left hand navigation to a consistent

placed, horizontal navigation throughout the site.

41

HORIZONTAL NAVIGATION

42

Creating a new look and feel for it’s embedded media

player, enhanced the bold calls to action and typography.

43

A NEW LOOK: EMBEDDED MEDIA PLAYER

44

A finishing touch was to

imbed a new set of icons. The look and feel is

very simple.

45

NEW LIBRARY OF ICONS