Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating a global experience language for the BBC (Bronwyn van der Merwe)

Creating a global experience language for the BBC (Bronwyn van der Merwe)

After printing out key sections of bbc.co.uk onto what has now become known as the 'Wall of Shame', the BBC decided to embark on an ambitious project. The goal was to create a global experience language to drive consistency and coherence across the diverse, cross-platform portfolio of BBC products and services, all of which had different brands, audiences, contexts of use, and most problematically, design teams. The design teams operated independently of each other with very little sharing of best practice, patterns or templates. The result was a disjointed and broken user experience across the 45 million web pages and 470 sites that made up bbc.co.uk, as well as the mobile, tablet and interactive TV services.

At the time, my role was Head of UX&D: Pan-BBC Experiences, and I led the task of unifying the visual and interaction design of the BBC's digital products and services along with developing a 'signature experience' – something that could be recognised with or without the BBC logo in place.

We partnered with three fantastic agencies; Research Studios, R/GA and Massive Interactive and together we created GEL; a design philosophy, styleguide, design patterns library and signature experience which is being rolled out across the BBC. These guidelines form the design foundations for all new products and services, for both internal teams and external suppliers, and create a unified and engaging brand experience to see the BBC into the future.

For this presentation I will chart the course of the project, share insights and outcomes, and discuss the importance of designing a compelling and coherent brand experience in the connected digital world.

Bff39f7d4e25a30fb4d28a9005de7363?s=128

uxaustralia
PRO

August 30, 2012
Tweet

Transcript

  1. Creating a Global Experience Language for the BBC Bronwyn van

    der Merwe
  2. The Challenge: To unify the BBC’s visual language and experience

    design across web, tv, mobile and tablet.
  3. None
  4. BBC Logo

  5. 239million global weekly audience

  6. 45million web pages bbc.co.uk

  7. 470 websites

  8. 30million global weekly users

  9. 2.6million global weekly users BBC Mobile

  10. 1/3 of the UK population a month BBC Red Button

  11. 1996

  12. 1998

  13. 2000

  14. 2003

  15. 2005

  16. 17design teams

  17. Where to start?

  18. The wall of shame

  19. None
  20. Over 70 audio/video players

  21. • 1000s of unique icons • inconsistent banner styles •

    inconsistent navigation • broken user journeys
  22. Brand soup

  23. 2008

  24. Grid

  25. Universal embedded media player

  26. Mastheads

  27. Mobile branding

  28. Business goals and strategy Do fewer things, better

  29. Audience analysis

  30. • in-depth interviews • diary studies • surveys • card

    sorts • usability testing • competitor analysis User Research
  31. Polar mapping

  32. Brand personality

  33. Brand moodboards Modern British

  34. Digital brand guidelines

  35. Radio brands

  36. None
  37. None
  38. None
  39. Brand portfolio

  40. Brand portfolio

  41. Design Philosophy

  42. Modern British

  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. Exploratory design concepts

  53. None
  54. Vertical and baseline grids

  55. Masthead, search and log-in

  56. Multi-level navigation

  57. IA and navigation models

  58. IA and navigation models

  59. Typography

  60. Iconography

  61. Key components

  62. Design Patterns

  63. Design Patterns

  64. Key site sections

  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. BBC Mobile

  73. BBC Mobile

  74. BBC Mobile

  75. BBC Mobile

  76. BBC IPTV Screen size

  77. BBC IPTV Design considerations FLICKER BLOOM COLOUR CONTRAST MOIRE ´

    PIXEL SIZE
  78. BBC IPTV Gradients & drop shadows

  79. BBC IPTV Gradients and transparency

  80. BBC IPTV Patterns

  81. BBC IPTV BBC Weather

  82. BBC IPTV BBC News

  83. BBC IPTV BBC Red Button

  84. BBC IPTV BBC Olympics

  85. BBC tablet Gestures

  86. BBC tablet Websites vs Apps

  87. BBC tablet Websites vs Apps UIWindow 768 x 1024 UIWindow

    768 x 1024 Stacking & adaptive modules working to a grid system Mobile Large Tablet
  88. BBC tablet Responsive design

  89. 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 development costs
  90. GEL outcomes • Improved content discovery • Encourages brand loyalty

    and repeat visits • Reduces churn • Guidelines for 3rd parties and suppliers • Future-proofs product development • Usable and fully accessible
  91. Insights

  92. Insights Vital ingredients • the right environment • board-level buy-in

    • company-wide communication and evangelisation • clear sign-off or QA process
  93. Styleguide

  94. Design Patterns Library

  95. GEL website http://www.bbc.co.uk/gel

  96. GEL posters

  97. Insights • Centralise your design resources • Create a living

    document • Collaborate
  98. None
  99. Insights • Don’t be too prescriptive • Be the carrot

    not the stick • Develop or distil your signature experience
  100. Signature experience

  101. Signature experience

  102. Insights • Create a coherent brand experience • Define your

    design philosophy and guiding principles • Coherence of experience and consistency of application is key • Evangelise!
  103. Thank you! Bronwyn van der Merwe Global Director of Experience

    and Design www.massiveinteractive .com Level 2, 113-115 Oxford Street Darlinghurst NSW 2010 Australia P.O.Box 567 Darlinghurst NSW 1300 Australia +61 2 9331 8400 +61 2 9331 8699 bronwyn.vdm@massiveinteractive.com