“Fitness,” “freshness,” “fatigue,” “form,” “relative effort,” “power,” “training load,” “impulse,” “peaking,” “power meter,” “heart rate monitor…” 🤯 My first month at Strava was full of new terms and concepts. And at the end of my second month, I was challenged with a project to bring the popular “Fitness and Freshness” feature, that helps to track levels of Fitness, Fatigue, and Form over time, from the web platform to the mobile platform and make it easy for users to understand.

Beginning in my second week, I was involved in user research, where I kept hearing new terms and concepts related to cycling and running. I had observed multiple sessions of athletes using features of which I had little to no understanding. I have learned a lot about how seasoned athletes track their fitness and form, how they deal with overtraining and injuries, and how much they adore Strava! 🧡 Many users already loved the Fitness and Freshness graph on the web platform, while others had never used it and were not even aware it existed.

The Challenge

Fitness, Freshness, and Fatigue are well-known concepts in the athletic world. How do you improve performance? How do you avoid overtraining? Am I properly rested? Fitness, Freshness, and Fatigue can answer all of these questions and help professional athletes to be their best. But what about casual athletes? Ones who run for fun — less-experienced or even beginners — who don’t have any athletic background and have never properly trained for a race?

Research

The team conducted 8 athlete interviews with both new and power Strava users. All participants were Summit subscribers but had different levels of familiarity with the Fitness and Freshness feature.

Most of our assumptions were borne out during this initial research phase:

• Fitness and Freshness is widely used by power users
• The discoverability is low
• The concept is hard to understand for new and less-seasoned athletes
• It’s dependent on heart rate data
• New and less-seasoned athletes mostly use Strava on their phones

After we uncovered all of these issues with the current Fitness and Freshness feature on the web platform, we flipped the gap into a question:

How might we simplify the Fitness and Freshness concept to make it more appealing to different types of athletes while increasing discoverability and usage?

Ideation

Defining the question was followed by a few brainstorming sessions and multiple ideation rounds. We wanted to introduce more people to Fitness and Freshness by bringing it to mobile and simplifying it to make it both more appealing and easier to learn to use.

Perceived Exertion

To make the Fitness feature more accessible, we first realized that we needed to make it work for people without a heart rate device. “Perceived exertion” is a fairly common method for determining how hard you are exercising. It’s how hard you think and feel your body is exercising. This is a pretty subjective method, but it can provide a relatively accurate estimate of how hard you are working without needing a heart rate device.

From the Information Architecture perspective, it made sense to make it a part of the activity editing screen. The editing screen is where an athlete goes after completing an activity to input it into the system and makes all the adjustments such as title, description, activity type, etc., or adds pictures or friends.

We wanted to keep the component and interaction very simple and quick, keep it consistent with the rest of the elements on the page, and minimize distraction from the main flow as much as possible.

Why a Slider 🍔?

First, we wanted to expose a variety of options quickly and allow selections from a range of values. Second, changes that are made with sliders are immediate and offer a convenient way of making micro-adjustments until the user settles on the correct value.

Athletes figure out the scale by reading labels on the slider. To communicate straightforwardly and reduce cognitive load, we decided to go with four simple titles: Very Easy, Moderate, Hard, and Max Effort. To improve the experience further, we decided to illustrate the data connected to each slider by adding a gradient to them.

The Borg Scale of Perceived Exertion is on a scale from six to twenty, where six means very easy and twenty means max effort. To avoid any confusion or misunderstandings, we decided to include an explanation of what perceived exertion is and also an example for each effort in a simple and concise way.

Details would remain expanded the first three times the athlete uses the feature, and following, stay hidden and available if needed, accessible by tap.

Challenges

A null state was the biggest challenge, since a slider component in most cases does not have one. To create a null state, or a zero data state, we combined a toggle and a slider. The toggle’s default position is off. Dragging a slider immediately activates it, and “Clear Entry” turns it back off.

Fitness

The research revealed a few main pain points with the existing Fitness and Freshness graph on the web platform that we wanted to address:

Pain point #1: Athletes don’t understand the meaning behind Fitness, Form, and Fatigue numbers.

The web version of the Fitness and Freshness graph shows three numbers reflecting your workout stats, which actually aren’t as important as your general trends. The biggest value of the graph should be in comparing where you are now vs where you were in the past. This can help you determine your current fitness level and identify how to get even better. The actual numbers are fairly meaningless on their own and don’t offer users much value.

For the mobile version we decided to focus on trends (the percentage) over numbers. While the number would still be represented on the graph, the main insight should be “Am I improving or regressing?”

Pain point #2: Most athletes don’t understand how to compare and contrast Fatigue, Fitness, and Form and combine it with the number of activities on a given day.

To simplify the concept, we decided to focus on one particular scenario and help athletes follow their fitness progress over time and across activities. As a result, the Y-axis only represents your Fitness measurement, while the X-axis represents your timeline; together they show the Fitness trend. Dots represent activities. The bigger the dot, the more activities were done on that particular day.

Pain point #3: They don’t have an understanding of how trends are calculated.

The way Fitness works is really complex and hard to sum up in few words. To make sure that athletes can find answers to all possible questions we created a screen that explains everything in details and answers most common questions.

Behavior and Logic

After a lot of hard work, the Fitness graph was drastically simplified, but it involved a lot of communication with engineers about logic and behavior.

• The first iteration of the Fitness graph was done without real data. After we incorporated real data, it influenced some of our earlier design decisions. Dot sizes were too big, and big impulses started overlapping, breaking the design. We also removed dots from “3 Month” and above views as well as limited the number of lines per chart that represent days.
• We decided to go with a scrubbing interaction that allows users to drill down into the data and provides greater context when they are looking at a particular day.

• When working with data, it’s super important to remember to consider any outlier cases, which in our case are low data, no data, and first time user experience.

Usability Tests

While testing the Perceived Exertion feature did not reveal any usability issues, it uncovered a few problematic areas with Fitness.

• Clarity and transparency build trust. Even though we simplified the concept a lot and included an “i” icon that would bring people to a page with all the information about Fitness, a lot of athletes questioned how trustworthy the graph was and how it was calculated. As our first attempt to address both concerns, we added a one-line explanation underneath the title. That small change was able to answer both questions: how it gets calculated and can I trust it. It also was just enough explanation to make people want to try it more and learn a lot more about the feature.

Being transparent and upfront about new features is necessary to avoid any mistrust and confusion.

• Proximity — space matters. Distant placement of an ‘i’ icon made it go unnoticed by most athletes. Moving it right next to the title made them aware that there is a resource where they can find answers to all their questions.

Results

Strava launched Fitness on mobile on September 19th, 2019, and the launch was a huge success. Since then, the Fitness graph has gone through a few iterations, and the team has added an activities component that allows users to drill down into the activity’s details screen. We plan on continuing to improve and iterate on it over time.

And in the end, I just want to say thank you to the whole team. Collaboration, patience, and camaraderie was our key to success!