How adding a feature to Spotify turned into a redesign of the “Behind the Lyrics” feature
From August to October 2020 I enrolled in a UX/UI Design bootcamp @Ironhack in Berlin. I will be writing here a series of articles to showcase my projects.
Let’s start, with the first project I got to work on: “Add a Feature”. As its name implies, it consisted in adding a new feature to an existing app. Every student had to come up with one idea, then the ideas were randomly allocated to each one of us. The feature I draw was: “Spotify: in an artist’s album section, add some information about this album (where it was recorded, who worked on it…)”. We had four days to work on the project by ourselves.
UX research
To start with, I checked if this feature was relevant to implement for Spotify users. Therefore I conducted 7 interviews among Spotify frequent users. The outcome of these interviews can be splited in two ideas: 1. Having anecdotes and informations would indeed be considered as an added value for the users 2. However, most of the users do not seek for an album to listen to anymore but they rather go and look for an artist, or a song.
Based on these insights, I ideated the initial idea and made it shift from “adding some information about the album” to “adding some information about the song”, and tested it again on users. As I was interviewing them, some users taught me that such a feature kind of already exist on the Spotify app. This feature is called “Behind the Lyrics”, it is displayed on the music player as a windows you can swipe up (see screenshots below). However, users unanimously reported the same issue: this feature displays the lyrics of the song while displaying as well some anecdotes about the artist & the song, therefore both are overlaping leading to a very confusing final result. To explain it clearer: for a few seconds the lyrics are being played and suddenly they are getting interrupted by an anecdote about the song, and so on for the entire length of the song. Nevertheless these two functionalities are liked per see: 1. Having the lyrics of the song: YES 2. Having some content about the artist and the song : YES. Users just don’t want both at the same time.
Therefore, after not even 2 days of working on the project, my problem shifted from “Add info about an album” to “Improve the Behind the Lyrics feature”. And I must say that it was highly satisfying to see concretely how implementing a user centric approach can be rich and push you further into a (more) relevant direction.
2. Ideate
Once my problem was clearly framed, I started to ideate, always with the help of the users. Firt of all, it was pretty clear that the lyrics and the anecdotes sections had to be clearly splitted in two to avoid any overlapping.
Morevoer, as I was co-creating with users, some other ideas came up. If they have the lyrics, the users want to have the “whole package”, meaning: lyrics and instrumental version and video. Some were already imagining themselves doing crazy night singing out loud with friends. Based on this idea, I developed the lo-fi wireframe below.
However, after testing this wireframe, it turned out that having this whole “karaoke package” on an app was not so relevant for users. They surely would use it on their TV for a night with friends, but not on an app. Indeed, their use of the Spotify app is individual. And a karaoke is something you enjoy with friends, not by yourself. For this reason, I withdrew the Instrumental option.
Once again, this step was very insightful as to the user centric process. I learnt to welcome the feedback of users while keeping an open-mind about the fact that they can change their minds throughout the process as the idea is displayed differently (here when seen on a mobile wireframe, they realized it was not so accurate).
3. UI design
After 3 days conduction tests and ideating, it was time to set myself for the hi-fi wireframe. I kept the “lyrics” and “video” options, as users said they were two things they could be curious to look at on an app, and I started to wireframe based on that.
For this new wireframe, I chose:
- To keep the swipe up window format but allocate it only to the song information. So that when the user drags it up, he/she only has access to it, no other information can come on their way.
- To add on the top of the song cover, a simple menu bar featuring the two possibilities : “show me lyrics” & “show me the video clip”. It was important that they could be combined with one another. When these buttons are clicked, they turn green, according to the color codes of the app.
Full prototype available here: https://www.figma.com/proto/x55wu55OCV9FJ8Zbf7QzKp/Project-Add-a-feature?node-id=48%3A44&scaling=scale-down
4. What impact could this project have?
This project did not aim at being implemented in real life as it was only completed in a scholar scope, but I believe it can actually be relevant for two reasons:
- The “Behind the lyrics” feature as it is today is today not bringing the value it could in the user’s experience, and it is even creating frustration, which is never good for a company.
- Displaying the lyrics is something highly valued by the users, they could create a real point of delight in their experience. It is also important to precise that some competitors are already doing it for most of their music database, like Deezer.
PS: Thanks to Franz Ridder who submitted the initial idea, I had a lot of fun working on it! Sorry, in the end it turned out super different, but you know the game ;)
