Strava Mobile UI Update

An exploration of Strava’s newest UI

Last year I wrote a case study on the Strava fitness tracker mobile app, narrowing in on a feature I felt was sorely missing, but also identifiying a few other issues in the app’s UI. The article discussing a potential Route Explore feature can be read here, but I will cover some of the other smaller changes in this article.

Last week, Strava rolled out a pretty significant UI update to their mobile app, and I want to dig into some of the changes they made. Did they address some of the problems I brought up? Let’s find out!

Problem 1: Find Friends is Inconsistent and Not Discoverable

The first issue I identified was the lack of consistency and discoverability with the Find Friends function. Strava draws a lot of its distinct appeal from being a heavily social fitness platform, so finding friends and other athletes to follow is central to the function of the app.

A few updates prior, the path to finding other athletes was a convoluted one. On some screens you could see two overlapping profile icons (basically the old singular profile icon superimposed on another). Clicking this would bring you to the Find Friends page. Simple enough! But it required taking a guess at what that icon meant, and it’s similarity to the Profile icon, as well as the fact that it showed up in two places, made it somewhat vague.

My proposed fix was to integrate the Find Friends page into the Explore tab of the app. At the time, there was a “Suggested Athletes” section at the bottom of the page, in case you got bored of Exploring and needed prodding to make some connections.

An additional problem other users had reported with using the Find Friends function in the app was difficulty actually using the search to Find Friends. Though the app can connect to one’s Facebook, and even notifies the user when a Facebook friend newly joins Strava, the basic name/keyword search is not strong.

One way I identified to address this problem would be to add search critera, such as a radius or zip code filter. This would help users to locate other athletes with just a first name, and without access to Facebook. Another easy solution would be to bring in additional APIs to broaden the availability of contacts. In my experience, much of the social interaction that once took place primarily on Facebook has shifted to Instagram, and it’s both easier and lower stakes to follow/unfollow someone on Instagram than asking to be friends on Facebook.

Figure 1.3 - Mock-up suggesting placement of an access point for Find Friends in the Explore tab, with an additional Instagram API

Did Strava do exactly what I told them? Not quite! I’m still here for consultation Strava ;)

But they did do a lot to improve on some of the inconsistencies with the Find Friends icon. It’s now present in many more of the main menus, and the profile menu changed to “You” with a miniature of the user’s profile picture as the icon. This will remove some of the confusion arising from the similarity between the now-defunct Profile icon and the Find Friends icon.

Further, they gave a big makeover to the Explore page, now known as Maps, which precludes any possibility of searching for athletes under that menu. By process of elimination, the user can now identify the Find Friends icon as such more quickly.

Still missing, however, is the ability to add contacts from your Instagram followers list (perhaps there is some privacy issue with seeing where people live, but I think this could be ameliorated with data sharing options within either app).

Figure 1.4 — The new and improved Strava Feed and Menu Bar
Figure 1.5 — A user from the previous survey reports a much easier time finding the Find Friends page.

Overall, I think Strava did a good job improving the discoverability of this feature over the past year (there were even some small changes from when I first wrote the case study) and the newest update reflects a much more cohesive approach. This is evidenced anecdotally in a conversation I had with one of the original survey subjects from the first part of the case study. When before it took 3 attempts (and therefore 6 taps) to access the feature, after the new update, this user was able to find it right away.

Problem 2: Inability to crop ride using mobile app

*Disclaimer: this feature was added in an update of Strava during the time of writing

The second big issue I identified with the Strava mobile app at the time was the inability to crop a user’s activity using the mobile app, in order to exclude erroneous or irrelevant recordings of movement from the GPS.

At the time, the only way to crop one’s ride was to use the phone browser to access the desktop version of the Strava website, which was a laborious and non user-friendly process.

Figure 2.1 — Cropping an activity workflow at the time of diagnosis

The solution I proposed to this problem is as simple as creating a mobile UI for the crop function. It should function similarly to web, with a two-sided slider in addition to buttons on each side that incrementally crop the recording.

Figure 2.2 — The current desktop crop feature rearranged for mobile.
Figure 2.3 — Strava’s official implementation of the crop function on mobile

Now, as I mentioned, Strava addressed this problem and built this tool into their app before I could even finish the write-up! I’ll take my commission via check, Strava.

You will notice their implementation is a bit simpler than mine, which allows them to more prominently feature the map, and gives the user finer control over the slider, which I will credit them for. Missing however, is the disclaimer that the crop is final. Not to worry, that shows up in a pop confirmation menu when the user clicks save! Their solution is generally more mobile friendly than my quick port of the desktop tool, for which I give them kudos. Their solution to this problem does exactly what it needs to do, cleanly, and no more!

One of the major changes Strava made to their UI was to change the Explore menu to a Maps menu. They more cleanly integrated Routes and Segments to utilize the same map, simply with a changing overlay. Their execution is very clean and a big improvement over the former iteration! As a UI update, this is a very good one. Additionally, the user’s KOMs and Local Legends trophies are all in a single, easy-to-find place in the Saved tab; prior to this update, I couldn’t tell you where a user might find any Local Legends they might have under their belt.

Figure 2.4 — The new Maps interface, Routes and Segments
Figure 2.5 — The new Maps interface, Saved Segments and trophies

Unfortunately, the main feature I wished they would bring into fruition is still missing. That is, public route explore. They are still doubling down on auto-generated routes, which I admit are neat, but are still inferior to good old-fashioned public knowledge. However, the new UI does pave the way for that feature should it ever be released. Here’s hoping!

--

--

--

Seeing and tasting the world via bicycle. Designing fun and usable products and currently open to new work opportunities! www.jonamcc.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What your astrological sign may say about your home decor

The hidden potentials of visuals

It’s not only an User Experience Problem!

Behind the Scenes of Mad Manimation

The Brainstorm Panel : Atari, The Gaming Giant and The Metaverse

‘Design’ as a means for development, for the future of India

ICF Building Systems — The Future is Green

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
Jonathan McCurdy

Jonathan McCurdy

Seeing and tasting the world via bicycle. Designing fun and usable products and currently open to new work opportunities! www.jonamcc.com

More from Medium

Designing a mobile app in 7 days

New Feature For YouTube Music: A Case Study

Future of User Interface Design

Case study: DoorDash doesn’t know me well… Here is my one-step solution

Favorites Tab Banner