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.
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.
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.