spotify1
Figure 1

By summer of 2014 Spotify, one of the most popular music apps in the wold has 10 million paid subscribers and 30 million free subscribers listening to 100’s of millions of songs everyday. In today’s most recent version of Spotify, version 1.9, users can shuffle their playlists with a rather large button seen in Figure 1. Pressing this button activates the “shuffle” feature which randomly selects the next song in the playlist. The button functions, however there is a major experience flaw with turning it off.

The Problem

It is safe to assume Spotify did their research and through a data driven decision the shuffle button became the largest call to action in the playlist view because users want to use it. However the experience can be greatly improved by finding a new way to toggle off shuffle play.

Examine Figure 1 and think about how you would currently turn off shuffling? It’s not that apparent is it? In fact can you even tell if this playlist is currently set to shuffle? I can’t.

spotify-shuffle-b
Figure 3
spotify-shuffle-a
Figure 2

There are only two ways to know if your playlist is set to shuffle. The first is to memorize your playlist and know that songs are playing out of order. The second is to find the shuffle toggle switch, which is the same way you turn it off.

You must press the current track title (notice the red arrow in Figure 2) to open the settings panel. In Figure 3 you can see that shuffle is currently on because the shuffle icon is green.

The Exercise

spotify-shuffle-c
Figure 4

Let’s look at ways in which we can improve this experience. Take some time to think about how you might solve this problem before you continue reading. Use Figure 4 on the right to start sketching ideas on ways we can modify this experience with the least amount of UI impact.

In this example only the “Shuffle Play” button has been impacted allowing us to find a solution quickly, so Spotify can ship and iterate faster. It’s important to focus your efforts on solving the problem, rather than rethinking the entire UI of the app. You can sketch your ideas either by printing Figure 4, or working in Balsamiq by downloading this mockup file.

Another way to approach this problem might be to solve it without modifying the current UI all. Can you think of anyway to improve the “shuffle workflow” that would improve the experience without requiring any changes to the interface? Here’s a hint: What action would a person using the app take if they decide they know longer want to listen to songs in a random order?

The Solution

Hopefully by now you’ve had a chance to work through some of your own ideas. Below are my two best solutions to the problem.

My first solution is to solve the problem without affecting the UI, and while I like this solution I do not think it’s the best stand alone fix. In my research I discovered an interesting fact, people select shuffle because they don’t want to have to interact with their playlist in order to get variety.

Spotify has dedicated this large UI element to make it easy to start playing music without too much interaction, in this effort they are successful. In finding a solution it’s important to note how someone starts playing the playlist without pressing the shuffle button? You need to press a song to start playing. Since the shuffle button wasn’t pressed I would expect my music to play in order.

My proposal for part 1 of this solution is to simply turn off shuffle every time someone interacts with specific songs in the playlist. The main reason I press a specific song title is to hear that song, and take back control of what music is playing. I believe this is a good opportunity to turn off shuffle and allow music to start playing in order.

I also think that anytime Spotify is re-opened, or the current playlist is changed then shuffle should default to off, even if I previously pressed it on. This will be a successful solution because we can lean on the button’s size and the prevalence of the call-to-action.

spotify-shuffle-e
Figure 6 “Shuffle Off”
spotify-shuffle-d
Figure 5 “Shuffle On”

The second part of this solution comes with a modification to the UI. Inside the same size shuffle button a toggle switch will be introduced. This switch will clearly represent the current state, and also give the user some satisfaction in pressing the button.

Combining the change to the workflow, mixed with the toggle switch will create an inverse proportion of work to benefit. Spotify can build this solution quickly, and expect to see some excellent results.

Jesse Friedman has been building websites for 18 years, and exclusively with WordPress since 2006. Since then Jesse has written several books, taught 100’s of students as a professor, and organized dozens of local meetups along with a few WordCamps. Jesse has spoken at tech conferences around the world including SXSW, HOW, Future events and many more. Jesse has consulted for a wide array of companies from small agencies to multi-billion dollar international companies. Today Jesse is a proud team member of Jetpack at Automattic, where he spends his time growth hacking and building strategic partnerships.

Leave a Reply