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.
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.
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.
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.
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”.
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.
Ideation:
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:
- 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.
- 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).
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.
Implementation:
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.
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.
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.
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!