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.
Type: UX Design
Platform: Mobile (iOS)
Artifacts: Hierarchical Task Analysis, Sketches, Wireframes, High-Fidelity Mockups, Prototype
Completed: August 2017Read it on UX Planet
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:
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.
Based on the "How Might We" questions, I sketched out a possible solution to each of the 3 areas of opportunity listed above.
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.
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.
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.