Tour Tracker Web Evolution
The original web version of Tour Tracker was designed to highlight live race video with all of our other data visualizations surrounding that key element, a layout that has proven successful for over 12 years and is still used for official Tour de France coverage.
But not every race has live race video available to every user and we needed a simple way to provide those users with a familiar, complete solution. Since GPS tracking was now one of the primary data sources, we did a simple layout change for those users.
But by 2021 the number of users using Tour Tracker's free live race coverage at live.thetourtracker.com had grown significantly, and we felt it was time to give those users a proper design, focusing the layout on the most important elements: the live race profile and our live multi-media commentary feed.
As you can see the new layout puts the key elements center stage, giving more height to the profile so that we could show the rider group details and more width to the commentary so that embedded photos and videos have more impact.
The new layout also provides a new area in the lower right for additional relevant content: a list of intermediates for quick access to their details and results (actually you could always click on the icons on the profile or map to get this but that's not obvious to every user), a summary of the standings for quick reference without changing context, and a new social media feed.
But wait, there's more! While we were updating the layout, we revisited a much harder problem: adapting the app to devices and websites where we don't have enough width for three columns of data. Back in 2015 we provided some basic reflow capability for each tab of the app, but for 2022 we have a more complete solution.
The LIVE page, for example, goes to an optimized 1-column view when needed, keeping the most critical elements at the top, while the rest of the data (e.g. the map) is a short scroll away.
With the other tabs like STANDINGS, however, we wanted to retain the list of riders throughout the transition to narrower widths. As such they go from 3-columns (category, riders, rider profile):
To 2-columns (category, riders, clicking on rider will show a profile pop-up):
To 1-column (most important categories and riders stacked, click on rider for profile):
We hope you enjoy these updates and look forward to getting feedback!