Strava Club Visualizer

A tool for exploring social fitness data on Strava, a popular social network for both professional and casual athletes.

 

Timeline

3 Weeks

My Activities

User Research, Interaction Design, Visual Design, and Web Development

Course

CSE512 Data Visualization

Collaborators

Collin WalkerYitao Wang, Li Zeng

Key Deliverables

Live DemoCodePosterResearch Paper
 
 

Recent years have seen the increasing popularity of fitness tracking applications, among which Strava plays a leading role in facilitating online communities by connecting users who are in the nearby areas to form connections, join up and perhaps work out together. Strava clubs tie together a group of people who share the same interest regarding the activity types (e.g. cycling, running, or triathlon). Club members interact with each other by forming group rides, discussing recent activities online, and competing on the team leader board.  Additionally, group cycling, or cycling activity that involves more than one person, promotes a perception of safety and motivates cyclists to contemplate future cycling.

How can we help Strava cycling users find prospective clubs, explore new routes and meet new partners?

Currently, Strava lacks of providing meaningful aggregated club members’ activity information that could have been beneficial for the three scenarios:

  1. Club owners can recruit members and expand club memberships easily
  2. Prospective members can see if the club has members active in their area
  3. Current members can discover new partners in the club that are active along similar routes and new routes based on other club members’ activities

 

Given the limited visualizations Strava offered regarding club activities, we proposed a exploratory visual analytic tool that facilitates discovery of prospective clubs, new routes, and activity partners to serve the needs of both club administrators and members, in particular for cyclists. 


 

Process Overview

We adopted a user-centered design process where we interviewed Strava end-users to gather our design specifications. Our implementation reduced the visual cluster and allows users to query dynamically with spatial and temporal dimensions. In addition, our visualization yielded positive feedback regarding system’s usability, visual appearance, and the capability to facilitate interpersonal relationships.

Initial Exploration of different ways to present our visualization 

Wireframes for outlining development efforts

High fidelity UI mockups adapted Strava visual design languages

Investigation

In addition to literature review where we explored prior work and techniques for visualizing social geographical data, we conducted user interviews with two users from the University of Washington to better understand the behaviors and needs of Strava users in the context of a cycling club, one as the officer of the collegiate racing team Husky Cycling Club, another one as a member of two Strava cycling clubs. This helped us surface the users needs from the perspectives of an administrator as well as a regular club member.

In the interviews, we asked both participants about their cycling habits, routes finding behaviors, motivations for joining a club and past group rides experiences. For the club officers, we also asked about the considerations for building routes for group rides and finding potential cyclists to join the club. 

We summarized our findings regarding the user’s needs into tasks that they would like to achieve as seen in below.

Design Requirements

Based on the findings from our literature review and user interviews, we identified that our design should include the following elements:

 

An overview of the active area within a cycling club

A visual summary of a club's active area can help prospective club members assess their fits with a club

Segments location and segments attempts

In Strava, segment is an important factor help users explore and assess the safety of a new cycling route. It also allows the club organizer to design new and customized group rides based on the popularity of each segment within the club.

Club members’ cycling abilities

Individual users expressed their preference for cycling with partners shared similar cycling abilities such as speed. Therefore, the club organizer can better design different levels of group rides to cater to everyone’s ability in the club.

 

Club members’ commitment

Showcasing the active members in the club help the organizer identify potential ride leaders that can be invited to group rides in-person, which helps grow up the cycling club and increase the interpersonal relationships within the club.

Timeline adjustment

It allows users to explore the club activity across a different period of time to uncover more relevant information.

 

Data Collection, Visualization Techniques and Implementation

We retrieved the Husky Cycling Club activity data between May 20 and June 05, 2016 through Strava V3 API using custom Python scripts (you can learn more about our data collection method in our paper). Because our data contains both spatial and temporal attributes, we finalized our mapping platform using Mapbox customized with a high contrast tile to show contour lines to address cyclists’ needs in riding on different road conditions. We created the timeline histogram with d3.js and used crossfilter library to support selecting and filtering of our multivariate data based on selected time span.

We chose heat map to represent the distribution of the activity frequency. To reduce visual cluster and uncover patterns on our map, we perform spatial aggregation by binning activity coordinate data into Hexagonal Grids, specially using Jenks natural break optimization.
To represent the sequential activity data and to categorize them into nearby hexagons, we used monotonically increasing luminance to map the data to color encoding where the least active regions are represented with the lowest luminance and vice versa. Subtle changes in hues also allowed us to create more semantically meaningful representation of the value changes. Specifically, we leverage Cynthia Brewer’s ColorBrewer tool to generate the colormap. We also used Strava’s current visual design system to support familiarization of the design for its user. 

 

