Spotify: Let’s Get Social
Case Study
PROJECT OVERVIEW
Spotify is one of the world’s leading music streaming apps, making music available to their users anywhere and anytime.
The Challenge: Spotify knows that music plays an important role in connecting people. They seek to further that connection by expanding their social capabilities while also improving users’ engagement and retention in the app.
The Solution: “Send to Friend,” a feature that allows users to send songs to their approved friends within the app.
Click here to access the high fidelity prototype.
Role: Sole designer
Mentor: Alan Hurt Jr.
Time: 4 weeks
Tools: Figma, Zoom, InVision, Adobe Illustrator
Mentor: Alan Hurt Jr.
Time: 4 weeks
Tools: Figma, Zoom, InVision, Adobe Illustrator
GETTING TO KNOW YOU
With Spotify being a well-known and established music-streaming service, it was important that I learn as much as I could about the app itself, the industry, and the users before doing anything else. Moreover, Spotify had a messaging feature in 2017 but removed it due to low engagement. In order to tackle this challenge, I started with research by making a plan.
LET’S GET DOWN TO RESEARCH
Research Goals:
Assumptions:
Research Questions:
Methodologies:
1. Secondary research:
Research Goals:
- Identify the user
- Discover user’s relationship to music
- Discover user’s social needs in relation to music
- Find out competitors’ strengths and weaknesses in social aspect of their mobile apps
Assumptions:
- Older millennials don’t have strong social needs for music streaming
- Younger millennials engage more than older millennials with social features on their apps
- People are likely to engage with social features on Spotify in ways that are similar to existing apps like Instagram
Research Questions:
- Who are target users for a social feature within Spotify?
- Is there a need for a social feature?
- If there is no discoverable need for a social feature, how can we get users to frequently engage with the added feature?
Methodologies:
1. Secondary research:
- Market research - Looking at existing research to understand the trends in the music streaming industry
- Competitive analysis - Gathering data about other music streaming apps, especially their strengths and weaknesses in social capabilities
- Heuristic evaluation - Assessing the usability of Spotify’s UI according to 10 guidelines by Jakob Nielsen
- Customer interviews - Conducting remote interviews with frequent Spotify Premium users to understand their relationship to music and others
Competitive Analysis
From market research on music-streaming app users, male and female millennials made up the highest number of people who paid for premium subscriptions. This led to the creation of two provisional personas (as pictured below), which helped to determine what kind of candidates to interview.
Provisional Personas
TALK TO ME
I wanted to interview many people to gather as much data as possible. Confession: I was fairly nervous about interviewing as I was unsure if I would be able to find enough valuable patterns, insights and needs to give some direction in this design process.
- 8 females, 3 males
- Ages 24-36
- Average time duration: ~24 minutes
I wanted to interview many people to gather as much data as possible. Confession: I was fairly nervous about interviewing as I was unsure if I would be able to find enough valuable patterns, insights and needs to give some direction in this design process.
Empathy Map
Original empathy map: each color post-it represents an interview participant. Categorized empathy map: the groupings were formed by similar patterns found in my observations from the conversations. From those clusters, I was able to form insights about the users, and then I extrapolated the needs from those insights.
Insights:
1. Music is a supplement to life’s daily activities for users
2. Users don’t like silence
3. Users use music to enhance their mood
Needs:
1. Users need music to get them into the headspace for each daily activity
2. Users need to have music on all throughout the day
3. Users need music to express what they’re feeling
QUIT PLAYING GAMES WITH MY HEART
Like on a 15th date, you’d hope by that point you and the other person can define what this relationship really is to help you move forward. From the empathy map and user interviews, we were able to define our user persona.
User Persona
Other parts of the user persona (age, occupation, bio) were a composite of the majority of the users I interviewed.
“I always have music on in the background whether I’m working, cooking or driving.”
POV/HMW Chart
WHERE DO WE GO FROM HERE?
As we’ve already established, the empathy map helped us to determine the insights and needs. The POV, or point of view, helps us to frame the problem in an actionable statement around our user, Ray. The HMW, or how might we, then takes the POV statement and creates a question that can spark the brainstorming process.
1. Individual Brainstorming
As we’ve already established, the empathy map helped us to determine the insights and needs. The POV, or point of view, helps us to frame the problem in an actionable statement around our user, Ray. The HMW, or how might we, then takes the POV statement and creates a question that can spark the brainstorming process.
1. Individual Brainstorming
- Ask HMW questions
- Brainstorm solutions for 3 minutes each
- Move on to the next HMW question
- Repeat
- Ask HMW questions
- Brainstorm solutions for 3 minutes each
- Everyone explain their best or favorite idea
- Vote for best solution
- Move on to the next HMW question
- Repeat
Group Brainstorming
Business & User Goals
After having come up with all these possible solutions, both individually and as a group, how would we determine which solutions to move forward with? The business and user goals venn diagram helped to define the parameters within which our solution would fall. The overlap, or shared goals, is where I focused to select the best solution.
After having come up with all these possible solutions, both individually and as a group, how would we determine which solutions to move forward with? The business and user goals venn diagram helped to define the parameters within which our solution would fall. The overlap, or shared goals, is where I focused to select the best solution.
Product Roadmap
The features are prioritized in this roadmap by importance. The second column lists out the business and user goals (as shown above). Initially, I chose the Spotify “share” box and feed solution, which would basically act like Twitter. The “share” box would be a text box in which users could interact with their Spotify friends as well as tag a specific song or playlist.
The features are prioritized in this roadmap by importance. The second column lists out the business and user goals (as shown above). Initially, I chose the Spotify “share” box and feed solution, which would basically act like Twitter. The “share” box would be a text box in which users could interact with their Spotify friends as well as tag a specific song or playlist.
Application Map (Initial)
The initial idea was to add the solution (called “Your Social”) as another tab in the navigation. However, Spotify recently reduced their navigation bar to just Home, Search and Your Library, so it would seem contrary and a wasted effort to add something back.
The initial idea was to add the solution (called “Your Social”) as another tab in the navigation. However, Spotify recently reduced their navigation bar to just Home, Search and Your Library, so it would seem contrary and a wasted effort to add something back.
WHEN I FIND MYSELF IN TIMES OF TROUBLE, MY MENTOR COMES TO ME/SPEAKING WORDS OF WISDOM, LET IT BE
Upon discussing the proposed solution with my mentor, I was asked a series of questions about the “share” box and why it should not exist. Our discussion made me realize there could be harmful content written in the “share” box that would lead to greater maintenance, budgeting, and manpower for this feature. Why not enable flagging? If we have a flagging feature, how much more money and people would we need to monitor behavior and language? Was this in line with our shared business and user goals? I needed to reassess to ensure that this was the best solution moving forward.
Upon discussing the proposed solution with my mentor, I was asked a series of questions about the “share” box and why it should not exist. Our discussion made me realize there could be harmful content written in the “share” box that would lead to greater maintenance, budgeting, and manpower for this feature. Why not enable flagging? If we have a flagging feature, how much more money and people would we need to monitor behavior and language? Was this in line with our shared business and user goals? I needed to reassess to ensure that this was the best solution moving forward.
Application Map (Revised)
I SAW THE SIGN/AND IT OPENED UP MY EYES
After reevaluating my initial solution, I went back and looked over all the previous data to make sure I was taking what I had learned from our users as well as working within Spotify’s framework to find the best solution possible. When I reexamined the product roadmap, “private messaging” caught my eye. How would this differ from the “share box”? The messaging would not be a feature in it of itself, but centered around the sharing of songs. A user would only be able to send a message by the sending of a song. Of course, there is always the possibility that someone can write something harmful, but this feature would help to minimize the likelihood by the 2-step process (accepting friend, sending song).
After reevaluating my initial solution, I went back and looked over all the previous data to make sure I was taking what I had learned from our users as well as working within Spotify’s framework to find the best solution possible. When I reexamined the product roadmap, “private messaging” caught my eye. How would this differ from the “share box”? The messaging would not be a feature in it of itself, but centered around the sharing of songs. A user would only be able to send a message by the sending of a song. Of course, there is always the possibility that someone can write something harmful, but this feature would help to minimize the likelihood by the 2-step process (accepting friend, sending song).
GO WITH THE FLOW
Finally, I felt like a path opened up - one that made sense for both Spotify and the user. I created a user and task flow to put myself in the user’s shoes and think about how they might navigate through the app and the added feature. This also helped me to create a list of screens I’d need to design in order to test this solution with a high fidelity prototype.
Task Flow
Scenario 1: Ray is listening to J.Lo’s “I’m Real,” and it reminds her of her two friends. She sends them the song and a message to share Task 1 - Ray finds and selects her friends, Grace Lee and Rin Heo.
Task 2 - Ray sends the song along with a message: “Remember this song y’all.”
Scenario 1: Ray is listening to J.Lo’s “I’m Real,” and it reminds her of her two friends. She sends them the song and a message to share Task 1 - Ray finds and selects her friends, Grace Lee and Rin Heo.
Task 2 - Ray sends the song along with a message: “Remember this song y’all.”
Scenario 2: Ray wants to play a recent song that her friend, @roo.park, sent her, but she can’t remember the title or artist. She looks back at her messages to find the song and play it.
Task 1 - Ray goes to her messages within the Spotify app.
Task 2 - Ray taps on the most recent song that @roo.park sent her in their conversation.
Task 2 - Ray taps on the most recent song that @roo.park sent her in their conversation.
I HOPE THAT YOU’RE THE ONE/IF NOT YOU ARE THE PROTOTYPE
After I determined what screens and details I needed to design, I created a high fidelity prototype (images below). Before testing this solution, I came up with a usability testing plan. This step was very crucial as there was no major and discernible need for a social feature from our research. However, through this usability testing, not only did I want to see the usability of the feature itself, but also if this would be something participants would use. Just because there wasn’t a discoverable need doesn’t mean that users can’t learn or create new habits.
Test goals:
- To see if the information architecture of the newly added feature makes sense to users
- To identify users’ pain points with the newly added feature
- To determine if this is a feature that people would use
Assumptions:
- Users will be able to complete the tasks because they’re already familiar with the Spotify app as premium users
- There may be confusion in finding “messages” as this isn’t immediately apparently on the home screen of the app
- Users will find this feature helpful in being able to send songs to friends within the app
Methodology:
Remotely moderated, thinking aloud testing - participants say out loud everything they are thinking as they navigate through the prototype while attempting to complete the tasks.
Tasks, errands: Scenario #1 - You’re listening to J.Lo’s “I’m Real,” and it reminds you of your two friends, Grace Lee and Rin Heo, from college. You want to send the song to them and write a fun message.
Task 1: Send the song to your friends Grace Lee and Rin Heo.
Task 2: Before you send the song to them, write the following message, “Remember this song yall.”
Scenario #2 - You’re trying to remember the song that your friend @roo.park sent you on Spotify. You go to your message with him to find the most recent song he sent, and tap on it to play it. Task 1: Find your message with @roo.park.
Task 2: Play the most recent song he sent.
High Fidelity Wireframes
The first six screens are for scenario 1 and the last 3 screens are for scenario 2. To access the prototype, click here.
The first six screens are for scenario 1 and the last 3 screens are for scenario 2. To access the prototype, click here.
USABILITY TESTING PARTICIPANTS:
Similar to the previous research, I took observation notes during each testing session. I made sense of the all the data I collected from usability testing through the use of an affinity map.
- 7 female millennials
- Ages 27-35
- Average testing time: ~13 minutes
Similar to the previous research, I took observation notes during each testing session. I made sense of the all the data I collected from usability testing through the use of an affinity map.
Affinity Map
Patterns:
- Selection issues - 7/7 users tried to tap on friends’ profile pictures/names instead of selecting the check mark
- Confusion around verbiage - 4/7 users were confused by the labeling in the “Sends” category of “Your Library”
Insights:
1. Users are accustomed to tapping on friends’ profile pictures/names as a means of selection
2. The more tappable options there are for users, the clearer the labeling needs to be
Recommendations:
Priority 1 - Make profile pictures and names tappable (just like song selection - album artwork is tappable)
Priority 2 - Rename the labels within the “Sends” category
SPOTIFY BRANDING
Spotify, as an already existing brand, has its own visual identity and brand guidelines. The following style tile and UI Kit are just a condensed representation of the branding and visual language that Spotify established. Style tiles and UI kits make it much easier for teams to find elements that already exist and to ensure that new features or designs are in line with the Spotify voice.
Spotify, as an already existing brand, has its own visual identity and brand guidelines. The following style tile and UI Kit are just a condensed representation of the branding and visual language that Spotify established. Style tiles and UI kits make it much easier for teams to find elements that already exist and to ensure that new features or designs are in line with the Spotify voice.
Style Tile
UI Kit
MAKE THAT CHANGE
As per the affinity map, I used the recommendations to update the high fidelity prototype. The profile pictures (and the row they’re on) are now completely tappable, and the labeling for the new feature was updated from “Sends” to “Friends.”
ALTHOUGH WE’VE COME, TO THE END OF THE ROAD
CONCLUSION
Overall, this project was a great learning experience and quite a challenge because I had to: 1) work within Spotify’s constraints, 2) rethink a solution that served both the business and users, and 3) try to integrate the new feature seamlessly within the app. When there are more limitations, creative thinking and problem solving really come to the forefront.
Overall, this project was a great learning experience and quite a challenge because I had to: 1) work within Spotify’s constraints, 2) rethink a solution that served both the business and users, and 3) try to integrate the new feature seamlessly within the app. When there are more limitations, creative thinking and problem solving really come to the forefront.
NEXT STEPS
- More usability testing with new labels for social feature
- After synthesizing test findings, hand off prototype to developers
- Start with priority level 1 items from feature roadmap
