.png)
Spotify
Client
Spotify
Timeline
Jun - Jul 2023
Scope of Work
UX/UI Design & Research
Type
New Feature
There is no question that Spotify is one of the most popular music streaming platforms due to its extensive library and playlist-creation tools. However, the process of adding multiple songs to a playlist can be tedious and time-consuming for users. This creates a need for a more efficient and intuitive solution to enhance the playlist management experience.
Problem
Manually selecting songs one by one slows down the playlist creation process, resulting in inefficiency and frustration when dealing with larger collections or creating new playlists. Users are unable to create playlists quickly as a result of this lengthy process.
Solution
By adding a multi-select feature, Spotify users can add multiple songs to their playlists, searched playlists and albums. By incorporating checkboxes, users can easily choose multiple songs at once, making playlist creation and editing more efficient and enjoyable. The goal is to provide a seamless and painless music streaming experience, allowing users to personalize their listening journey.
Process
.png)
Discover
To begin, I delved into the existing Spotify platform to gain a better understanding of its current functionality, design patterns, and user interactions. This initial exploration aimed to identify strengths, weaknesses, and opportunities for improvement, laying the groundwork for the design process. I analyzed how users add songs to their playlists and found it to be time consuming. By incorporating a multi-select tool for song selection, similar to the existing feature for selecting a playlist, users can now effortlessly select and add multiple songs to a playlist.
Harmonizing Insights
I began conducting user interviews and surveys, resulting in 17 survey participants and 3 interviews. Through these conversations, I gained valuable insights into users' challenges while adding songs to playlists. Both methods guided the design process, ensuring that the proposed multi-select feature is tailored to address the specific needs and preferences of Spotify users.
.png)
Define
Navigating Playlist Interactions
Flowing with Spotify
The findings from my user interviews and surveys led to the creation of 4 different task flows. Each task flow represents a path a user might take when entering the multi-select mode after a long press.
Task 1: Adding Multiple Songs to an Existing Playlist
Task 2: Sharing Multiple Songs as a Playlist
Task 3: Select Multiple Songs and Organize Them: Moving Them to the Top
Task 4: Adding Multiple Songs to a Queue
Design
Enhancing Playlist Control
In the "Design" phase, playlist management was enhanced by introducing the multi-select functionality, activated by tapping and holding, into Spotify's interface.
Sketching the Beat
At this point, I gathered enough information to begin sketching low-fidelity ideas with the multi-select feature. I had to work within the existing design guidelines to make the feature as seamless as possible to fit with the existing UI.
Users can long-press on a song to activate the multi-select mode, and then tap on other songs to select them. They can then perform actions on the selected songs, such as adding them to a playlist or removing them.
Spotlight on Selection
After sketching out design concepts, I focused on translating them into visual representations. Utilizing a combination of Figma Community UI kits and lots of screenshots, assets were made that closely match Spotify’s branding and UI guidelines. The wireframes highlight key options, including the ability to add songs to playlists, remove songs, rearrange the order, play or queue selected songs, and easily share them with others.
These visual assets provide a glimpse into the user interface and functionality of the multi-select feature, spotlighting the improved user experience and increased control over music organization and enjoyment. Upon opening the app, the user can utilize the multi-select feature for both album playlists and personal playlists.
Test and Iterate
Final Designs
From the home screen, users move to the targeted album playlist, activate multi-select with a long press, and swiftly choose multiple songs. Actions for an album playlist include "Add to Playlist," "Hide Songs," "Add to Queue," and "Share."
From the home screen, users navigate to their personal playlist, activate the multi-select mode through a long press, and choose multiple songs. Options include, "Add to Playlist," "Remove from Playlist," "Add to Queue," "Share," "Move to Top," and "Move to Bottom."
Tuning into user feedback
By conducting a remote user testing with 8 participants using Maze, I evaluated the multi-select feature's usability. Tasks included adding multiple songs to a playlist (Flow 1, avg. time: 45 secs) and rearranging songs in a playlist (Flow 2, avg. time: 35 secs). Following the completion of the tasks, participants were invited to share their first impressions and overall feedback.
.png)
Wrapping it up
Looking back, it was rewarding to integrate a new feature without overwhelming users with too much change. Incorporating a press-and-hold gesture to select multiple songs simplified the process by reducing taps and minimizing the screen interactions, especially when dealing with a bunch of songs. Given more time, I'd aim to expand this functionality to desktop users, ensuring a cohesive multi-select experience across various platforms. And for an added touch of enjoyment, check out my curated playlist, featured throughout this case study.
