BBC iPlayerAndroid Auto

The Challenge

With the release of Android Auto and the possibilities of what this new in-car technology can do, the BBC approached us to visualise what the iPlayer could look like on this up and coming platform.

Although the BBC only wanted a conceptual pitch, this platform had huge potential and so researching and investigating its boundaries and limitations now were advantageous.

BBC Cover Image
The Solution

After researching and reading the extensive documentation and legal requirements for in-car dash board graphics, and the guidelines for Android Auto I began drafting ideas around how the iPlayer could work and what a typical user flow could be. After numerous sketches and ideas, I then became to create low fidelity wireframes, which were then transformed into prototypes for several features and flows.

bbc Wireframe 01
Connector
bbc Wireframe 02
bbc Wireframe 03
Connector
bbc Wireframe 04
bbc Wireframe 05
Connector
bbc Wireframe 06
Design systems

Due to this been a Google product, I followed the Material style guide meticulously and brought in the BBC iPlayer branding as and when possible. Because the documentation for Android auto was incredibly restrictive, I was limited to what I could use in design but strived for the product to adopt the BBC design language.

Following the material guide, Roboto was the chosen typeface throughout, it gave the app a clean, legible and flexible typeface fit for all device and screen types.I was also limited to colour choice, and only able to select 1 primary colour and so the obvious choice was the iPlayer pink.

I then began to build the components of the tab bar navigation, draw menus and list cells until I had a solid library which could be used across a multitude of screens.

Grid System
12 columns | 68px width | 16px Gutter, Margin | 8px Baseline
bbc Grid
Colour
All colours used for the project
BBC Primary Colours
Typography
All typefaces used for the project
BBC Typography 01
BBC Typography 02
BBC Typography 03
Iconography
16px grid system, Solid Glyph
BBC Iconography 01
BBC Iconography 02
BBC Iconography 03
UI Components
Atomic design system
bbc UI Components
bbc Device 01
Final UI

The final app is a perfect blend of material design and the BBC’s strong design language. Its clear, effective, functional and legible with a carefully balanced use of colour and typography to enhance the interaction, guidance and navigation for the user. Meticulous attention to detail and interactions were considered throughout the entirety of the app to adhere to documentation and legal requirements for road safety, thus creating a safe platform.

bbc Device 02
bbc screen 01
bbc screen 02
bbc screen 03
bbc screen 04
bbc screen 05
bbc screen 06
bbc screen 07
bbc screen 08
bbc screen 09
bbc screen 10