Case Study: Spotify Live

Molly White
Jul 24, 2017 · 9 min read

The Spotify Live Case Study is a fictional client project. We were tasked with exploring an opportunity area in the marketplace, and designing a new feature to be added to the existing Spotify product.

Discovery & Research

For our project 2, my partner and I were tasked with adding a DJ function to the existing Spotify app that would allow users to share and listen to music with other users in real time, and give them the opportunity to communicate while doing so.

Competitive Analysis

After discussing our initial thoughts on features we might implement to accomplish this, we conducted competitive analysis between Spotify, Tidal, Apple Music, and Soundcloud.

Competitive Analysis

We quickly discovered that our findings would not offer much insight as to how we should proceed with the additional features because like Spotify, these services are not currently offering any kind of DJ or live listening options. In order to formulate a solution to Spotify’s version of a DJ feature, we turned to smaller services that were offering similar solutions.

Comparative Analysis

dJay

The first go-to app that offers a DJ function is dJay. dJay allows users to pull music from their Spotify library and mix tracks using a virtual DJ deck. They can also record and download music to be shared with friends. We were excited about the idea of including a fun, actionable feature for users to enjoy.

Dubtrack.fm

For the social functionality of this new feature, Dubtrack.fm (similar to former services, Plug.dj and Turntable.fm) turned out to be very useful. While the user base is small and the interface visually overwhelming, the features it offers match up to what Spotify is looking to accomplish. Dubtrack.fm allows users to join a queue within a particular listening room, play a song found from Soundcloud or Youtube, vote on current songs, and chat with other users.

Soundcloud

The third music streaming service we looked at is Soundcloud since it offers users the ability to upload original content (including original DJ mixes), as well as the ability to make comments pointed at a particular place in a song.

While these services offer some portion of what Spotify is hoping to add with it’s new feature, they also have significant downfalls and it is those gaps that we’re hoping to fill. The features we decided we would explore were the ability for users to play and listen to music live with other users, the ability to communicate with each other while doing so, and a song mixing element that would let users create their own DJ mixes.

User Research

To identify the right users we first did some preliminary research on Spotify’s user statistics. We found that the majority of users were within the ages of 13–44. From there, we conducted a screener survey to find appropriate candidates for our further research. Qualifying traits we were seeking are as follows:

  • The user actively and consistently shares music listening experiences with other people in their network
  • The user subscribes to one or more music streaming services on a consistent basis
  • The user identifies with some level of ‘DJ’ing skill

Of the 12 survey participants, we identified 7 candidates that fit our target user. Research participants ranged from ages 25–40, of which 3 were female and 4 were male. In conducting interviews, we wanted to examine the following interests and assumptions:

  • How users go about choosing music in social scenarios. Assumption: Users listen collaboratively when hanging out with friends & family
  • Users’ frustrations with the overall experience of using Spotify and/or alternative music services. Assumption: Users want easier sharing capabilities and more playback controls
  • Users’ interest in ‘going live’. Assumption: Users would already be participating in some form of ‘going live’ on social media.

From our research we found that our assumptions about the collaborative listening process were true and that users did desire more social connectivity with their music apps. However, other assumptions were not validated as strongly. While users did have complaints about Spotify’s interface, it was not the primary concern. Advertisements and inability to download/stream without wifi were among the top issues. Lastly, our research showed that the majority of users had little or no interest in ‘going live’ on social media. This finding led us to explore further the possibility of users not having an interest in playing or broadcasting music, but only listening to live channels.

Affinity Mapping

We organized the findings from user interviews into an affinity map and began the process of synthesizing our data. From here we defined our final problem statement:

“Users desire a higher degree of connectivity and customization when listening to and sharing music so they can have a more interactive, social experience.”

User Personas

In our research, we found that most users (5 out of 7) show more interest in collaborating with friends via building playlists and listening together than they do mixing their own music. Following this data, we built our primary user, Claire:

Our secondary user addresses the interests of our other interviewees. 3 of our 7 users noted experience in actually mixing music on their own but had complaints about the sharing capabilities of the apps they use. Following this key data, we built our secondary persona, Nelson:

Sketching & Ideation

Prior to sketching, we knew we would need to build this section of the app around a few key screens: a queue list, a messaging function, a now playing screen, and a home page. We started by rough sketching on the white board to map out the user’s journey throughout the features to make sure we weren’t missing any critical elements.

