Case Study: Bringing the Heart back to Spotify 💚

Bruce Xie
11 min readJun 7, 2023

Introduction

Spotify is one of the world’s largest music streaming platforms. Spotify aims to provide a personalised music experience through their unique recommendation algorithms and by allowing users to easily create and share their own playlists.

Main Challenges

In a recent update, Spotify consolidated the Heart and “Add to playlist” icons into a single Plus (+) button — this frustrated many users as while the update had benefits such as being able to add a track to multiple playlists at once, it broke some of the interaction flows they loved, such as being able to quickly like and unlike a track.

I tried to address the limitations of the new experience whilst retaining its benefits to users. This was tricky as I had to consider the existing interaction logic users were familiar with in the app and its ecosystem (Desktop, Android, Watch) and also balance efficiency with accuracy when it came to deciding between a Drag and Drop vs a Contextual Swipe gesture. I conducted user interviews and testing sessions to gain empathy and understand the mental models and current hacks users had adopted.

Conclusion

I think the end product successfully addresses the limitations of the current design. Users are able to easily like and unlike songs, whilst still being able to quickly and intuitively add a song to multiple playlists.

Process

I followed the Double Diamond design process to first research and define the issue I wished to address within Spotify, then ideate solutions to test and iterate into a final product.

Research:

I began my research process by widening my horizons. I used Assumption and Factoid mapping to challenge and cross-reference my initial beliefs. This made me realise I knew about how others used Spotify, outside of my own experiences — which might not even be relatable. I did not find any meaningful opportunities here.

Assumption and Factoid mapping

I then created a Persona and Journey Map for a “power user” in a scenario in which they wanted to add a newly discovered song to a playlist they had created previously. I identified that the user could feel confused or stressed deciding between playlists to add the song to, or alternatively they could be feeling “in a certain mood” and wish to add songs to one particular playlist in a frenzy of sorts (personal experience coming through here!).

Opportunity: to explore a new Add to playlist experience that allowed for a faster or more information dense (or both) interface.

Persona and Journey Map

I also conducted research online trawling through forums and news articles to find opportunities based on others’ experiences. The official Spotify community forums were a great source for ideas and complaints. Some topics included Achievement Badges, Separate Playback Queues for Music and Podcasts, Bringing back the Heart icon (replaced by Plus), Theming of the app, Customisation/Pinning playlists to the Home screen.

Official Spotify community forums

Synthesis:

In order to converge my research into insights, I conducted 8 Contextual Inquiry interviews. These were a mix of in-person and online over Teams, with an average session taking around 37 minutes. I asked a variety of questions about different areas of the experience to maximise coverage of any problems the user could be facing.

Left: User interview questions and notes / Right: I used a table and sticky notes to synthesis the interview data and look for patterns

Insights:

  • 7/8 users added songs to their Liked Songs playlist most often. 3 users felt the process of adding a song was too complex or slow. Another user felt indecisive about which playlist the song belonged in.

“I usually just add stuff to my liked songs. Because looking for a playlist to find music I like is too hard.”

  • 7/8 users felt that the Library tab is too long and messy — so they’ll use Search instead to find their music.

“If there was a plus button like next to the downloaded tab. Then I can just be like if we day playlists or driving or like I don’t know it’s just like stuff that I can like categorise it instead of me just like scrolling through here to try flying something.”

  • 6/8 users rotated between a mix of different playlists and albums depending on how they’re feeling in that moment.

“I know my own music taste better than Spotify does.”

  • 4/8 users felt the Home screen was not useful and suggested a more customisable interface.

“It’ll be cool if you could like shift things around on the home screen.”

  • 3/8 users used their Liked Songs playlist as a temporary Bookmark function for tracks they wished to either listen to later, or sort into a playlist.
  • 2/8 users thought increased personalisation features such as theming would be something that they’d like. The rest felt there was no need.

“Like [themes] would be a pretty neat feature because some people have different aesthetics like it can’t always be black. Some people might like a pink, blue, white background.”

