Sue Hua | Strava Feature Add

An overview of the project & its challenges

background

Strava is a digital service used for tracking physical exercise. Most commonly used for cycling and running, Strava covers a wide range of sports and activities, including swimming, hiking, weight lifting, skiing, and yoga. In addition, its social networking features are widely used, allowing users to follow and interact with each other’s activities. As of January 2023, Strava has exceeded 100 million active users globally and continues to grow.

As an avid runner, I'm a loyal user of Strava's mobile and Apple Watch app; however, I've found the existing product does not meet all my needs, particularly in the moment of recording live activities. I chose to explore this issue by designing a feature to improve the service. While I had ideas on the direction I wanted to go in, I put these biases aside in favor of a human-centered approach by first investigating the problem space by speaking to other users. Based on the insights derived from these conversations, I defined the specific problem I would solve and the opportunity it presented.

The Problem

Strava users with an Apple Watch cannot simultaneously record their outdoor activities while wayfinding their routes because the map feature is not accessible on the Apple Watch app.

The Opportunity

How might navigation be made more accessible on the Strava's Apple Watch app so users can simultaneously record their outdoor activities while wayfinding their routes?

Design constraints

Even though this was a fictional project, my goal was to approach it in a realistic manner. I recognized early on there would be inherent constraints to consider, as well as assumptions to make. For the sake of the project, I proceeded with the assumption the design solution would be technically feasible to implement. I tried to minimize the backend development needed by planning to utilize the existing frameworks used by Strava's apps.

Since I was adding a feature to Strava's Apple Watch app, I would apply watchOS specifications. These include a small device screen, tiny touch targets, native features, unique UI patterns, and gestures. Understanding these device nuances require detailed knowledge of watchOS, which I familiarized myself with through secondary research. Additionally, adhering to Strava's established design system was crucial to ensuring the feature was seamlessly integrated into the product experience.

Understanding the competition

Competitive analysis

To gain an understanding of existing solutions available to users, I completed a detailed competitive analysis of Strava's direct and indirect competitors. In an effort to have a diversified perspective, I included other Apple Watch fitness tracking apps, like MapMyRun and WorkOutDoors, and also wearable device providers, like Garmin and FitBit. The competitive analysis provided me with a frame of reference for how other brands and services have (or have not) addressed the problem and what was feasible.

Gaining first-hand perspectives from users

Methodology

I conducted remote user interviews with 5 participants who identified as people who wear wearable devices to track their fitness and outdoor physical activity (i.e. cycling, running, hiking, or walking). 3 of the participants were active Strava Apple Watch app users, while the remaining 2 used other methods for recording activities. Participants included a range of ethnicities, incomes, locations, and genders.

interview findings & synthesis

Below are the key findings and resulting insights I gathered from user interviews, which I synthesized through affinity mapping. I used these to inform my initial design decisions, paving the way for the direction I would ultimately take the project in.

Users must use mobile phones during physical activity even while wearing a smartwatch because certain features are not integrated.

Create a hands-free solution accessible on the Apple Watch app, allowing users to focus on their activity instead of pausing to reach for their phones.

Health and fitness is cited as the primary reason why users wear a smartwatch since it automates the tracking of health-related data.

Convenience should be highly prioritized. Users want a solution that further complement the features fitness trackers already offer.

Users use Google Maps or Apple Maps on their mobile devices to navigate their activity routes when they get disoriented or lost.

‍Navigational cues directly from the Apple Watch will help users stay on the correct routes so they can complete their outdoor activities with ease.

Users prefer familiar routes due to safety reasons but will occasionally try new ones when traveling or hitting new fitness goals.

‍Empowering users to orient themselves while doing outdoor physical activity can lead to users feeling safer and more likely to try new routes.

I’m surprised Strava doesn’t have a map feature on the Apple Watch... It would make running in new places so much more enjoyable and efficient. - K.P., Interview Participant

Aligning business objectives with user needs

Project goals

User interviews led me to identify the specific user needs to address. Since I proposed to add a new feature to an existing product, I needed to evaluate whether it made sense from a business perspective. I outlined Strava's business goals and challenges and compared them against the user goals and needs that had surfaced from user interviews. Most importantly, I used this as an opportunity to identify any areas of overlap, which contributed to the longterm vision for the final product.

Envisioning how users will interact with the new feature

Interaction design

