Strava
Overview
What is Strava?
Strava is an app used to track physical activity and promote a healthy lifestyle. A social element in the app allows users to interact with other athletes or compete for the best times on different segments. The paid subscription of Strava allows the user to view an in-depth analysis of their workouts. What the user sees depends on the type of workout. In the case of a running workout, the analysis covers elevation, pace, grade adjusted pace, heart rate, heart rate zones, and pace zones.
The Project
I am an active user on Strava as it is a great way of keeping track of many workouts and getting insight on stats, such as elevation gain and pace. After using the app for some time I began to wonder why the data in the activity analysis page is not linked to a map. I found this surprising since their responsive website does allow this, and a number of Strava’s competitors also have this feature built into their mobile apps. As a self initiated project, I decided I want to come up with a redesign for their analysis feature that ties in the data with a location on a map.
The problem: When viewing the analysis after completing an activity, the user cannot see how the data corresponds to locations on a map.
The goal: Provide a seamless solution that allows the user to easily view their data and see how it correlates on an interactive map.
Current Layout
The orange View Analysis button takes the user to the detailed data. This screen lists all the data details but does not offer a map and there is no interactivity, with the exception of heart rate zones and pace zones.
Competitive Analysis
Nike Run Club
Nike Run Club is used for recording run workouts. It is easy to navigate and provides a significant amount of information about the run when the user scrolls down and taps the More Details link.
An interactive map can be viewed when the user taps the Route Details link, allowing the user to see how the data corresponds to the route they ran. Segmented navigation allows the user to easily switch between which data to display.
Ride with GPS
Ride with GPS is used for recording cycling workouts. All the data for the ride is displayed on a single page.
An interactive map can be viewed on a leaf page, allowing the user to see how the data corresponds to the route they rode. The data that is displayed can be changed by tapping on the filter menu.
Initial Sketches & Wireframes
Paper Sketch 1
This initial idea uses the current layout, but has an additional button that expands the card to display more information, including a map.
Pro: Keeps a familiar layout for the user while adding more data.
Con: Might crowd the screen and overwhelm the user.
Paper Sketch 2
Condenses all cards to smaller versions that give core information. When tapped, card expands to display more information.
Pro: User can get a glimpse at all details without the need to scroll.
Con: Introduces a completely new component that is disconnected from the branding.
Paper Sketch 3
Adds tabbed navigation, separating all categories so that each one gets its own page.
Pro: Uses existing components and feels on brand. Page feels less crowded while displaying more info.
Con: Requires extra actions from the user to view the information they want to see.
Wireframes
After reviewing my initial sketches I decided to go in the direction of sketch 3. My reasons for choosing this option is that it should feel familiar for the user as it is more on brand with Strava than the other options, it doesn’t crowd the page, and it is easy to use.
Final Design
In finalizing the design, I paid close attention to Strava’s branding, the components used in other areas of the app, and how they are used. The fixed navigation at the top of the screen is easy to navigate and can be changed according to the activity being viewed. When the graph is being pressed, an indication bar appears letting the user know what section of the graph they are viewing and the data for that area is displayed above. As the user scrubs, the data changes, and the indicator in the map moves along the route. When the graph is released the data goes away. The key points of data can be viewed by scrolling down the page.