From here, we finalized all the necessary screens and proceeded to low-fidelity sketches on paper.

Low-fidelity sketches

Once we completed sketches for the necessary features, we began mapping how each of our users might navigate them.

A crucial step in our process was creating the user flows. This was key in understanding how to accomplish each of the tasks we were implementing in our design. As we went through each step of the process, we discovered that there would be a need for some sort of pop-up notifications — one for when the user joins the song queue, and one for when they are creating their own live channel.

Primary & Secondary User Flows

Narrowing the Scope

Through use of the MoSCoW method, we were able to identify the MPV, which would be the ability for users to play and listen to songs live along with other users, and to communicate within the app while doing so.

One of the ideas we had initially was for a feature that would allow users to actually mix tracks in their own playlists. The overall look would be similar to that of the dJay app, but it would be very simplified so that the inexperienced user would be able to participate and enjoy it.

As we worked through user flows and wireframing, it became evident that this functionality would not be entirely feasible at this time. Eventually we agreed that the mixing feature of the app was not the most important feature to offer and chose to leave it out.

Once we finalized the features we would be offering and refined our low-fi sketches accordingly, we proceeded to translating them into wireframes.

Wireframing

We wanted to make sure this new group of features would integrate seamlessly into the Spotify interface, so we used many of the current design mechanisms that are present in the app. After completing our first iteration wireframes we proceeded to creating the first prototype using Invision.

2nd Iteration Wireframes

Prototype & Usability Testing

1st Prototype Usability Testing

Once we put together the first iteration prototype, we created the script for usability testing. While our primary and secondary users would likely use the features differently, we decided to combine these paths into one multi-step task for testing.

Usability Task

“Imagine you are at home wanting to hang out with a few friends who don’t live nearby. You decide to start a new live channel on Spotify so you can listen to music and talk together.”

Once the user was able to accomplish starting a new channel, we gave them an additional task:

“You’ve decided now that you would rather join one of the other live channels you’re subscribed to and play a song in the queue. Show me how you would go about doing that.”

User Feedback

Of the 4 users tested, 3 seemed unsure of the use of “channels” as the name of the feature group (1). Because Spotify already uses ‘radio’ and ‘stations’, channels was not effective in differentiating the new features from ones that already existed. Additionally, when asked to add a new song to the queue, users had a hard time with the “join song queue” button (2).

Iteration 1 Testing Feedback

To rectify these issues in the 2nd iteration, we gave a new name to the feature group (3), now called “Live”. Users could more clearly understand they would be joining a currently playing station with other listeners. We also increased the size of the “join song queue” button so that it was easily visible and changed the signifier to read only “add song” (4). Lastly, we revised some of the visual elements to more closely mimic the existing Spotify interface (5).

Iteration 2 Testing Feedback

In the 2nd round of testing, 2/2 users successfully navigated the prototype with the exception of 2 new issues. First, the add channel icon appeared to be too small and not recognizable to one of the users (1 & 2). Second, the “now playing” bar at the bottom of the screen showed no playback controls (3). Since the channel would be playing live, we initially thought playback controls would be unnecessary.

For our third iteration, the visual mockup, we rearranged the interface so that one of the main channel thumbnails would serve as a more obvious signifier that the user could add a new channel. Additionally, we incorporated a pause icon where the user could essentially mute the station if need be.

Taking into account all of our user testing feedback, we proceeded to creating visual mockups in Sketch. We felt it was important to integrate the new features into the current Spotify interface since it is so widely used and recognized as is. Using the current application as a guide, we created the new set of features — a “Live” home screen, the channel’s “now playing” screen, the messaging feature, an updated profile screen, as well as the necessary pop up notifications.

Visual Mockup

Visual Mockup & Prototype: https://invis.io/M5BAYGJS3#/229028267_Profile_Page

Spec Documents: https://drive.google.com/open?id=0BxApvd5xiyunMld2cjZfOFhrdFk

Next Steps

Short term next steps for this project would be to further develop the “Live” feature by creating Spotify-owned stations that would broadcast world wide, and incorporate a feature where guest DJs could broadcast live shows. Long term goals would be to add the DJ mixing function into the app so users could have the experience of mixing and sharing their own music.

    Molly White

    Written by

    UX designer living in NYC.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade