› problem ‹

problem statement

Spotify users like to listen to music together, but find it difficult for multiple people to seamlessly contribute to what’s playing.

How might we allow Spotify listeners to individually contribute to what's playing in real-time?
 

solution

With our innovative "Live Queue" concept, Spotify could connect with each other through music organically and effortlessly.

Disclaimer: This is a potential feature integration for the existing mobile app, and is not affiliated in any way with Spotify.

 
Spotify_Perspective Screens Mock-Up.png

 

› process ‹

My Roles

Scrum Master

UX/UI Designer

Researcher/Notetaker/Tester

[team of four]

duration

2 weeks

Tools

Sketch

InVision

Omnigraffle

Trello

Agile Design Sprint

My team employed the Agile Design Sprint process to maximize project management effectiveness.

We used a method called timeboxing, giving ourselves a specific amount of time to complete each exercise.
This helped us tremendously to stay on task and keep things moving forward.

As Scrum Master, I managed the team's progress by conducting Stand Ups
every morning and updating Trello on a daily, sometimes hourly, basis.

 
 
 

 

› research ‹

Methods and Insights

To begin our process, we conducted extensive research to gain context on our users, brand, and competition.
 

User Research

Screener survey (75 participants)

7 User interviews

4 Usability tests on existing Spotify iOS app
 

•••

Why?

...to gather quantitative data about our users

...to know our users on a personal level

...to understand how satisfied users are with the current product and what challenges they face

Brand Research

Evaluation of the Spotify brand
 

•••

Why?

...to become more familiar with our brand overall

Competitive Research

Competitive brand analysis

Comparative analysis of their social features

Top Competitors: Apple Music, SoundCloud, Pandora, YouTube
 

•••

Why?

...to gain insight into potential opportunities based on competitors' strengths and weaknesses

 

 
 
Conducting a usability test. My team and I learned how a Spotify user interacts with the app.

Conducting a usability test. My team and I learned how a Spotify user interacts with the app.

An excerpt from our screener survey. Listening to music with others is important to our users.

An excerpt from our screener survey. Listening to music with others is important to our users.

 
 

overall Key Insights

  • iOS is the most used platform for Spotify users. (This is why we focused on iOS rather than Android.)
  • ~59% of screener survey participants often listen to music with others.
  • Users want a “socially interactive” aspect to Spotify.
  • Spotify operates on a “Freemium” business model. This means that they have two types of users from a business perspective: 1. non-paying users who have limited access within the app, and 2. paying subscribers who can use all features/options.
  • Pandora streaming radio services creates the most accurate & relevant radio stations due to its top-notch song discovery algorithm.
 

Synthesizing the Data
to Identify the User

 

affinity mapping

 

In order to identify commonalities among our users, we wrote key learnings from user research on sticky notes and organized them into categories to create what’s called an affinity map

This helps us get a cohesive look at the trends our users show and who exactly we need to focus on in our design process.

 
 
 

USER PERSONA

Affinity mapping helped us to personify our users, which kept us empathetic in our design thinking.

We focused on our primary user, Summer Lee, but kept our secondary and tertiary users in mind throughout the process.

 
 
PRIMARY PERSONA (Summer Lee).png
 
 

USER JOURNEY

We used this persona profile to create Summer's user journey to get a holistic view of her emotions—both highlights and pain points—in a social setting where she would use the Spotify app.

This allowed us to pinpoint how we could help her –
when she’s playing “DJ” at a party and she’s too busy queueing up songs to enjoy herself.

Click to enlarge

Click to enlarge

 

› ideate & sketch ‹

In order to relieve Summer of her "DJ" duties so she can have fun at parties, we wanted to facilitate collaboration on the music playing at a party.

Our solution? 

A collaborative queue that multiple users could add to in real-time.

 
 

We drew inspiration from Lightning Demos, a method in which we examined other how other companies execute features relevant to our concept. (e.g., in Snapchat, you can add a friend by simply scanning a QR code.)

Considering these inspirations, we then went into rapid ideating with the “Crazy 8s” technique, where we each sketched 8 ideas in 8 minutes.

IMG_4317.jpg
 
 
 

Crazy 8s allowed us to think quickly and collaborate efficiently.

Crazy 8s.jpg

I stayed empathetic towards Summer while ideating and sketching.

Sketching- Crazy 8s (2).JPG
 
 

 

› decide ‹

Dot Voting

We narrowed down our ideas through a method called Dot Voting, where we pinned up our lo-fi sketches, silently marked areas of interest, and held an organized discussion. 

Dot voting helped us see which ideas could be blended and which features we should prioritize. 

 
Decide Process.png
Decide- Pin-up voting.jpg
 
 

User Flows

 

We then created user flows for each specific user, based on Summer's User Journey, to understand how they'd interact with "Live Queue" in a social setting.

After we created a draft on the whiteboard, I used Omnigraffle to create the clean, digital copies. (See below.)

Click to enlarge

 
 
 

OWNER USER FLOW
(Summer, primary persona)

1.  Setting up the queue
2.  Adding DJs to the queue
3.  Adding songs to the queue
4.  Controlling settings

DJ USER FLOW
(secondary persona)

1.  Joining a queue
2.  Adding songs to a queue

 

 
 

 

› design & build ‹

First Round of Hi-Fi Wireframes

annotated key screens

As part of the Agile Design Sprint, we turned our low-fidelity wireframes into high-fidelity ones in Sketch, and used InVision to create a clickable prototype for our first round of usability testing.

Because we kept the UI design clean and on-brand,
users thought they were using the actual Spotify app when testing it!

 
 
 
 
 

What Did I Create?

All elements on the the Live Queue home screen, where the songs and DJs are shown

All four reaction icons (iterated on in the next round of hi-fi design)

 QR scan code of live queue

 "Add to Live Queue" icon

 

› usability testing ‹

 

We tested our "Live Queue" InVision prototype with 6 users, giving them tasks that followed Summer's user flow as the owner of the queue, in order to understand what worked and what didn't. Using this data, we were able to determine the necessary iterations going into our final wireframes and clickable prototype.

Testing our conceptual feature!

Testing our conceptual feature!

 

Key Learnings

What worked

• Tasks felt natural to users of Spotify

• Users loved the idea of reacting to songs

• Users found "Live Queue" fun and interactive

 

What didn’t work

• Users were not sure how the reactions work

• Users had trouble finding reaction icon

Seeing who added a song was not priority, but good to know through a "info" screen perhaps

• The “Anonymous” feature was unclear to users

 

Iterations

•  Create Onboarding experience so users understand the feature

•  Remove “Search for Songs” CTA button and adjust language for adding songs to live queue

•  Default “Recommended Songs” open

•  Add “See previously played songs

•  Move photo of person who added song to “Options”

•  Make reaction icon larger, adjust contrast, and identify how many people reacted

•  Make "anonymous" copy more clear

 

 

› prototype ‹

We incorporated the iterations above and created our final clickable prototype in InVision:

 

 

› looking ahead ‹

Meeting Business Goals

By making our socially interactive “Live Queue” feature only available with a
Premium membership, non-paying users have a new incentive to go Premium.

We aim to increase the conversion rate from non-paying to paying Premium users.

 

Phasic Approach To Future Plans

 
Next Steps.png
 
 

Looking to get in touch?