With the inputs from the research phase, the solution quickly began to take the form of a live navigation feature. However, there were still details to address, including how users access the feature from the existing app and the specific types of navigational cues the feature would incorporate. As a method of documentation, I created user flows to plan how users would flow through the existing app to the feature. I included specific scenarios and decision points the user would take to achieve their goals. I chose to proceed with turn-by-turn navigations and live location on map enabled by GPS.

Applying visual design elements to wireframes

Wireframes

After sketching my initial ideas out on paper, I went straight into the high fidelity wireframes. Since I was adding this live navigation feature to Strava's existing Apple Watch app, it was crucial to reference Strava's Brand Guidelines to ensure my designs were consistent and adherent to their standardized design system. I aimed for the new feature to be integrated seamlessly, so that it was complementary to the existing app design. I validated whether this held true through usability testing.

Usability testing with Strava users

Test Parameters

I built an interactive prototype in Figma and moderated remote usability testing with 5 participants. Similarly to the recruitment for user interviews, each individual identified with wearing wearable devices to track their fitness and outdoor physical activity. 4 participants were active users of Strava's Apple Watch app, while the remaining was a user of Strava's mobile app but wore a Garmin device. I asked participants to complete 3 key tasks: Start Activity Route, Navigate Route, and End Activity.

Results & Key Findings

After synthesizing the test results through compiling a score card and an affinity map, I identified 4 key findings:

Participants would use the live navigation feature for wayfinding if available. Participants said the feature would improve their overall experience using the Strava Apple Watch app.
Participants thought the live navigation feature was well integrated, but subtle changes could improve its usability. Participants found the map and routes icons were too small.

Participants struggled locating the dedicated Routes screen. They first tapped the activity cards in the Quick Start screen with the mental model of then being prompted with selecting a route.
Participants suggested pairing live navigation with audio cues and haptic vibration. While out of scope for this project, it can be assumed that these would be incorporated into the final product.

Addressing usability issues through iteration

priority revisions

Based on the findings from usability testing, I selected 3 iterations to implement into the final design and prototype. I considered frequency and severity, as well as what would have the biggest impact within the time constraints of the project.

Before

Problem

Users struggled to locate the Routes screen. Users didn’t notice the screen indicators immediately and were inclined to first tap on the activity cards, assuming they could select a route from there.

After

Solution

Create an alternate path to select a saved route from the Quick Start menu after choosing an activity. When tapping the activity card, the user is prompted with the choice to select a route.

Before

Problem

Users had difficulty switching between screens on their Apple Watch while moving during physical activity due to the small screen size of their smartwatch.

After

Solution

Increase the size of the map and routes icons to create larger touch targets and add more contrast by changing the hue from gray to white.

Before

Problem

Users hesitated on scrollable screens because there were no indicators to guide through the overflow content. This negatively impacted users’ ability to complete the tasks.

After

Solution

Add Apple Watch’s native scroll bars which appear when the user taps the screen. Default state is white, while the active state is green. The bar moves as the user scrolls, indicating to the user where they are on the screen. Due to limitations with the prototype, this will only be added to the final high-fidelity wireframes.

Putting all the pieces together

Final Prototype

After applying the design iterations to the wireframes, I created a final prototype of the live navigation feature. The feature is seamlessly integrated into Strava's existing Apple Watch app and effectively provides users with a hands-free method of wayfinding outdoor activities.

view Prototype in figma →

A feature like this would be huge for me since I’m bad at directions generally but especially when I'm focused on running. - H.A., Test Participant

Concluding the project & next steps

Reflection

As a frequent Strava user and dedicated runner, I was highly motivated to take this on as a passion project. Designing a feature for an Apple Watch app came with its own unique set of challenges due to native device specifications. While working within Strava's design system also guided my visual design decisions. While I had to accommodate these constraints, I didn't feel limited in my creativity. Instead, I considered these as a pieces of the puzzle which I needed to solve for.

Next Steps

Due to time constraints, I concluded the project after applying the design iterations to the final prototype. However, I recognize that the design is not complete. To continue with the design process, these would be my next steps:

Conduct another round of usability testing to validate whether the design iterations improved the usability of the live navigation feature. Did adding an alternate path to selecting an activity route make the feature more accessible to users?
Explore adding audio and haptic cues. How can these native Apple Watch features further enhance live navigation?
Continue testing and iterating. What other iterations can be made to Strava's Apple Watch app to further engage users recording outdoor activities?

Strava Feature Add

Adding a live navigation feature to Strava's Apple watch App.