Spotify queue | Alice Duncalf

Spotify is one of the biggest music-streaming apps, however the latest update regarding the queue leaves users' disappointed. After collecting several reviews from the Google Play Store app it became clear that the update had caused frustration. The user often adds multiple different songs to the queue system. This creates a mixed playlist of what they feel like listening to in that moment. Currently the app lacks functions that the users' need to complete their goals.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Design process:
Double diamond model.

In this step I identified what the users' mentioned were frustrations. The highlighted paint points from the reviews are divided in to different sections based on simalirity in content. A customer journey map was made to visualize what the journey is and what it could be.
‍

image illustrating customer journey pain points

User pain points
‍

Current Customer Journey

Ideal Customer Journey

By analyzing the way customers are interacting with the queue it's clear that there are a few issues. What I wanted to solve was:
- How can I improve the design for the user who wants to easily add and delete songs to their queue?

To help come up with ideas I chose three goals that I wanted to solve:
1. To solve the user issue of adding and deleting multiple songs.
2. To solve the user issue of swiping left or right to delete or add songs.
3. To take away buttons that interfere with the information hierarchy.

In this part I brainstormed different ideas that could help solve the issues.

image of brainstorming sessions, different options

image of chosen subjects to include in wireframes

After writing down possible solutions I chose to make lofi-wireframes with the cards on the right as a starting point.

Testing how the swipe-movement to delete and add songs could be more user-friendly. Designing different options for when the song is selected.

Designing what options should be on the menu.

Changing the border on the tracks to be grey when they are unselected. When they are selected they change to green.

Designing the lines to be bigger to make it easier for the user to move songs in the queue.

The menu stays sticky for users' who want to use the three dots for options.

Testing if the bottom of the screen should have one or two buttons.

In the beginning the clear button was there but it was later moved to the top so that the user doesn't press it by accident. I also changed it from clear to clear queue to make the user more aware of what the button does. The swipe-movement did not make it into the design because I did not find it intuitive to use. This is something the user has to get used to, however I added options in the menu instead of relying on the user knowing how to use the swipe function.

The usability test consisted of six participants. They were given a set of instructions whilst using the queue on Spotify. During this they were also instructed to think out loud. After completing the set of instructions the users' were introduced to the prototype on Figma. This time they were also informed to think out loud as they completed the same steps as before. The test gave valuable feedback on the usability of the design and was used to make necessary changes to improve the prototype.

The usability test showed that the changes such as being able to select multiple songs and adding a delete-button made the interaction easy and intuative.

Because the participants weren't familiar with the select multiple-button, which had been added in the prototype, it was overlooked by some when they were intstructed to add several songs in the queue.

This project taught me to make simple design decisions that can work in an established UX- and UI-design. In the early stages of the process I wanted to create a solution where swiping left or right was obvious to the user. But after a few sketches and tests, I realized that using visual queues such as colors or animations only made the design feel more cluttered and didn't benefit the user.

The project also taught me about the importance of iterations, collaboration and understanding the users needs and creating a solution that can meet this. During the test the participants contributed with several good ideas that can help to further improve the design.

Empathize

Define

Ideate

Prototype

Test

Final solution