$30 off During Our Annual Pro Sale. View Details »

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.

uxaustralia
PRO

August 30, 2012
Tweet

More Decks by uxaustralia

Other Decks in Technology

Transcript

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

    View Slide

  2. The Challenge:
    To unify the BBC’s visual
    language and experience
    design across web, tv,
    mobile and tablet.

    View Slide

  3. View Slide

  4. BBC Logo

    View Slide

  5. 239million
    global weekly audience

    View Slide

  6. 45million
    web pages
    bbc.co.uk

    View Slide

  7. 470 websites

    View Slide

  8. 30million
    global weekly users

    View Slide

  9. 2.6million
    global weekly users
    BBC Mobile

    View Slide

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

    View Slide

  11. 1996

    View Slide

  12. 1998

    View Slide

  13. 2000

    View Slide

  14. 2003

    View Slide

  15. 2005

    View Slide

  16. 17design
    teams

    View Slide

  17. Where to start?

    View Slide

  18. The wall of
    shame

    View Slide

  19. View Slide

  20. Over 70 audio/video players

    View Slide

  21. • 1000s of unique icons
    • inconsistent banner styles
    • inconsistent navigation
    • broken user journeys

    View Slide

  22. Brand soup

    View Slide

  23. 2008

    View Slide

  24. Grid

    View Slide

  25. Universal embedded media player

    View Slide

  26. Mastheads

    View Slide

  27. Mobile branding

    View Slide

  28. Business goals and strategy
    Do fewer things, better

    View Slide

  29. Audience analysis

    View Slide

  30. • in-depth interviews
    • diary studies
    • surveys
    • card sorts
    • usability testing
    • competitor analysis
    User Research

    View Slide

  31. Polar mapping

    View Slide

  32. Brand personality

    View Slide

  33. Brand moodboards Modern British

    View Slide

  34. Digital brand guidelines

    View Slide

  35. Radio brands

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. Brand portfolio

    View Slide

  40. Brand portfolio

    View Slide

  41. Design Philosophy

    View Slide

  42. Modern British

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. Exploratory design concepts

    View Slide

  53. View Slide

  54. Vertical and baseline grids

    View Slide

  55. Masthead, search and log-in

    View Slide

  56. Multi-level navigation

    View Slide

  57. IA and navigation models

    View Slide

  58. IA and navigation models

    View Slide

  59. Typography

    View Slide

  60. Iconography

    View Slide

  61. Key components

    View Slide

  62. Design Patterns

    View Slide

  63. Design Patterns

    View Slide

  64. Key site sections

    View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  72. BBC Mobile

    View Slide

  73. BBC Mobile

    View Slide

  74. BBC Mobile

    View Slide

  75. BBC Mobile

    View Slide

  76. BBC IPTV Screen size

    View Slide

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

    View Slide

  78. BBC IPTV Gradients & drop shadows

    View Slide

  79. BBC IPTV Gradients and transparency

    View Slide

  80. BBC IPTV Patterns

    View Slide

  81. BBC IPTV BBC Weather

    View Slide

  82. BBC IPTV BBC News

    View Slide

  83. BBC IPTV BBC Red Button

    View Slide

  84. BBC IPTV BBC Olympics

    View Slide

  85. BBC tablet Gestures

    View Slide

  86. BBC tablet Websites vs Apps

    View Slide

  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

    View Slide

  88. BBC tablet Responsive design

    View Slide

  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

    View Slide

  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

    View Slide

  91. Insights

    View Slide

  92. Insights
    Vital ingredients
    • the right environment
    • board-level buy-in
    • company-wide communication and evangelisation
    • clear sign-off or QA process

    View Slide

  93. Styleguide

    View Slide

  94. Design Patterns Library

    View Slide

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

    View Slide

  96. GEL posters

    View Slide

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

    View Slide

  98. View Slide

  99. Insights
    • Don’t be too prescriptive
    • Be the carrot not the stick
    • Develop or distil your signature experience

    View Slide

  100. Signature experience

    View Slide

  101. Signature experience

    View Slide

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

    View Slide

  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 [email protected]

    View Slide