UX/UI Case Study — Add a new karaoke feature to Spotify
Week 4 at Ironhack Paris UX/UI Design Bootcamp. For the first time, we’ve been asked to work on our own for a one-week UX/UI project. The challenge of this third project is not only to work alone but also to add a new feature into an existing native mobile app.
I chose to work on the Spotify Android application. At first it seemed a bit challenging to work on one of the biggest worldwide company of music streaming. But as a daily user, I was actually very curious to dive into this app’s features that millions of people were using today.
Empathize
A few key information on Spotify.
Competitors Features Analysis
In order to understand the market and more specifically the competitors, I picked two of them Apple Music and Deezer to compare with Spotify. I did a competitors features analysis to identify which services and features they offered.
✅ Playlists, Libraries, Offline — When it comes to the features that are directly related to music listening, we can see that many features are available.
❌ Podcasts, Lyrics, Concerts — Features that are additional and nice-to-have are not necessarily developed by all the brands.
This analysis showed a few opportunities of features to develop for Spotify. But the next step would be crucial, I was going to interview a few users of the app to understand their needs, motivations and pain points.
Since I didn’t have a specific feature in mind to add, the interviews would be helpful to identify more potential opportunities.
User interviews
I interviewed 5 users to get qualitative data. Here are the main quotes that I highlighted from the interviews.
“What I love is discovering new songs.” — Julie W.
“I always wanted lyrics on my music app.” — Bianca C.
“With Spotify, I have quality.” — Valentin B.
“I like to have my private sound world.” — Nira B.
“I listen to music almost everyday on my music apps.” — Julie P.
Following the interviews, all the insights were gathered within an affinity diagram that helped to sort them out and create categories of information.
Therefore, I identified and categorized the habits, gains, needs and paint points of the users I interviewed. I decided to focus on the lyrics category where users provided the most needs and pain points.
Define
Thanks to the diagram, I was able to draw the outline of the proto persona who was going to be the center point of my coming design.
Meet Céline. A young dynamic woman living in Paris and who enjoys going out with her friends. Music is part of her daily life and she listens to it on any occasion.
Then, I defined the user journey map of the proto persona with a specific scenario that happened when she invited her friends to have dinner at her place. The following map shows the different stages she goes through and the several feelings she has according to the different stages of music listening during the dinner.
The user journey pinpoints specific moments where the persona has distinct motivations, needs and faces some frustrations. All the pain points that generate negative or down feelings are actually opportunities for us to design and improve users’ experience.
These opportunities give us a basis to define our problem statement from which we’ll start to ideate and think of potential solutions.
I chose this opportunity “find a way to get lyrics directly and share in a group” to define the following problem statement:
Young busy adults need to find a way to share specific music information in a group in real time because they cannot fully enjoy the moment of music listening while looking for music information on other platforms.
In order to validate this statement, I defined three “how might we” questions that answered the problem. This is a best practice to keep in order to check the viability of the problem statement.
- HMW create a group synergy while listening to the same music?
- HMW provide music information in real time while listening to music
- HMW optimise music information flow while listening to the related music?
Finally, I defined a hypothesis statement:
We believe that providing music information in a group in real time for young busy adults will help them to fully enjoy music listening and create group synergy.
We will know we are right when 80% of users who switch from our app to another while listening will decrease to 50%.
Now that the problem was defined, I was able to start the ideation stage.
Ideate
In the ideation stage, potential solutions are brainstormed, then selected and developed. To brainstorm potential features, I used the Crazy 8 process to come up with as many features as possible. The technique is to very quickly sketch by hand one idea per minute.
Here, I’ve applied the process on the opportunities of the user journey map and the three HMW’s defined earlier. It was a way to refine the idea of the potential feature.
From this, I defined a user flow which was the happy path of the user. The below chart details all the steps the user will follow on the device from a starting point to a specific objective.
Here, the user opens the Spotify app to listen to a music playlist and use the karaoke feature.
Prototype
From the happy path, I sketched the low-fidelity wireframes. This is a quick hand sketched way to create the screens of your user flow.
From the low-fidelity hand sketched drawings I was then able to create the mid-fidelity wireframes on Figma. I started to use components and variants to fasten and create consistency in the “creation” of each screen of the happy path. Any change that was done in one component was also applied automatically on all the instances (duplicates of the component) and therefore on all the wireframes.
Once the mid-fidelity wireframes were done, I created a prototype on Figma and conducted 5 interviews to test it. Here are the main feedbacks.
- The overall user flow was understood and the concept was warmly welcomed
- However a real change was expected in icons placements and meaning
- There was a lack of understanding in some icons such as the “mute artist voice” icon, it was understood as a microphone by some of the testers
- Also, some users didn’t know if the feature karaoke was activated or not after clicking on the icon
I took all the comments into account and made changes in the high-fidelity wireframes:
- Two acknowledgment pages were created to start and end the karaoke session in order to structure the flow
- The “mute artist voice” icon was replaced by a new icon to be more understandable
- A “microphone” icon was added as a new sub-feature — after casting the lyrics on TV, the user can use his/her own mobile phone as a microphone, the karaoke feature is completely live now!
Following this stage, I did an Atomic Design inventory of Spotify and compile the elements in Figma to prepare the high-fidelity wireframes.
All the components and variants took me some time to be built but helped a lot to create the high-fidelity wireframes. Here is a mockup of some of the high-fidelity screens.
The high-fidelity prototype goes live here!
Next Steps
For the next steps, I would like to:
- Suggest novelties — Relate the algorithm to the karaoke feature so that suggested karaoke playlists are proposed while using the feature
- Provide more fun and accessibility — Be able to custom the background while lyrics are casted on TV so that users can choose to play the video clip or change background colors on their device
- Bring more conviviality and share a long-lasting experience — Add a recording feature so that users can record themselves, keep the recording and be able to share it with friends
Key Learning
- Community — When building high-fidelity wireframes of existing apps don’t hesitate to have a look on the internet to find all kinds or resources, I found a ready-made Spotify UI kit that was available in Figma Community it was so helpful!
- Mastering Figma little by little — Still need to look for more tutorials, resources and practice a lot to get used to the features and master the tool
I loved working on this project even though it was quite intense to come up with it in only 4 days (the due date was on Friday morning). As usual, can’t wait to learn and do more for the coming projects at Ironhack Paris!
Thanks for reading :)