After sketching out some initial ideas, I concept tested these with 3 classmates. I explained each concept sketch and asked which they liked the most — they all agreed that a “quick add” feature would be the most useful, One classmate felt that it was very intuitive —

“its [the drag and drop interaction] like the computer version”.

Initial concept sketches

Because my interview data, concept testing and online forum complaints all supported the idea of improving the liking and adding of songs to playlists, I decided to focus on this opportunity.

How might we allow users to intuitively like and add songs to playlists?

Goal: to allow for quick and easy liking, unliking and add to playlist flows that are intuitive to users to learn and encourages use without being distracting.

I discovered that Spotify displays the tick icon when swiping on a song you’ve already liked and want to add to a playlist — this is confusing and unintuitive. There is also no way to quickly unlike the song.
Some of many complaints online about the recent merging of the Like and Add to playlist button
This user provides a detailed scenario explaining how the new design is more frustrating for them, particularly in higher stress environments such as when driving. They suggest the solution is to keep the two interactions separate.
Bumping an old liked song to the top; the user flow that the Reddit user above was describing is common and very useful. I, and some of my interview participants also mentioned doing this frequently when coming across a “throwback” that you might want to listen to again more easily.
Official communication from Spotify — The Verge notes that the changes seem unintuitive

Ideation:

Spotify is seemingly undecided on whether to ditch the heart completely or not. I decided to keep both but with separate functions — Heart for Liked Songs and Plus for Playlists. This clearly differentiates the two, which is an insight I gained from my interviews — users I talked to didn’t just think of Liked Songs as just another playlist. If Spotify kept the Heart indicator for previously liked songs, but presented users with a Plus button to like a song this would obviously be very confusing.

I could separate the like and add to playlist functions with a tap menu, but it would be too slow for the application — even a few seconds of difference could be annoying when the user is multitasking (as you often do when listening to music!). Gestures allow for fast interactions that are still intuitive.

As there are only so many types of gestures suitable/intuitive on a mobile device, I chose to prototype and test two:

Drag and Drop

  • Currently exists on the desktop app and so would be consistent with some desktop users existing mental models.
  • Less tapping involved, a single hold and release is enough to complete the interaction.
  • Higher chance of user confusion and error due to the manipulation of the interface being required.
  • Potentially steeper learning curve as users are not familiar with this interaction in a Spotify or music streaming context.
The BNZ app uses a Drag and Drop interaction effectively to remove several taps from an account transfer. Phone home screens also use this interaction.

Contextual Swipe

  • Keeps actions in line with the content they affect.
  • Currently implemented on the Spotify iOS mobile app and hence is consistent in design. Users won’t need to learn a new gesture.
  • Confirmation will need to be required to prevent mistakes.
  • Behaviour/logic will need to be consistent across the different screens in the app (Player and List View).
  • Used on Android, but more consistently implemented on iOS devices. A long press or three-dot menu seems to be more commonly used to access additional functionality.
  • Obscures content when swiped to reveal actions, potentially making it inconvenient for those wanting to confirm their selection. This is not as big of a disadvantage in a music streaming app however, as users are often listening to the content they are interacting with (eg. Liking a song you’re listening to).
Android implementation of a Contextual Swipe to mark an email as starred.

The lack of signifiers is a problem with both gestures, making it unclear where it can be used. An onboarding card can help users become familiar with the gesture, but some may never get used to it or simply forget to perform it if there are no visual cues.

In the Spotify mobile app context, iOS and Android users are already familiar with the three-dot menu in the top right corner that can provide an alternative to any gesture based interactions, reducing this disadvantage somewhat. Users that forget to, are physically unable, or simply prefer not to use the gesture can default to the three-dot menu instead.

Lofi prototypes — Drag and Drop, Tap Popup Menu, Contextual Swipe
Comparing different Contextual Swipe implementations and their interaction logic — iOS notifications, Instagram DMs, Apollo (Reddit Client)
The iOS Notes app and Apollo, two SwiftUI apps with slightly different Swipe Action implementations

