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.

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.
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
16. 17design teams
17. Where to start?
18. The wall of shame
20. Over 70 audio/video players
21. • 1000s of unique icons • inconsistent banner styles • inconsistent navigation • broken user journeys
22. Brand soup
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
39. Brand portfolio
40. Brand portfolio
41. Design Philosophy
42. Modern British
52. Exploratory design concepts
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
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
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