Case study: sing along with Spotify
A UX/UI Case study to provide Spotify users with real time lyrics
For the third project of this incredible Ironhack journey, things drastically changed. I mean, I didn’t have a team to work with anymore! This time, it was a solo project and everybody that knows me can tell how much I love to teamwork. I work best when I’m surrounded by creative and driven people!
I had three weeks to deliver the case study so, without further ado, let me introduce you to my third project at Ironhack.
Brief and product
I was briefed to analyze an already existing and highly adopted app and incorporate a new feature into the existing product. We had to choose between iOS and Android native apps and even if I currently use two devices from both markets, I chose to test and audit the iOS app, using a Iphone 11.
I’m an everyday user and real lover of Spotify, so it didn’t take too long to make my decision. I started analysing their product conducting a quick Swot anlysis and market research.
Research
In January 2021, Spotify was the most-downloaded music and audio app in the Apple Store and Google Play Store worldwide. The streaming service generated nearly 4.3 million downloads from iPhone users and 8.86 million downloads from Android users. With a wide community of proud members, Spotify has one among the best music discovery algorithms and the slickest and most attractive user interface, not only in my opinion.
However, something is missing in this temple of music. After conducting some competitors research I especially noticed that Spotify lacks of lyrics/karoke and eventually lyrics translations option. I wondered if maybe there was an already existing agreement with a secondary platform in order to compensate for this lack and I discovered that, in November 2019 Spotify renewed a partnership with Musixmatch (they signed a first deal in 2016), the world’s largest lyrics catalogue, to allow their users to synchronize their Spotify accounts and playlists with Musixmatch app and be able to read lyrics of songs they are listening to on mobile devices.
I also analyzed some other music Apps like Apple Music. This one, specifically ended being the one I had to keep an eye on during the last steps of my project, when it came to design, design, design..but hey, we don’t have to rush!
Let’s start with the basics!
Quantitative and qualitative data
Even tough I hadn’t used before a service/app to see songs’ lyrics, I was eager to learn more about music apps users’ needs and interests so that I decided to submit a quick survey on Google Forms to get a feedback on the possibility of integrating this lyrics feature into the Spotify app on mobile devices.
Then, I found 5 Spotify users amongst my friends to interview, asking for more detailed questions about their music habits, their interest in lyrics of songs and eventually, the reason behind that interest.
Some interesting quotes from the interviews highlihted that users take a keen interest to use lyrics feature for two main reasons: to sing along and to get an in depth understanding of the meaning of the song.
“I’m really into lyrics, I would like to read them while chilling with friends during a karaoke night and sing along” Matteo
“When I listen to a new release sometimes I miss some part of the lyrics and I would really like to read it quickly directly from my Spotify player, on my smartphone” Maria Antonietta
I put together all the information gathered through the survey and interviews into an Affinity Diagram and decided to which insights pay more attention through dot voting.
Defining Pain-Points and Problem Statement
Once I cleared my head over the main goals and frustrations of Spotify users I had previously interviewed, I tried to identify the main pain points of the existing product. Users that want to read the lyrics of song they are listening to are:
- either forced to leave the app running in the background and go to search for lyrics on a browser or,
- compelled to use a separate app to have synched lyrics on music player.
After defining the user pain-points I was able to create a primary persona and his user journey I would build the project scenario on. Based on this, I came up with the final product ideas, which should meet user needs and solve their problem.
Let me introduce you Lyrical Leonard!
I imagined a scenario where Lyrical Leonard is chilling and listening to music at home. He really loves Spotify’s playlists and decides to shuffle the Discovery weekly playlist. He actually discovered a new artist and really likes his new release but at a first listen he has missed some parts of the lyrics. The song was really touching and he wants to get more in depth of its meaning so he has to close the app running on the background and go searching for the song’s lyrics on Google. This is really annoying, if only Spotify had real time lyrics…
For each step of Lyrical Leonard’s journey I analyzed some opportunities to explore in order to improve his Spotify’s experience and for this project I decided to focus on the lack of real time lyrics and how to develop this new feature. Once I had a clear vision of my new feature’s user persona and his needs, I came out with the problem statement:
Defining MVP
How is this feature going to be used?
How does it improve the user’s experience with the product?
After some brainstorming I resorted to the Moscow method to be able to define the Minimum Viable Product for the Lyrics Feature.
This process helped me decide what features to prioritize. Firstly, I picked up some interesting data from the previous competitor analysis and I felt that, for this first product design, it was a priority to implement the real time lyrics and some settings such as the possibility to change the font size, the background or even synchronization.
This being said, I was able to create the MVP.
So, the goal of the new Spotify feature is to allow users to see real time lyrics of the songs on their mobile phone (for now) while listening to music on Spotify, without having to leave the app running in the background to search for lyrics on a browser or using other service to read them.
In this way, users can catch the meaning of the text while listening to music as well as singing along if they feel to.
Ideate and sketch
At this point, I was ready to ideate the new path that the user would have followed inside the app when using the new feature. Studying how the current flow worked allowed me to discover several ways to approach the challenge and where to start incorporating the feature.
Once I had concluded all the stages of the research process, I proceeded to ideate and prototype. First, I started with some concept sketches on paper, in order to explore a simple user-flow for the feature. I needed to maintaining the feel, look, and logic of the current app in order to adhere to user’s mental models and keep alignment with the brand. Therefore, since for this project I only had to work on a specific market, I had to follow iOS Human Interface Guidelines.
The aim was not to build an unprecented feature, on the contrary I focused on a functionality that most users already understand and feel comfortable to interact with, which increases learnability and simplifies the development of it.
I conducted a quick testing of my concept sketches with 10 Spotify users. In my first draft, I tried to move the small Spotify player at the top of the screen and to arrange the Lyrics button at the bottom, among the Devices and Queue buttons. Eight out of ten people told me not to consider that position the right one as the buttons on either side are not strictly related to the song, instead they allow the user to perform some external activities, such as changing the device on which to listen to music or creating a queue.
I implemented the feedbacks I received, restored the small player to its original position and moved the Lyrics button next to the Liked/heart button. Then I reconducted concept testing with those changes applied and I also tested the Lyrics Settings screen which the testers really enjoyed.
I wasn’t still really sure about the position of the Lyrics button so I made some testing with high fidelity screens. Eventually I decided to move on with my initial vision, that is to place the Lyrics button next to the Liked/heart button.
Design the icon
The current icon shapes are designed to mirror Spotify’s Circular typeface. They are simple, considering the bare minimum needed to convey the idea behind the icon. I had to audit the iOS Native App to recollect in a style tile all the colors, typography and UI elements inside Spotify that I needed in order to build my own prototype.
But before starting to prototype, I spent some time designing the icon and testing it with some friends and Spotify users. I received 15 responses and the favourite one was actually an already existing icon, pretty well-known among iOS users being very similar to the Apple Music Lyrics button (do you rember what I told you at the beginning during Competitors analysis?).
For the digital prototype, I recreated several screens from the Spotify app using Figma and added the necessary elements.
The final prototype
Since I examined the user-flow of the current app, I wanted to explore a concept that integrates with the existing navigation.
- So the user opens Spotify and goes to his library.
- Since one of the mostly liked features of Spotify are playlists, I decided the user to filter his library by “Playlist” and to pick one.
- At this point, let’s say he has just saved/liked a new song and wants to listen to it. It’s a Foo Fighters song (check it out the prototype at the link below!! You won’t regret it!), he clicks on play and really wants to sing along!
- He clicks on the Lyrics button and the original player switches for a new one, with real time lyrics displaying on the screen.
- So funny! Now, he wants to change some settings, for example he decides to turn off the synchronization and also feels to change the background.
- As for others functionalities, the user can change settings by clicking on the More button (“…” icon at the top-right of the screen).
This was the best solution for users to understand the navigation and usage of the feature and I subsequently had confirmation of this during usability testing.
Usability testing and next steps
I conducted usability testing with the same persons I addressed before for concept testing and I got the following results:
- 100% of testers would use the feature and find the path easy to follow;
- 50% would use on a daily basis, from their mobile phone, while commuting, on train/bus/underground, while chilling;
- 90% would use it with friends, both at home or in a pub/bar/club.
Designing for an existing product is a complex task. It can be even more challenging than starting from scratch, especially when you have to get the job done alone! This project was a great way to explore Figma and to understand Native Apps UX/UI. Adding a feature to an already existing product implies you have huge expectations to fullfil and many voices that want to tell you their opinion being familiar with the product itself. Therefore, I now know how important is to analyze the current product to keep consistency, from visuals to navigation.
As for the future, I definitely will:
- continue to work on the design of the icon, using Adobe Illustrator;
- conduct A/B test for the new icon;
- make karaoke playlists based on users’ preferences and liked songs;
- develop laptop/other devices version of lyrics feature, both for private use and for commercial activities;
- conduct usability testing on Maze.
Special thanks to my buddy Carolin I could rely on in those moments of despair, to exchange advice and cheer us up! Also thanks to my teacher and tutor at Ironhack, I think I’ve learnt maybe the most important lesson you guys keep reminding us…
