We approached Red Bull Racing several months ago with our take on a Live Race Hub. The concept was loved and in partnership with TAG Heuer, the Race Station was born. There were a few design iterations along the way, culminating in the final Red Bull Racing-supplied designs, as well as some investigation into the best way to get the lap time and track position data displayed in as close to real-time as possible - we looked at using data from FOM (Formula One Management), the team’s own telemetry, and finally settled on a manual input form in the platform.
Near Real-time Data Feeds
The Race Station takes full advantage of many of the key features baked into our platform:
- Ability to consume multiple data sources in a single module
- Event-centric page states, including multiple ‘sessions’
- Context-awareness to provide current vs historical content
Over the course of a weekend, the Race Station consumes data from the following sources:
- Ubimet - weather forecast and actual weather
- ScribbleLive - the live commentary feed
- Perform - race results and driver and constructor standings
- 3 manual data input forms for:
- Live lap times, position, tyre choice and pit stop information
- ‘Mood in the Garage’; a light-hearted update on how the team are feeling ("Pumped and Excited" is a common update!), plus a couple of emoji to get the point across
- ‘Key Moments’; a scrolling ticker which allows Red Bull Racing to pull out the key moments in the race and give them extra prominence
All of these sources are updated every few seconds and active user sessions poll them depending on which tab they’re currently viewing. We also restrict the commentary response to new or updated items since the last request. This way, the frequent requests are kept as light as possible, eliminating redundant information that the user is not looking at and improving efficiency, particularly for users with low bandwidth such as slower mobile connections.
Design and Development
In line with the main website, the Race Station is fully responsive. This ensures all key functionality and the general look, feel and hierarchy are consistent across all devices, from a mobile phone up to a high-definition television.
The most recent user analytics revealed that the vast majority of visitors to the website use modern browsers, so we were able to drop support for IE9 and older and focus our efforts on using the latest techniques to provide the best experience for modern browsers like Chrome, Firefox, Safari, IE10+ and Edge. For example, all the icons and graphics use vector imagery to ensure a small file size for each asset while giving a crisp look regardless of the screen resolution.
Rapid Data Entry
The public-facing site wasn’t the only part to get attention - the manual data entry forms needs support for rapid, frequent entries as a session progresses. All 3 data entry forms were produced using AngularJS, a popular framework that includes 2-way data binding. This means that any updates made in the form are instantly updated in the database and vice-versa without reloading the page.
The lap data form has been developed to ease the entry process as much as possible. You can tab through the fields swiftly and it has some smart defaults whereby it automatically fills with the data from the previous lap entered once you select a driver allowing you to quickly update the time and add a new entry.
Take a look at the Race Station here and look forward to seeing it in action during the next event!