A Whole New Experience for Premium Athletes

Athletes have measured their fitness on local hills long before our first leaderboards. Strava segments have enabled us to test ourselves both in our own backyards and all over the world, on iconic climbs, against some of the strongest athletes. To date over 10 million segments have been created by our community in 215 countries, covering nearly 50 million kilometers. With some of the most popular segments having more than 794,733 attempts recorded by nearly sixty thousand unique athletes.

While segments are one of the most iconic Strava features, something has been missing, something people keep asking for. Until now, you’ve had to wait until completing an activity and uploading it to see where you stack up against your PR and the segment’s leader. Wouldn’t it be nice to get real-time feedback? That’s what we thought when we started to develop the technology to make Live Segments possible on mobile.

To be a powerful tool, Live Segments had to do more than just look great, it had to run great. Our engineering and design team have been working behind the scenes for over a year to ensure that what appears on your screen is accurate and informative. Below we share some of their product development findings and stories on how this feature came to life.

Segment Exploration

One of the biggest challenges we faced was determining which segments to show. We’ll only show the most popular segments and those you’ve selected, or ‘starred‘, to limit the noise. You can star your favorite segments from your phone or your computer: just pull up an activity and select the segments you’d like to target.

Screen Shot 2016-05-17 at 11.03.28 PM

“It’s very hard to determine if someone is actually going to attempt a segment. We spent a lot of time debating the best way to actually make the experience useful by limiting false positives,” said iOS engineer Rodrigo Gutierrez.

When you start riding it draws a boundary box around you and pulls starred and popular segments, as shown in one of our internal iterations below. It adapts to wherever you’re going so it will display segments even in places you’ve never ridden before.

Design Thinking

Thinking about Strava in an athlete’s hand or on the handlebars informed how we envisioned the new recording experience. For runners, we carefully considered the placement of the controls along the bottom of the screen. We found that the way someone would hold a phone while running is different from when he or she is standing still and interacting with it. We found that if buttons were fully flush with the edges of the screen, accidental palm touches would occur. This is why we designed round control buttons that create clear and easy visual tap targets.

When used during cycling, we thought it was important that you could interact with the screen without having to reach for the app. Ideally you could keep both hands on the bars. We designed interaction points that could be done using a thumb or with minimum visual assistance.

Designing Live Segments was as much of a challenge as taking the KOM on a popular climb. The feature went through multiple design iterations. “Originally we had this idea of a circular dial that would update your progress in a ‘clock’ style,” Product Manager Crosby Freeman said.

“We evolved from the dial to the present Live Segment view, which is sort of modeled off of those old 2D race car video games. This view allows us to expand and show more goals in the future.”

The final product is a simple to use and gamified experience of chasing a personal best. We fine tuned the UI with local San Francisco cyclists and runners to ensure it was as user friendly as possible.

If we weren’t sure about a design element or a font size, the way that we would validate that was to put it into your device, put it on your handlebars or put it in your hand and walk outside and simulate it.

Designer Kyle Yugawa said, “That really helped.”

Audio Cues

Live Segments offers both a visual and an audio component, so you can pick which works best for you. We realize that you can’t always look down at the bars or your phone while putting forth a best effort so we explored ways to cue when a change on the screen occurs without requiring you to see it.

Live Experience

To use the new Live Segments experience, just start recording a ride or run from your phone and get moving. As you approach a starred segment or a popular segment, the screen automatically changes to show the Live Segments view.

You’ll see a map of the upcoming segment including a notification bar with segment name and start location. As you get closer to the start of the segment, the notification bar turns from black to orange.

After the segment starts, you enter Live Segment mode. You’ll see your current effort in the center, with your PR on the left and the person on top of the leaderboard on the right.

Bright color-coding, green if you’re ahead, red if you’re behind, makes it easy to see how you compare to your PR and the top of the leaderboard. When you cross the segment finish line, you’ll see a summary of your effort. Then you’ll automatically go back to the record screen with your live stats.

Take it out for your next run or ride and let us know what you think!