› 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.
› 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
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.
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.
› 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.
Crazy 8s allowed us to think quickly and collaborate efficiently.
I stayed empathetic towards Summer while ideating and sketching.
› 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.
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.)
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.
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.