Spotify

COURSE
Designlab UX Academy

ROLE
User Research, Interaction Design, UI Design, Prototyping, Usability Testing

TIMELINE
Jan - Feb 2018

TOOLS
Sketch, Marvel, Pen + Paper

Understanding Music in Relationships

Because music plays such a prevalent role in our daily routines and interactions, I set out to explore the social aspect of music. I was interested in learning about the types of experiences people created with others through music. Moreover, I wanted to understand the impact of music in relationships and how that ties in with music listening, sharing, and discovery.

My research goals were to answer the following questions:

• How does music help people connect and create relationships with others?
• What motivates people to share music?
• How do people currently share music with their friends?

Competitive Analysis

I started my research with a high-level competitive analysis of social capabilities offered by Apple Music, Pandora, and Soundcloud. Comparing these three competitors revealed that social integration was limited on streaming platforms. Most offered similar features such as following friends, seeing what they’re listening to, and ability to share songs via social media.

User Interviews

With my research goals, I conducted five user interviews to learn about users’ music sharing and discovery habits and their experiences with music streaming platforms. These findings helped me better understand how they connect with others and build personal relationships through music. 

From my user interviews, I gathered these key insights about music sharing, music discovery, and connecting through music: 

• Finding common music interests helps people easily bond and feel closer with others.
• People share music with friends when it reminds them of their music taste and they think they'll like it as well.
• People often browse curated playlists to discover new music to listen and share.

A target persona (Erica) and empathy map highlight key needs, goals, and frustrations from my interviews. Erica values personalized music recommendations and loves to bond with her friends through common music interests.

Exploring Social Music Solutions

Moving into ideation, I began to brainstorm potential features that would meet Erica's key goals and needs. I framed my research insights into the following How Might We (HMW) questions:

The proposed solution is a mobile feature, called Music Match, that allows users to connect with friends who share the same music taste as them. Music Match would show users their music similarities with each friend and provide personalized music recommendations between them. The idea is to make it easier for Erica to know who enjoys similar music as herself, encouraging music sharing and bonding between her friends. From a technical standpoint, Music Match could also leverage Spotify's machine learning to identify similar listening patterns between friends and recommend them music they both would enjoy.

The application map below shows how Music Match would fit into Spotify's current information architecture. Because Music Match is meant for connecting with friends and discovering music together, I put it under Your Library and Browse since that's where users currently go to complete those respective tasks.

Defining the Music Journey

User Flow

After defining the information architecture with Music Match, the next step was to outline the user flow for the Music Match feature. This user flow map shows what Erica's journey might look like when navigating through Music Match.  

Wireframes

Using Spotify's current interface as reference, I sketched out low-fidelity wireframes for the Music Match feature. I thought about how to show Erica's music similarities with her friends in a way that is informative, engaging, and consistent with Spotify's design patterns. 

Testing and Iterating

Following Spotify's design guidelines, I designed hi-fidelity wireframes from my low-fidelity sketches. I conducted five in-person usability tests on my Marvel prototype to see how users would interact and feel about the Music Match feature. The main tasks for the usability tests were to find which friends have a similar music taste as yourself, search for a specific friend, and listen to personalized music recommendations for you and a friend. 

Testing objectives included:

• How easily can users find and navigate through the new Music Match feature?
• Are the Music Match functions clear and easy to understand? 
• How does the Music Match flow compare to users' experiences with Spotify?

Key Findings

• 80% of participants were unable to immediately find the Music Match feature.
• 60% of participants thought Music Match was just for music recommendations, not connecting with friends. ("I wouldn't know that it incorporates friends.")
• 40% of participants were confused about matches with an "Add" button. ("Am I already friends with them?")
• 40% of participants wanted more info about what music they matched with friends ("I just want to know what they're listening to that they matched with me.")

From my usability tests, users had most issues with navigating to the Music Match screen and understanding the difference in symbols for friend matches. These findings helped me identify where revisions needed to be made in the designs. 

Priority Revisions

• Change the Music Match name to Friend Match so it's clearer to users
• Create a section highlighting Friend Match on Home screen
• Separate friend matches by "Following" and "Not Following" on Friend Match screen
• Display top matched genres on You and Friend screen

The most common issue users encountered during usability testing was not knowing where to go for the Friend Match feature. I decided to add a "Made For You And Friends" section on the Home screen as a preview of the feature. Inspired by the current "Made For You" section, this section would show personalized playlists made for the user and their top matches in Friend Match. This addition will hopefully generate awareness for the feature and encourage users to check it out under Browse and/or Your Library. 

Matches with an "Add" button was another point of confusion on the Friend Match screen. Users weren't sure if they were already friends with those matches. To make the icon distinction clearer, I created separate tabs for Facebook friends you're following and those you're not following. Users can easily switch between the tabs to view and compare their friend matches. This addition was based on by design patterns on the Find Friends screen in the Spotify app, seen as the Friends and Featured tabs.

Some users also wanted more clarification behind the percentage match with each friend. "I listen to a bunch of random stuff so maybe I'm matching with this person for Broadway Tunes and another for Pop" one user said. As a result, I included info about users' top matched genres on the You and Friend screen to help them make more sense of their friend matches.

Final Designs

Learnings Recap

The tricky part with this project was figuring out where the new Friend Match feature would fit into Spotify's existing information architecture. Most of Spotify's content is found in multiple locations within the app, so I chose to include Friend Match under the Browse and Your Library tabs while trying not to bury them too far within these tabs. However, this still didn't prevent users from initially not knowing where to go during usability testing. When it comes to introducing new features, generating user awareness and interest first through central locations of the app, such as the Home screen, is crucial.

Next Steps

• Add a "See Friend Match" option on friends' Spotify profile. Clicking on "See Friend Match" would lead the user to the specific You and Friend screen, making friend matches accessible through profile pages. 
• Design and integrate the Friend Match feature into the Spotify desktop app.
• Conduct additional testing on the revised designs, collect feedback, and iterate as necessary.