The Strava Feed
2017
Strava is the social network for athletes, a place to share activities, celebrate races, and meet other athletes — a global community built around a love of sport, with over 50 million members. The feed is the central point of Strava, a timeline where athletes share activities with their friends and discover clubs, challenges, and more.
Strava began in 2009 as a platform for cyclists to share GPS-based rides as routes drawn on a map. Over the years, Strava expanded to support additional sports like running and swimming, and added features, like activity photos, comments, clubs, and events. Eventually Strava supported over 30 indoor and outdoor activities, but the feed platform remained optimized for GPS-based activities, with other features tacked on bit by bit. The feed was starting to show its age; photos were shown as small thumbnails, and adding support for additional sports required hacking a rigid system of feed cells and could only be released with an App Store update.
In 2017, we decided to start from scratch, and rebuild the feed as a platform that could grow and adapt with the changing needs of the community. On mobile, we built a brand-new layout engine that could create rich feed cells based on modules that were dynamically assembled server-side. On web, we took the 2009-era layout and completely rebuilt it, with larger maps and rich photo collections.
The new feed opened the doors for new types of feed content, like non-activity posts, and enabled rapid product innovation, particularly for Strava’s partners.
Timeline
6 months
Team
Product Designers (2)
UX Designer
Product Manager
iOS Engineer
Android Engineer
Front-End Web Engineer
Back-End Server Engineers
Role
Lead Product Designer,
Core Experience Team, Strava
The Modular Layout System
The new Strava Feed on mobile was built on a system of interface modules assembled into cells. Each module is a distinct component on iOS and Android, and the feed layout is controlled on the server. With this new system of server-side content rendering, the feed could be reconfigured at any time by simply rearranging modules, greatly expanding the flexibility of the feed to accommodate new product features.
I worked closely with our iOS and Android engineering teams to define the interface modules we would need and design a comprehensive library of modules for text, maps, images, controls, and more. Below, parts of a presentation I delivered to the company outlining the new feed system, cell structure, and module categories.
An overview of the feed system explaining content types and relative quantity within an athlete's personal feed.
Each cell is comprised of modules layered together.
Modules fall into four categories based on their purpose.
An example of the Activity cell, showing the module breakdown, configuration, and the assembled cell.
Feed Cells
The new feed opened up the possibilities for variety in the cells an athlete would encounter. With larger photos and maps, richer group activities, and the new posts system, the feed came alive, and we saw a dramatic increase in athlete engagement with their friends’ activities and posts.
Feed Modules
Modules are simple interface components with broad customization options, designed to stack together.
Feed Utilities and Navigation
In addition to the modular layout system, we overhauled the feed navigation patterns. Athletes can swap between their feeds (Following, You, and Clubs), and carousels within the feed introduced suggested athletes to follow and clubs to join.
The Web Feed
The feed redesign gave us the opportunity to deliver the biggest redesign to Strava on the web since it launched in 2009. We built a brand new system of feed cells, based on the content and control architecture of the mobile feed, to create a much richer web experience, with large maps and photo galleries in a fully responsive layout.
Result
The modular feed system unlocked the potential of Strava’s business partners — a Flywheel class, or a YogaGlo session, could now live as first–class citizens of the Feed. Over the next year, Strava would scale up our Strava for Business team, using the flexibility of the Feed to rapidly iterate on our partner product offering. We built the feed modules with deep instrumentation, drastically increasing the testability of feed content and new features.
It proved that a modular design system could reshape and accelerate product development at Strava. In 2018, we continued development of this system by completely rebuilding Strava Activities.