Strava’s Year in Sport shows that athletes don’t quit, no matter what

In a year that presented unique challenges for athletes and others in the fitness community, fitness-tracking-cum-social-networking app Strava produced the Year in Sport experience for its users to show the persistence of the community. Tasked with designing this in-app experience, Manual created a comprehensive design system for the infographics that tell Strava's user’s journey in the past year, around the campaign tagline Athletes don’t quit.

The project started with a reflection from the Strava team on what athletes experienced in the past year. Races and group activities were cancelled. Gyms, pools and their favourite trails were closed. But Strava found that people still managed to get workouts in and miles recorded, even if it meant running marathons around their houses. “The first step in the design process was to map out a storyboard of the Year In Sport in-app experience. The Strava team approached these as chapters, outlining what both free athletes and subscribers would see in their 2020 activity summary,” Manual tells It's Nice That. “Given that the full animated experience for a subscriber would last three minutes, it was important to think about the pacing of the infographics, and how they would work together and build upon one another in order to form a narrative around each athlete’s year of efforts.”

This meant they had to choose and frame data points to support the narrative. For instance, Strava used big-picture information — total days active, top sport types and total time spent — to show that the rules of the game had changed. “The messy middle part full of hard-won efforts was reflected in data on total distance, longest single activity, average running pace and riding speed. The climactic high point had to be about the literal mountains conquered: total elevation and hilliest activity. And as the athlete-heroes crossed the finish line to receive their laurels, crowns and kudos their achievement data and photos captured the celebration,” Strava says.

Manual wanted to avoid repetitive motion motifs without confusing and nauseating the athletes with too many different movements. Also, the experience had to be valuable for both the regular and occasional users of the app. “One athlete might have logged three activities all year, while another logged 366 in this leap year! We needed to ensure that the experience was celebratory, engaging and functional for athletes on both ends of that spectrum and every athlete in between,” the brand says.

“The designed direction we quickly and collectively landed on as a team was the simplest and sportiest of those we developed. It also allowed for the widest range of flexibility when it came to kinetic data visualisations. Ultimately, this allowed us to elevate the data as the hero element, with design organically growing from the facts and figures,” the consultancy says. “The infographics themselves were typically made from a few simple graphic elements: lines, dots, colour strips, circles, and typography. The system needed to be simple to allow for animation to really bring the ideas to life.”

Surprisingly, the most challenging element to get right was the colour palette, with the Strava team pushing them to go beyond their usual orange, grey, black and white colours. The team found inspiration in athlete’s apparel and colour strips found on race bibs, then toned it down with darker and natural colours like navy and olive green to avoid the worn out digital colour palette. “The aim was to make the final experience reminiscent of the colours the athlete sees while doing their favourite activities,” Manual mentions.

Besides choosing the right colour palette, other challenges came from trying to visualise large datasets that would connect with the users. The motion graphics needed to run natively on the users’ mobile devices in eleven different languages. Manual’s animator Sander Van Dijk worked closely with Strava’s engineering team to ensure that the experience was seamless for the users by exporting After Effects animations into JSON files, using the Lottie framework to ensure similar experiences across different operating systems as well as a carousel system built by the Strava engineers that allowed users to skip back and forth between animations much like you would an Instagram story. “The final challenge was pulling something like this off in twelve weeks, something that neither team had ever done before,” says Manual. “It wouldn’t have been possible without the mutual trust and respect of each team, and the collective enthusiasm to honour the tens of millions of athletes who got out there during a global pandemic and proved that athletes don’t quit.”