Strava Multisport Activities
2018
Our redesign of the Strava Feed allowed us to modernize the most-used surface in our mobile apps. Building on our success with the feed, we turned to the second-most important part of our apps — our activity pages. Much like the feed, these were built as a rigid, monolithic layout, and had limited flexibility to add new sports. As we started seeing more and more new activities uploaded, we had the opportunity to dramatically improve these pages and update our modular layout system in the process.
We began with a content architecture exercise, breaking down our activity pages to determine what new layout modules we would need. We then created paper mockups of multiple activity pages to determine content hierarchy. Finally, we designed and built a series of new modules, covering stats, line and bar charts, zone distribution charts, and more.
We also updated our native recording experience to make recording other activities more seamless for our athletes. Previously, athletes had to select Run or Ride and then edit their activity to the correct type after recording; with our new sport picker and recording experience, athletes could natively record their preferred sport right from the app.
Timeline
4 months
Team
Product Designer
User Experience Designer
Product Manager
iOS Engineer
Android Engineer
Back-End Server Engineers
Role
Lead Product Designer,
Core Experience Team, Strava
A Modular Activity Page
By rebuilding our activity pages using our modular layout system from the feed, we were able to bring the same improvements to our activities and expand the collection of modules available for layout. With this new modular page, we could display larger photos, more statistics, and provide an accurate representation of many more activity types, like yoga or rowing.
A simple yoga activity, a midsized weight training activity, and a detailed cycling activity in the new activity page, showing the breadth of content options the page could include.
The new activity page provided unique opportunities for layout — bigger photos, photo grids, and even custom images for parter activities, like the custom rower screen shown in the rowing activity on the left.
With multisport activities, we also rebuilt the recording experience in Strava's mobile apps. Now, athletes can record any sport natively in the app, not just runs and rides.
Richer Activity Analysis
A key part of activity pages is the analysis view, charts showing data streams (like heart rate, speed/pace, and elevation over time) and intensity zones for power and heart rate. We built a collection of new charting modules along with new modules for displaying a segment list view.
Power and heart rate zones, left, show the athlete's distribution of effort. Speed and heart rate streams, center, are overlaid with elevation. And a results page lists segments and achievements from the activity.
The new multisport recording platform can natively record over 30 GPS-based sports like cross-country skiing and stand-up paddle boarding, and also provides a way to record simpler time-based sports.
New Modules
The activity detail page gave us the chance to revisit our modular layout system, add new modules for charts and data, and improve some of the user experience problems with the first version.
