Creating meaningful connections through an innovative social feature
The challenge
Develop a seamlessly integrated social feature for an existing application that enhances users' music experience and fosters stronger human connections.
The result
Spotify now features a live feed of friends' listening activity, showcasing shared genre interests and adding a personalized element for music sharing.
Client
Spotify
Background
Spotify is a leading application that dominates the music streaming market. To enhance user engagement and retention, Spotify aims to expand its social capabilities. The company is looking to design a seamlessly integrated social feature that not only elevates the music experience but also fosters better, more meaningful connections among its 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 unfamiliar, the research phase was the most crucial part of this project for gaining a better understanding of the situation. There is a special connection between humans and music, and I aimed to explore what contributes to a meaningful experience in sharing music.
Research goal
Empathize with the user and understand their emotional connection to music and their sharing habits.
Understand the main motivations, frustrations, and pain points users experience when sharing.
Discover the user’s needs.
Methodology
Competitive analysis & user interviews
Competitive analysis
I started my research on the features offered by current music streaming services, highlighting the strengths and weaknesses of each competitor. My findings were:
The sharing function is typically a third-party integration that enables users to share content outside of the platform.
Some services allow users to purchase tickets for an artist’s tour and buy merchandise directly through the platform.
Higher-priced services often provide exclusive content to attract dedicated fans to subscribe.
Playlist curation, offline listening, and personalized suggestions are standard features across all services, ensuring a consistent offering for users.
Additionally, some services do not provide free listening options, which may explain why free subscription services like Spotify are more widely used.
User interviews
Understanding users is essential for developing empathy towards them. To gain insights, I reached out to three participants who had shared music on Spotify and conducted two rounds of interviews. In the first round, I focused on learning about each participant's daily habits, how music fits into their routines, and how they share their music. The second round aimed to explore their emotions, motivations, and fears in greater depth. 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
Using the research findings, I summarized and presented the data in more relatable terms to better empathize with them. This step is essential for understanding how the product will positively impact their lives.
Methodology
Persona, empathy map & problem statement
Persona
I created the primary persona, Jacob Wood, to better identify with the target user.
Empathy map
Based on my research findings, I organized them into sections reflecting what the persona thinks, hears, says, and does. This approach helped gain insights and identify user needs.
Problem statement
To better understand the problem I was facing, I used the “How might we” (HMW) technique to turn obstacles into opportunities. I generated 10 HMW questions and selected 3 to advance to 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 stronger bonds with people and create better memories together?
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
After capturing the three problem statements, I conducted a “Crazy 8’s” session. The main goal of this session was to generate as many ideas as possible to address the challenges I was facing. Throughout the five rounds, I identified two features I wanted to further develop in storyboarding.
Highlighted in green here are the two ideas I wanted to develop further.
Storyboarding
To better understand how users would engage with the features I selected during the ideation phase, I conducted another "Crazy 8's" session, consisting of four rounds, to quickly sketch the story. The storyboard I chose aims to address several identified user pains and needs, such as determining whether a friend is open to recommendations, understanding their musical preferences, and adding a personal touch to the sharing experience.
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 illustrating how a user would interact with the app’s social feature when sharing a song of the moment.
Lo-fi Wireframes
After establishing the user flow, I created low-fidelity wireframes for the new feature. I kept Spotify’s existing design principles in mind and ensured that the framework closely aligned with the app's current layout.
High fidelity wireframes & prototype
Using my low-fidelity wireframes as a foundation, I created high-fidelity wireframes in Figma by incorporating screenshots of the application I aimed to replicate. I ensured the design adhered to Spotify’s brand guidelines to maintain a cohesive look. After completing the screen layouts, I converted them into a prototype to test the structure and layout with potential users, enabling any necessary iterations based on their feedback.
3. Prototype
Putting the product to the test
User testing will reveal how usable and valuable the product is for end users. Gaining insights into how real users would actually use the product will help improve it by addressing their pain points.
Methodology
Usability testing, affinity map, iteration
Usability testing
The usability test was conducted with three participants who were tasked with using the high-fidelity prototype to share a song with a friend. The participants were asked to think aloud as they navigated the website, describing their interactions to help identify potential pain points. Here is a summary of my findings:
All participants completed the task with only minor errors. Some failed to notice the new feature in the navigation bar because they typically search for it first.
Several participants did not understand the relationship between the people listed in the feature.
Additionally, seeing who is open to recommendations and which genres they prefer was not compelling enough for them to share.
Some participants expressed a lack of interest in the songs their friends liked. However, everyone agreed that the feature was integrated smoothly.
All participants were unaware that their messages would overlay the album cover art. They felt the process took a bit longer, but appreciated having a way to message their friends directly while sharing music. In general, participants noted that their exchanges when sharing music were brief.
Affinity map
I compiled my findings from the usability testing into an affinity map. This helped me identify patterns and pain points, leading to valuable insights and design recommendations.
Iteration
Based on the insights from the affinity map, I refined the hi-fi wireframes by adding additional key screens to enhance the flow.
Reflection
Integrating a social feature into an established product proved to be quite challenging. The research phase was essential for understanding the emotional connection between people and music and for examining Spotify's previous attempts to add a social feature. Sharing music meaningfully among a large number of users would require further research and experimentation to develop a concrete and viable solution that major companies like Spotify would implement. Although my study focused on a sample of Spotify's user base, I gained valuable insights into the efforts that can enhance the user experience.
Next steps
I will take my high-fidelity prototype back for testing to gather feedback and further improve the product. With each iteration and test, I will learn new insights, face challenges, confirm assumptions, and validate my research.
