Simplifying and Visualizing Big Data

How we adapted a popular web feature for mobile

Olia Birulia
Jan 16, 2020 · 8 min read

“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

Research

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

Perceived Exertion

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 🍔?

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.

Android and iOS Slider Designs

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

Fitness

By Arlo Jamrog

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

Freshness and Fitness on Web

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.

Examples of Fitness on Mobile

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

  • 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.
Low Data, No Data, First-Time UX
  • 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

  • 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!

Strava Design

The exploration, creation, and learnings of our team.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store