The Visualization

Our design followed one of the widely used patterns of information seeking method proposed by Ben Shneiderman help users make sense of the data, which is “Overview first, zoom and filter, then details-on-demand."

To first give users an overview of the distribution of the club activities on a map, we provided two map views. A heat map view displays the distribution of activities within the areas, and a segment view shows the distribution of segment and relevant information of a selected club. Both views can be displayed simultaneously on the map, controlled by the map views checkboxes. 

Two Map View

 

We allowed users to limit the amount of data shown on the map by brushing or sliding the activity timeline. The x-axis of the timeline histogram refers to the time and the y-axis indicates the number of activities happened within a day. In response, it causes the corresponding activities and segments occurred in the span of time to appear on the map. The map view is zoomable and pannable to serve as a visual query to pull out a list of the segments that fall into the current view. The list will be updated correspondingly and sorted by the segment attempts. The map displays automatically interpolate between locations when users click on one of the segments on the list, making the highlighted segment fits within the view. 

Crossfiltering the data based on time and the map view

 

Lastly, to reveal details-on-demand, we displayed a list of active users in response to the selected span of time as well as the detailed information of the segment being picked from the list.

View segment attempt detail

 

Evaluation

The Team

The Team

 

To evaluate our visualization, we conducted informal usability sessions with 6 Strava users during the poster session on Jun 7, 2016 during our open house. We first explained the goal of our design and allowed the users to explore the visualization with our guidance to gather
feedback regarding tasks and corresponding motivations of our two user groups (regular Strava user and Club officer). Participants thought that the heat map view was easy to comprehend and identify areas that were most active within the presented dataset, however, because of the constraint in our thematic mapping technique, areas that were mapped outside of the land were perceived as distractions for one of the participants (“There is no bike path in the river”).

Moreover, users liked the map-based navigation to query the segment results, and thought that the ability to view segment attempts within the club directly through the map was more meaningful rather than seeing the attempts across all Strava users. Overall, the participants showed positive feedback for our system regarding intuitive interactions, pleasing visual aesthetics, and support for data exploration.

We were also able to discover several interesting findings with the tool from our users. For instance, in addition to riding around the university areas, cyclists in the Husky Cycling Club also explored segments that are near the coasts and by the mountains. Besides riding during the weekday, club members also rode frequently during the weekends. This type of high-level information could be potentially beneficial for the prospective club members who are looking for a club to meet in-person and ride with based on their schedules, geography preference, and type of rides. For club officers, they can leverage the most active members lists to identify riders that can recruit as future ride leader based on their riding capability, which can be found through the members’ existing Strava profile pages. 

 

Conclusion and Future Work

The visualization aims to help cyclists uncover the past and current trends in their club activities, and discover potential opportunities for future behaviors within their online communities. Our user-centered design process gave us a good understanding of the Strava club member's needs, behaviors and motivation in their regarding roles and subsequently guided our visualization decision and interaction model in supporting proposed design principles. We were able to draw findings through the exploratory tool.

One direction for our future exploration is to adapt Strava Club Visualizer to other Strava Club’s activity data and evaluate the scalability of our visualization technique regarding both implementation efficiency and user task performance. Additionally, we would like to perform structured usability studies with cyclists to assess our design. Since Strava data is heavily dependent on its user contribution to the platform, incorporating other data sets such as municipal level information (e.g., Seattle Department of Transportation Bike Map) can add more context to the existing map, for example, information about a newly built bike path is biker friendly.

We would also like to apply our system to other activities such as running and triathlon, since Strava can track many other kinds of activities. We would like to give the users freedom to choose other kinds of activity for exploration. Additionally, by mapping different kinds of activities, our visualization may reveal the patterns of a certain activity (e.g. for cycling, the routes by the water tend to be more popular).

Finally, we would like to incorporate club community interaction features into the visualization. Even though the Strava currently provides a full list of club members and a club discussion board, it is separate from each other, as such it is hard for club members to synthesize information and interact with one another. Hence, it could help users find activity partners by adding more community interaction features such as providing links to the Strava page of club members who the user may be interested in buddying up.