Connecting people with a new social feature
The challenge
Design a seamlessly integrated social feature in an existing application that enhances the user’s music experience and make better human connections.
The result
Spotify now has a feature that provides a live feed of their friends' listening activity, common interests of genres, and a personalization element to add a human touch when it comes to sharing music.
Client
Spotify
Background
Spotify is a leading application that's dominating the market of music streaming services. They want to improve engagement and retention in the app by expanding on their social capabilities. Spotify is looking to design a seamlessly integrated social feature that not only elevates the music experience but ultimately make better, more human connections among their users.
The scope
Integrating a social feature to an existing product
Role
UX Designer (Research, Visual Design, Interaction Design)
Project duration: 80 hours
This is a speculative project I’ve done for UX Academy at DesignLab.
Research
Competitive analysis
User interviews
Define
Persona
Empathy map
Problem statement
Ideate
Ideation
Storyboarding
User flow
Lo-fi wireframes
Hi-fi wireframes + Prototype
Prototype
Usability testing
Affinity map
Iteration
1. Research
Understand the landscape
Since the feature was unknown, the research phase was the most important in this project to better understand the situation. There’s a special connection between humans and music and I wanted to understand what creates a meaningful experience when it comes to sharing.
Research goal
Empathize with the user and get to know their emotional connection with music and their sharing habits.
Understand the main motivations, frustrations and pain points users have when it comes to sharing.
Discover what the user’s needs are.
Methodology
Competitive analysis & user interviews
Competitive analysis
I began my research around what features current music streaming services in the market offer and point out the strengths and weaknesses on each competitor. My discoveries were:
The sharing function is generally a 3rd party integration that allows users to share outside of the site.
Some services allowed users to purchase tickets for an artist’s tour and their merchandise directly from the platform.
Higher priced sites have exclusive content to draw in dedicated fans to subscribe to their service.
Playlist curation, offline play, and smart suggestions are present in all services, making it the standard offer to users.
Some services don’t offer free listening which may be as to why free subscription services like Spotify are more likely used.
User interviews
Understanding the users will help empathize with them. I reached out to three participants that had shared music through Spotify and conducted two rounds of interviews with them. The first round was getting to know the participant’s daily habits, how music is involved in their routine, and how they share their music. The second round was uncovering a deeper knowledge of the user’s emotions, motivations, and fears. My key findings were:
Motivations
Knowing their friend’s preference in music.
Feeling an emotion when listening to the song.
To create a deeper bond with someone.
Feeling validated when their friend enjoys it.
Needs
Reach friends quickly and message them directly.
To know if the person is open to recommendations.
To know their friend’s musical taste first.
Pains
Sending a link lacks personality.
Not being able to find the song in the library.
Too many steps to send a song on the app.
2. Define
Identify insights and user needs
Utilizing the research findings, I synthesized and illustrated the data into more humanizing terms so I could better empathize with them. Taking this step is crucial to knowing how the product will make a positive impact on them.
Methodology
Persona, empathy map & problem statement
Persona
I created the primary persona, Jacob Wood, to better identify with the target user in this case.
Empathy map
Taking the findings from my research, I placed them in sections what the persona thinks, hears, says, and does. This was used to gain insights and identify user needs.
Problem statement
In order to frame the problem I was facing, I used the “How might we” (HMW) technique to turn the obstacles into potential opportunities. I generated 10 HMW questions and picked three to take into the ideation phase.
How might we help Jacob find a commonality in music with his peers?
How might we help Jacob add personality to the links he shares?
How might we help Jacob build a better bond with people and create better memories with them?
3. Ideate
Brainstorming features to form the product
Building the connection between users and music in an already established brand’s design.
Methodology
Ideation, storyboarding, user flow, lo-fi wireframes, hi-fi wireframes
Ideation
With the three problem statements captured, I took it into a session of “Crazy 8’s” where the main goal is try to get as many ideas as possible to solve the problems I was facing. In the five rounds, I had found two features that I wanted to take into storyboarding.
Highlighted in green here are the two ideas I wanted to develop further.
Storyboarding
To see and understand how a user would use those features I selected in ideation, I conducted another “Crazy 8’s” session of four rounds to quickly draw together the story. The storyboard I selected would address some of the identified pains and needs of the user, such as knowing if their friend is open to recommendations, their musical tastes, and adding a personal touch to sharing.
Highlighted in green here, this storyboard generated the strongest flow in addressing to the user’s needs and motivations.
User flow
Using the storyboard I selected, I created a user flow to show how a user would interact with the app’s social feature when trying to share a song of the moment.
Lo-fi Wireframes
After establishing the user flow, I sketched out the low-fidelity wireframes of the new feature. I kept in mind of Spotify’s already established design and made sure to keep the framework as close to what is already exists in the app.
High fidelity wireframes & prototype
Taking my low-fidelity wireframes, I built out the high fidelity wireframes in Figma using screenshots of the application that I wanted to quickly replicate. I also made sure to follow Spotify’s brand guidelines to tie the design seamlessly. Once I finished laying out the screens, I turned it in a prototype to test the structure and layout among potential users and iterate if needed.
3. Prototype
Putting the product to the test
User testing will tell me how usable and valuable the product is to the end user. Gaining inputs and insights about how real users would actually use the product will help improve to address their pain points.
Methodology
Usability testing, affinity map, iteration
Usability testing
The usability test was conducted with 3 participants to go on the high fidelity prototype and share a song with their friend. Participants were asked to think aloud and describe what they to see how they interact with the website, and to identify potential pain points. The summary of my findings were:
All participants had completed the task with some minor errors. Some didn’t recognize there was a new feature in the navigation bar since their usual path is to search it first.
Several of them didn’t know their relation of the list of people in the feature.
Seeing who’s open to recommendations and to what genre wasn’t compelling enough to share.
Some participants expressed they weren’t interested in what songs their friend likes.
All agreed that the feature was integrated smoothly.
All of them didn’t realize their message would lay on top of the music’s cover art.
Participants felt the process was a little longer but enjoyed knowing there was a way to message their friend directly while sharing.
All participants mentioned they generally had brief exchange of thoughts when sharing music.
Affinity map
I gathered all my findings from the usability testing into an affinity map. This allowed me to find patterns and pain points which lead to several insights and design recommendations.
Iteration
Taking the insights I found from the affinity map, I iterated on the hi-fi wireframes and added in more key screens to improve the flow.
Reflection
Integrating a social feature to an established product proved to be quite challenging. The research phase was crucial to learn the emotional connection between people and music, as well as learning Spotify's own attempt to create a social feature. To share music meaningfully among a vast amount of users would require more research and experimentation to develop a concrete and viable solution that prominent businesses like Spotify would implement. Although my study oversaw on a sample size of Spotify's user base, I appreciated learning the efforts that can go into improving the user's experience.
Next steps
I’ll be taking my high-fidelity prototype into testing again to gather feedback and improve the product further. With each iteration and testing, I’ll be learning new insights, challenges, confirm assumptions, and validate my research.
