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 British Current 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