Implementation:

Iteration process for the Drag and Drop design

During user testing I found a 3x3 grid more effective. I explored different drop zone designs to find one that looked intuitive and fit Spotify’s existing design language. The rounded corners and green border highlight are consistent with the current Desktop app.

Iteration process for the Contextual Swipe design

I drew inspiration from this blog post that explains the icon design system in place at Spotify and some of their design decisions. I decided to mostly stick with their design decisions for consistency. I tried to give the icons similar visual weight and spacing/sizing.

I tested a full screen notification message for Liking, Unliking and Adding to playlist, similar to the Apple Music implementation — but found it was too distracting, even with the Opacity lowered. I found this especially annoying when trying to continue scrolling down a list of songs but having a lingering card in the way. A discreet bottom card is much better.

In testing, removing colour from these notifications was the least distracting option. However, some users noted that it didn’t look interact-able or didn’t notice it had even appeared. I fixed this by adding a 1 second delay to the animation to help it pop more. I also decided to leave the colourful green and red Like/Unlike icons in for clarity. When testing back and forth with and without icons, I found this helped differentiate a Like interaction with a Playlist interaction at a glance.

The two prototypes

When user testing and comparing the Drag and Drop prototype with the Contextual Swipe, this was the feedback I received and observations I made:

  • Users didn’t like how the album cover obstructed the playlist cover while dragging.
  • The Swipe Action felt more safe and reassuring, whereas the Drag and Drop felt scary and rushed you to make choices. The Swipe essentially broke the flow into two, introducing a Card Menu where the user could make their selections and confirm them. This also allows users to add tracks to multiple playlists in one go, or let them see which playlists the song has already been added to.
  • I noticed users struggle with reading everything in the dense 3x3 grid, this wasn’t an issue in the Swipe prototype.

I felt the Swipe prototype was better suited as a solution so I continued to iterate on it.

Testing the probability of conflict with the album cover and playback scrubber

I reduced the chances of unintended behaviours when swiping by ensuring touch areas were at least 48px and did not overlap. The clearly defined fill that appears when the user touches the song name area also helps reinforce this and prevent errors.

This is one of the drawbacks to this gesture — it is easy for users to accidentally swipe the album cover area and change tracks, or the playback scrubber and skip backwards in the song when they just want to add the song to a playlist.

I added a subtle but noticeable micro-interaction to the Heart button to more clearly inform users when they’ve liked a song.

I also added a “new feature” card with a short demo video that introduced the new feature to users and informed them of the changes so they aren’t confused or surprised when they find out.

Results

When comparing to the current design (left side):

Player View

  • Liking and unliking is faster and more intuitive as there is no need for the card to appear. The heart icon effectively communicates the system status as it is simple and universal.
  • It is now possible to add a track to a playlist without first liking it, giving users more options. This also speeds things up compared to the current design.

List View

  • Liking a song is more intuitive due to the Heart icon.
  • Unliking a song is much faster, easier and less distracting.
  • System status is communicated more effectively through the use of a colour icon in the notifications.
  • Possible to add a track to a playlist without first liking it. This is also more intuitive than swiping on the area twice in a row. The longer swipe effectively functions as an “extended like” which is intuitive to users.

Reflection

When using a popular service like Spotify, it can be frustrating when functions you’ve relied on or even loved suddenly break. I think many users can adapt to changes but some will leave if there are alternatives.

I’ve learnt how the user research process is crucial to understanding the motivations and needs of users. This is especially important when your experience is as tailored and as personal as something like Spotify. I’ve realised that even large successful companies that make flawed updates — not to say that my design is perfect of course, but I think I’ve balanced the tradeoffs in a better way.

The experience is faster and more intuitive as it separates the liking and add to playlist flows from one another. The Swipe Action functions more like a natural extension rather than a forced and awkward process you have to consciously learn.

I’m curious to see how Spotify resolves the missing heart icons on previously liked songs — I hope they bring the heart back!

Unlisted

--

--