← Home

Spotify

Redesigning the playlist creation process on the Spotify app

Timeline 1 day — August 2017
Type Solo project
Role UX Designer

How it started

Last summer, my friends and I decided to plan a surprise birthday party for one of our best friends. Being the playlist guru in my friend group, I was in charge of creating the party's playlist. I love making playlists and sharing them, but I had never made one with more than 15-20 songs, and making this party playlist made me realize how inefficient the process was. The day after the party, I decided to sit down and try to think of a more efficient way of creating playlists on the Spotify app.

cartoon

It takes a lot of steps to add a song to a playlist

While making my playlist, I realized that it took multiple steps to add a single song which felt very inefficient and redundant. To break down that process and identify what can be improved, I mapped out the playlist creation process using a Hierarchical Task Analysis (HTA). The HTA is a great way to break down a process and dive into the more granular tasks that we wouldn't notice at first glance.

Hierarchical task analysis

Once we create a playlist, we can only add songs by searching for them or navigating to our library and adding our saved songs individually. In both cases, it takes 3 steps to add each song after finding it by either searching, filtering, or scrolling:

These steps are outlined in the HTA under tasks 3.4 and 4.4. Here's an example of how I added a song using the "Search" feature:

Adding a song to a playlist on the current app

current spotify app

What we need to solve

Based on the HTA, I determined 3 areas of opportunity that can help us address the inefficiencies in the playlist creation process and make it much faster.

cartoon

Lack of flexibility

The user can't add songs from within the playlist itself.

How might we direct users to add songs from their playlist instead of their library or search?

cartoon

Time-consuming

It takes 3 steps to add one song to a playlist.

How might we add songs to a playlist with fewer steps?

cartoon

Inefficient

The user navigates back and forth between "Search" and "Your Library" to add songs.

How might we enable users to add songs from different sources without navigating multiple screens?

Some initial sketches

Based on the "How Might We" questions, I sketched out ideas I had for each of the 3 areas of opportunity:

sketches

Connecting ideas together

After sketching the different ideas, it was time to develop them further and connect them to create a unified experience. The complete wireframes with my notes can be found here.

Empty state

For the redesigned playlist empty state, I added the "Add Songs" button to direct users to add songs directly within the playlist as soon as it's created. I kept Spotify's existing "Recommended Songs" section because I thought it was a great way to offer recommendations based on the playlist name.

Empty state when users create a playlist

empty state

Add songs

The significant change that I made was combining two different ideas: creating a dual-view for Search and Library, where users can easily add songs with one tap.

Dual-view to add songs from Library or Search

add a song

Fitting the solution into Spotify's existing app

The next step was to create a high-fidelity design and make it consistent with the current Spotify experience to facilitate user adoption if this were to be implemented. To show the changes, I decided to show the proposed redesign next to the current design.

An empty state that lets you add songs directly

cartoon

More flexible options for users

The user can start adding songs from within the playlist itself instead of being redirected to "Browse".

empty state

A new way to add songs to a playlist

cartoon

Faster

The user can now add each song with a single tap instead of 3 steps.

cartoon

More efficient

The user can seamlessly add songs from their library or from "Search" by switching tabs.

add a song

The prototype

To better visualize the experience, I've put together a prototype that you can explore here.

Similarities with Spotify's 2020 update

Three years after I completed this project, Spotify released an update and changed how users create and populate playlists on their app. I was happy to see a significant overlap between my design and the new playlist creation process in the 2020 update!

The empty state

Similar to what I designed, Spotify modified the empty state for playlists and included an "Add Songs" button.

Spotify's design (2020)

2020 empty state by Spotify

My design (2017)

2017 empty state by Fawzi

Adding songs

When users tap on "Add Songs", a modal slides up with suggested songs to add. The user can swipe through different pages and add songs with one tap using the '+'. Users can also add songs from their library or by searching.

Spotify's design (2020)

2020 add song design by Spotify

My design (2017)

2017 add song design by Fawzi

Spotify's design (2020)

2020 search songs design by Spotify

My design (2017)

2017 search songs design by Fawzi

Continue reading

Google

Designing and coding a visualization for Google's Knowledge Graph

Read story →
← Home