Back to Homepage

Spotify

Redesigning the playlist creation process

The Story

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 preparing the playlist for the party. I love making playlists for people 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.

PROJECT DETAILS

Type: UX Design

Platform: Mobile (iOS)

Artifacts: Hierarchical Task Analysis, Sketches, Wireframes, High-Fidelity Mockups, Prototype

Completed: August 2017

Quick links: Wireframes | Prototype

Read it on UX Planet

Research

Task Analysis

To understand why it took me so long to make my playlist, I needed to map out the entire process first. I mapped out the process using a Hierarchical Task Analysis (or HTA for short), which is a great tool to understand the series of tasks that a user needs to perform to achieve a certain goal. You can read more about it here.

The HTA describes the complete playlist creation process from start to finish:

From a first look, we can already see that adding a song to a playlist from either the “Search” or “Your Library” pages takes 3 steps for each song (refer to Steps 3.4.1-3.4.3 and 4.4.1-4.4.3):

Here's what it looks like in the app:

Areas of Opportunity

Based on the task analysis, I found that there were 3 areas of opportunity that could make the playlist creation process easier and faster for users. I also developed a "How Might We" question for each of these areas to frame the challenges in creating a playlist as design opportunities.

Design

Initial Sketches

Based on the "How Might We" questions, I sketched out a possible solution to each of the 3 areas of opportunity listed above.

  1. Lack of Flexibility: We might direct the user to add songs from the empty state of a new playlist
  2. Time-consuming: We might allow users to add a song with one tap only
  3. Inefficient: We might let users quickly toggle between "Search" and "Your Library" views

Low-Fidelity Wireframes

Now that I had a starting point for my design solution, it was time to start developing my ideas further and connecting them to create a unified experience.

For the new playlist empty state below (left), I kept Spotify's existing "Recommended Songs" feature because I thought it was a great way to offer recommendations based on the playlist name. The big change that I made was combining the design ideas I had for opprtunities #2 and #3: creating a dual-view for Search and Library where users can easily add songs with one tap (right). You can view all my low-fidelity wireframes with my notes here.

Final Design

The next step was visualizing how my solution could be incorporated into Spotify's app and making it consistent with the current experience to facilitate user adoption if this were to be implemented. A functional prototype of the final design is embedded at the end of this page.

Prototype

To help visualize the experience, I've put together a prototype that you can explore below.
If you're having trouble interacting with the prototype, you can view it here.

Next: Second Home

Back to Homepage