Strava — Reimagined
The best user experiences, especially in software, evolve from user feedback based on real-time use. Strava is the leading fitness tracking and sharing app today, and I am a long-time subscriber and user. As a part of my exploration in UI/UX design, I decided to take a crack at reimagining Strava. Some users may notice some features are rather unchanged, while some are completely new.
Home / Feed
The home screen and activity feed have largely stayed the same. Aside from some small color choices (the introduction of navy as an accent color, more white and less grey), the core functionality is the same. This page allows users to see activities from the people they follow, as well as give kudos, comment, and share activities.
*Important: All screenshots of the actual Strava app are on the left and were taken on an iPhone 12 Pro. All Figma prototypes of my redesign are on the right and were made for the iPhone 14 Pro which has a different aspect ratio than the 12 Pro.
Discover
The addition of the “discover” feature to the navigation bar is one of the biggest changes I’ve made. I decided to remove “groups” from the navigation bar because I really don’t use it very much, even as a daily user. The “discover” feature was inspired by the “explore” feature of Instagram. I think it would be so exciting to go and explore other public people’s profiles all around the world to get more inspiration for routes and activities. Additionally, I’ve added a “From the pros”: panel which would allow everyday users to see pro-level activities all in one place.
I follow a few professional athletes on Strava, and the home screen sometimes promotes athletes after big races and events (Tour de France, NYC Marathon, etc.), but there is currently no way to view pro activities all in one place.
Exploring by type of activity is also very important, seeing as though there are so many different sports on Strava. The “discover” feature would be a great addition to Strava, and could also be subscription-based only if they wanted it to be an exclusive feature.
Maps / Route Planning
At first glance, the Maps and Route planning feature looks very different, however, the core functionality remains the same. I’ve opted to go for one large, collapsable panel on the left side of the screen, rather than the large bottom panel + search bar setup that is currently being used (image on left).
The most notable change comes in the addition of sliders for Distance, Vertical feet, and Time. The idea behind the sliders is that it will give users more control over the routes generated by the algorithm. Users will provide 2 of 3 inputs, and Strava will generate the 3rd input and a route. Users can also choose what surface they want their activity on.
The “Draw your own route” function is still available and works the same.
Record
I’ve sought to maintain the simplicity of the “record” feature and only made some small layout changes. I’ve made the “start” button much larger, and placed it on the left for easier access with one hand (especially right handed people). I’ve changed three of the 5 icons to text based buttons for clarity.
I’ve removed the heart rate sensor and beacon features from the record screen, as I have never used either. That is not to mean they are removed from the application. I would move them to be viewed in settings (top right corner).
Profile
My biggest goal with the profile page was to make it different than the progress page and have them both serve distinct functions. The top third of the page is preserved from the original, with some enhancements to type size and positioning.
The real changes come in the lower 2/3 of the page. I’ve opted to remove the 12-week graph, in exchange for one-week bar graphs, split up by activity type. I’ve moved all historical data besides the current week to the “history” page. The goal here is to have recent data available to both the user, and to their followers, but keeping historical data elsewhere and private.
History
As you can see, right now the “progress” page is identical to the “profile” page. This is massive waste of space as it takes extra time to view the same information. I’ve opted to having the long term history chart here in the “history” page, with the ability to choose sport maintained, and the addition of ability to change the timeline of the chart (like looking at stocks).
Another notable change comes below the chart. Right now, to view these statistics, users have to dig through their profile, and go to an ugly list-style page to see statistics. The new “history” page allows users to view some of their important yearly statistics without making extra taps or actions. This will allow users to not only find their stats more easily, but have a better understanding of where they are in regards to the entire year of training. This feature allows users to choose what major statistics they would like to view, as well as be able to see all at once (“view all statistics”").
Overall, the History and Profile pages are additions aimed to help users understand their training load much better. By viewing different data visualizations from different time periods, users can now customize their experience even more.
Activities
If it ain’t broke, don’t fix it. The “activities” page within profile is very simple, as it lists the user’s personal activities the same way they are listed in the home/feed page. It allows users to view both their statistics and maps all at once.
Prototype
Play with Strava — Reimagined in Figma’s prototype feature. I am a big fan of Strava’s current orange accent, and I’ve tried to keep it in a lot of places. I’ve introduced navy as the main accent to work with orange to differentiate my mockup from the actual app. Hope you enjoyed my work!