Spotify Rooms

Spotify is a popular music streaming application that has revolutionized the streaming industry. In this case study, I was tasked with creating a (fictional) new feature that would make Spotify more social.

ROLE

UX/UI Designer, Branding

Project duration

2 weeks

View prototype

Background

Spotify is a music streaming platform that allows its listeners to stream from millions of songs for free. The user can pay a premium subscription to listen ad-free. It currently has limited social features, like following friends and seeing what music they're playing. In this project, I was tasked with designing a new feature that would make Spotify more social.

project scope

In this case study, my task was to create a new, social feature for Spotify. The platform I will be focusing on will be the desktop application.

CHALLENGES

The main challenge of this exercise will be to design within the Spotify branding. I will need to decide when to use existing Spotify user interfaces and when to create new ones. My design decisions should feel organic to Spotify's current user experience.

Understanding the industry

Because my goal was to create a social feature that made sense for Spotify, I conducted research in order to understand the following:

Research goals

1

Determine what is popular or trending within the music and streaming industry

2

Understand how music listeners are interested in socializing by listening or sharing music and why

Industry analysis

I began by evaluating popular streaming services to understand what types of social features they provide. I determined that the trending social features currently, especially with the COVID-19 pandemic, was social listening and live streaming. Users are flocking to the internet to enjoy entertainment with their friends using technology.

Industry analysis of popular streaming services

Social listening: Spotify Rooms

After conducting my competitive analysis, I decided that the new social feature for Spotify would be "Spotify Rooms". This new feature would allow users to listen to music with their friends and have a shared song queue.

Site map

In order to develop a new feature for Spotify, I needed to understand the layout of the existing application. To do that, I created a site map of the desktop application. Next, I added the necessary links and pages for the Spotify Rooms feature and starred it on the site map. This let me see clearly what new pages needed to be created and which existing pages needed to be modified.

Site map of Spotify. Click to enlarge.

User flows

Once I understood the pages to be designed, I was able to create user flows for opening a Room, joining a Room, and adding a song to a Room's queue. These user flows determined what user tasks would be tested during the usability testing. If the test participant follows a similar user flow, then ultimately my design will prove successful.

Example of the user flow for opening a Room

Wireflow

From my user flows, I created low-fidelity wireframes mapping out each step of the process. A snapshot of this process can be seen below.


Many of my design decisions were based on Spotify's existing UI. The top image below show the Room creation popup menu that is similar to Spotify's Playlist creation settings. The bottom image shows the ability to join a friend's room in the Friend Activity sidebar.

I chose to use Spotify's user interface as much as possible so that it was easy for any Spotify user to understand.

Matching the brand

In order to match Spotify's existing branding, I did copywork on the Spotify desktop application to create a Spotify UI kit. I made sure to mimic the existing button, menu, and card styles.

Section of the Spotify UI kit. Click to enlarge.

Usability Testing

After applying my UI kit to my wireframes, I had finalized a high-fidelity prototype to use for testing. Because this is a new Spotify feature, I chose to test the prototype on 3 current users of Spotify. This would help me determine if I was successful in designing towards Spotify's branding. Below is a summary of my test objectives.

Test Objectives

1

Test if users understand the purpose of the feature and how to use it

2

Test if the users are able to use known Spotify patterns to use the feature

3

Test that the experience is effortless

Testing Results & Next Steps

Through user testing, I was able to determine that the users were successful in identifying what the new feature was and how to use it. I created an affinity map (screenshot below) in order to understand what areas of the design left more than one user confused. Ultimately I learned that users prefer to invite their friends with one button rather than going through multiple steps.

HIGH PRIORITY REVISIONS

1

Add a "Leave Room" confirmation popup

2

Include a specific "Invite Participants" button rather than have it nestled in a menu

3

Allow you to invite participants while creating a new Room

Section of the usability affinity map created from user testing

Conclusions

My goal of this project was to design a new, social feature for Spotify to help it stay relevant in the streaming industry. Through my research I was able to determine that social listening was a high priority for users today and Spotify should offer a way for its listeners to enjoy music live with their friends. I used existing Spotify and industry UI patterns to create a new feature that felt like an organic Spotify user experience.

I later learned as my project was concluding that Spotify had recently released a new mobile feature for testing called "Spotify Sessions" with a similar concept. This validated my own decision in creating this feature and I'm curious to see how their feature will compare to mine as it is developed.