< back

Mclaren Honda


A new way to experience F1

01 — Overview

McLaren wanted a new way to engage with their fans during the F1 season - our answer? TEAMSTREAM. A dynamic, ever-changing feed, one that continually updates with a stream of new, modular content.

Created off a dynamic, flexible 9 column grid, the site hangs of an invisible timeline running down the left third of the page, allowing a wide variety of modules to sit together without feeling too busy or 'unengineered' - something McLaren most definitely is not.

We also build some subtle colour logic into the feed, light for modules usually used for non race content and dark for modules used during races. The allows returning users to instantly get a feel for what's going on and gives race time a dark 'in the pit lane' feel.

02 — Interaction

Each module was built with rich and engaging interactions in mind.

03 — Mobile first

Of course it goes without saying, this site was created mobile first. Looking at the user data it was clear that users spent race time following McLaren on their phones, as a second screen. We made sure that not only the layout but also the content was displayed in a mobile friendly way. 

04 — Navigation

The navigation is big, whilst getting the users to where they need to go it also surfaces small key content, like maps of the track on roll over. 

05 — Setting the scene

As well as introducing TEAMSTREAM we gave the platform a new header and navigation.

The header works hard, giving the user context - like driver ranking, fastest lap and grand prix stage. Many different versions were designed, covering scenarios from car launched to mid race pit stops.

05 — my role

My role was in this project spanned from developing a flexible UX design, a brand new global navigation, visual design and content creation. Not bad for a 2 week project. Havas took care of the front-end development.

Next project
The Shell Eco-marathon App