BBC iPlayer

Android Auto

The Challenge

Android Auto is a simpler way to use your phone in the car. Whether on your phone screen or on your car display, Android Auto was designed with safety and convenience in mind. With larger touch targets, a simplified interface, and your Google Assistant, it's designed to minimize distraction so you can stay focused on the road.

The BBC approached us at Somewhat_ to demonstrate what the iPlayer app would look like on the Android Auto platform and to analysis and assess what the capabilities and technology requires would be.

Timeline
Dec 2014 - Feb 2015
Role
UI Designer
Tools
Sketch, After effects

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.

Design System

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

1024

10 Columns

Typography

Android System Typeface

Roboto Regular

Roboto Bold

Colour

BBC primary colour palette

#DA4185

#333333

#EEEEEE

#FFFFFF

Iconography

BBC GEL Icon set

UI Components

Android Auto Atomic Components

Final Screens

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.