The thinking behind the 'Dashboard' for Eurosport.
The ‘Dashboard’ acts as a navigational system through which carefully crafted information graphics fluidly augment the viewing experience: from the range of sports to event menus, league tables, player statistics and more. It is designed to be discreet, clear and driven by function allowing the sports imagery to be beautifully immersive and expansive.
We knew that the the focus of the look was going to be immersive imagery of sport and so wanted to create an information layer that added function and helped to elevate the viewing experience, yet didn’t overpower it. The head up display that pilots are used to and HUD graphics in video games were one source of inspiration as well as rarified information graphics.
A platform for sports
The strength of the approach lies in the way in which it can introduce and categorise the different sports franchises on Eurosport in a discreet but pervasive way. At the start of each promo, event logos for Roland Garros, Moto GP, Olympics, Tour de France among many others appear briefly before revealing time and date. This not only serves the function of signifying the sport, but continually reinforces that Eurosport is a platform for a wide range of sport from around the world.
The design was always considered across the on-air look as well as desktop, mobile and in print. This creates a unified and ownable identity system for the brand. It’s rarified, and functional design works very well as a UI for apps allowing for selection of sports and the layers of information around each event. Equally in print, the typographic approach and ‘focus lines’ help to create a subtle relationship to the on-air and digital looks.
The information hierarchy is centered around the use of large ‘Tune in’ times and the use of two ‘focus lines’ either side of the time to capture the viewers attention. While the use of fonts, weights and colour help to quickly understand the information. The challenge for the hundreds of different screen layouts was to create a modular system that had clarity, even with lots of information and still feel open and typographically crisp and crafted. Many hundreds of hours were spent refining layouts to find the best balance.
The lines either side of the screen act as a focus on Eurosport content, opening up promos and drawing the viewer in as they flick through the myriad of events the channel broadcasts such as Le Tour De France, Roland Garros and the FIA World Rally Championship. The Dashboard focus lines all use a 2px width, matching that of the Exclusive tab. Enough breathing room is left between the information and the bars to allow for the lines to grow and shrink while moving on screen. They are so subtle, but their consistency of use creates a strong brand identity element.
Pared back colour
The use of colour is intentionally pared back to simply white and red only used for Live and the Eurosport 1 and 2 channel numbers. This meant we could let the imagery bring the colour while the graphics provide clear function. We did try adding more colour, but each time it seemed that less was more and new elements created unnecessary complexity.
The primary font, Alpha by Lineto, was used for very large for event times because it is both distinctive and suggests a familiar sporting vernacular. After many iterations we chose to use a key lined Alpha to make it feel less aggressive and dominant at the large sizes. Event times were given a stroke width of 6px or 4px dependent on their use. Sitting each time front and centre of the endboard ensured enough attention was drawn to them.
Circular, again by Lineto, is the secondary font in order to better separate the hierarchy of information throughout the end boards and the rest on the on-screen graphics. The tracking of each letter had been decreased to -10 and font size kept at 60pt to allow for letters to more comfortably sit with each other. Use of Circular Bold and Circular Book create a simple hierarchy.
The contrast of such a dominating typeface such as Alpha with the legibility of Circular helped to create a distinct identity system throughout the brand.
10 Languages and more
The entire system is design to be used in over 90 countries and over 10 different languages. This provides challenges to the layout, spacing and lines lengths which all had to be continually stress tested with the Eurosport team. As an example the optional ‘Exclusive’ tab has been designed in 10 languages utilising a specially commissioned Cyrillic version of the Alpha typeface. The tabs had custom guidelines ensuring that each iteration kept the same width and spacing.
We spent a lot of time researching and developing the animation behaviour. It was important to us to develop a ‘way’ that things move rather than simply moving graphics. The distinction is that a ‘behaviour’ is created that adds to the brand identity. This is through weighting, inertia, narrative of the sequence, subtle parallax on the imagery and so on and its tends to live in the subtlest of details. We did find that a reduction of ideas, simplicity and continually crafting each element that we started to create a unified, fluid system.
Keeping it consistent
To make sure all the elements work together and are consistent across the different channels, teams and regions we created a detailed and deep standards guidelines for every type of layout. Equally we created each asset in After Effects with ‘smart’ systems to allow the Eurosport teams the right amount of flexibility to change the content quickly while maintaining the strong graphic aesthetic.
Check out the full Eurosport case study here.