Strava
Integrating a Music Player
2019 - Individual Project
Responsibilities: User Experience, Interaction & Visual Design
View full Prototype - This link will open in a new browser tab.
Introduction
The Strava project was my third hypothetical project through UX Academy. This project had a focus on a finding and integrating a new feature within an existing product, as well as putting a focus on using a pre-existing design system to create the new features and its related screens.
Originally this project's aim was at as applying the new feature into a music application [Spotify]. However, the best solution came from finding a unique potential partnership in integrating the music application within another app, and this is the process that it took to get there.
Product Information:
Strava is an social exercise activity tracker. Within this app you can record and track your activities details (such as the path, elevation, time, speed, and more), whether it is as running, biking, wind surfing or mountain climbing or more.
Once activities have been completed and saved, they are then populated in a post on a social feed displaying the final details, where people can give kudos (likes), comment, and compare.
Summary of brief:
- Determine a new feature to assist with improving the in-app engagement and retention.
- Use the established design system to seamlessly integrate the new feature into the app.
- Provide a prototype of the new feature’s integration within the application’s screens.
From the brief and the project requirements that were given, a design question was determined:
"How might we determine and deliver a new feature within the app that can help increase the enjoyment for the people using Strava, as well as improve retention of the current user base."
Research Goals & Methods
Research Goals
- Determine a solution to assist in the increasing of the application’s engagement with its user base through a new feature or integration.
- Identify the key experiences of the customer and any current friction points they may have.
- Investigate how Strava’s direct and indirection competitors deliver new features not native to their applications.
Research Methods
The first method that I went with was a little bit of secondary research to first get a better understanding of the music streaming industry and the through this the market share that Spotify and its main competitors held.
From the results of the secondary research, a list of competitors were compiled which then kicked off the competitive analysis phase. Each competing exercise service’s website and apps were visited and tested to help determine how they functioned and offered their additional features (besides the basic activity recording) from onboarding, to sharing individual activities and how user's friend communities interacted with the activities.
The next stage was to plan and perform interviews that fit a typical demographic of the music app. The goal of the interviews was to determine people's behaviours in how they use their music or podcast streaming apps, and any friction points they might have. Then based on these findings, a potential integration opportunity would be chosen for a new feature.
Four participants were interviewed, each were working professionals in various occupations and it was found that each frequently used their streaming service on the go (e.g. commuting, travelling, etc), as well when they found time to relax, to help them focus on their tasks while at work or when they exercised.
After the interviews were completed, the information gathered on their comments about their listening habits, and friction points were described through empathy summaries.
Research Findings
There ended up being a few opportunities that showed the most promise.
Opportunities
- Integrated music player with an exercise app: One participant mentioned a point of friction when stumbling between two apps. By adding a music player option into an app it can help deliver a more immersive and frictionless experience.
- Branded / Sponsored merchandise section. A version of this was mentioned in a couple participant’s interviews where they wouldn’t mind an area devoted to their favourite musicians, or podcast producer’s branded merchandise
- Live Concert / Event Streaming: A couple of participants mentioned that they would be interested in an area where a stream of a concert or event would be enjoyable in a more direct or exclusive interaction with their favourite artist/podcast producer.
- Integrated music player coupled with a “friend’s radio station”: Within a popular gaming platform. A participant mentioned that they and their friends at times wish they were listening to the same music when enjoying a task in one of their games.
Now here is the main turning point in this project - from chatting with my critique group, and browsing around some design communities, I found that the most promising opportunities I was looking at, had been frequently explored as a direction.
It was at this moment the most interesting opportunity came from a point of friction that a participants had during instances of their competitive running.
They found it was a bit of a fumble queuing up their music and trying to start their race timer at the same time.
Question: "How could Strava's users sync their music, and maintain an accurate recording of their activities with the least amount of frustration?"
Next Steps
Now that I had my direction my next steps would be:
- Summarized my research.
- Craft a persona that reflected my target audience.
- Research and review the Strava design system.
These next stages would help my focus on who I was designing the new feature for, and the restraints for the future design process.
Before I did fully move away from the research stage, it was important to the progression of this project to take a look at some competing applications.
I downloaded a few apps and played around with them to discover how people might interact with recording activities, and how (if available) their music player features worked. Additionally, I re-approached some of the participants and asked how they typically used their favourite exercise apps.
Defining the integration's Flow
Task and User flows
To help further explore how my future users would interact with the integration, I put together a task and user flow using the responses I found from my second chats with my participants.
Ideation
Sketches and Wireframes
Then in keeping my user flow in mind, the key screens that would be needed and affected were drawn up in the form of sketches. These also included some functionality notations to reference in the following stages.
The next step was to take these loose sketches and build out some wireframes for both mobile and desktop. This would help me further define the direction of the layouts and features for future processes moving forward. Once I had the initial wireframes compiled, a prototype was created and tested with participants. From the feedback that I gained in these tests, iterations were made to the wireframes seen below (and in the link to Invision).
UI Design
This was a extremely fun process for me putting together the final UI screens. It also came with a few challenges as well.
The main challenge that I faced, was actually finding a design system for Strava. As I started to comb the Strava website, design forums, Dribbble, etc; it became apparent that one was not available. Though it did look somewhat familiar to me as part of Google's Material Design - This link will open in a new browser tab.
So from here, I used a combination of a press kit from the Strava website, Google's Material Design guidelines and screenshots of the key screens from my phone that matched what was needed from my wireframes.
As I was creating the screens that would later become part of my final prototype, I took the opportunity to re-create the icons that were found in the screenshots. There were similar icons available online, but Strava had its own twist to them, and I felt it was important to stay true to the current design.
Integration Value Conclusion
For Strava, by having the integration possible will help to retain those customers that may be looking at competing applications that do not have access to an in app music player.
By also offering a popular streaming service within the application, it can entice others to join or potentially direct them to join the premium service “Summit” depending on creative marketing campaigns.
Overall, Strava users will spend more time within the application and have a more delightful and stream-lined experience being able to create their own soundtrack their activities.
For Spotify, by integrating with Strava it may persuade users who are on the fence to signing up for a Spotify account now knowing it works seamlessly with their Stava app to jump on board.
View full Prototype - This link will open in a new browser tab.