Spotify
A concept “identify songs in real time” feature to
make music discovery faster and easier
![spotifyframes.png](https://static.wixstatic.com/media/da7428_93346e27ea12439db7fff6e66de0906a~mv2.png/v1/fill/w_786,h_490,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotifyframes.png)
Background
Have you ever been out and about, discovered an awesome song, quickly Shazam-ed it, and promised yourself you'd add it to your Spotify playlist, only to later forget? This project introduces a recommendation feature, inspired by the Spotify community's feedback and their journey in discovering music.
Role
-
UX/UI Designer
-
UX Researcher
Project Type
Student Project
​
Disclaimer: This case study is meant to be exploratory learning experience on a product I love. Not affiliated with Spotify.
Timeline
4 weeks
(80 hours)
April - May 2023
Tools
-
Figma
-
Figjam
-
Mural
-
Notion
Problem
Spotify users cannot easily identify and add new songs to their playlists.
Users encounter a bit of hassle when trying to recognize and include songs they like in their playlists while on the move.
![spotifygoals.png](https://static.wixstatic.com/media/da7428_f4670abecf9a48f184727036d6ae9e20~mv2.png/v1/fill/w_913,h_336,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotifygoals.png)
Understand users
A preliminary survey, involving a broad range of 30+ Spotify users, formed the basis for a user-focused approach in enhancing music discovery. The insights obtained helped address user concerns, creating a more user-friendly and enjoyable Spotify experience.
I conducted interviews with 5 users to grasp how they discover new songs daily and I set these objectives:
-
Understand users’ overall experience using Spotify
-
Understand user’s thoughts on the current music discovery journey
-
Uncover everyday pain points with music platforms
Key Findings:
![spotifykeyfindings.png](https://static.wixstatic.com/media/da7428_6355b66fbe5349dc83bb36a34a4601f6~mv2.png/v1/fill/w_917,h_333,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotifykeyfindings.png)
What does the market offer?
The existing market mitigates some issues, but no single product satisfies all user objectives.
I performed a competitive analysis of other popular music streaming platforms and third-party apps that people use for their music needs.
![competitors of spotify](https://static.wixstatic.com/media/da7428_340234b5318d42b593b2427b69c84b8a~mv2.png/v1/fill/w_905,h_374,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/direct.png)
![](https://static.wixstatic.com/media/da7428_dfbdedfd154d40778481384f6cbc6340~mv2.png/v1/fill/w_900,h_354,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/da7428_dfbdedfd154d40778481384f6cbc6340~mv2.png)
Design Opportunity
Add a feature to meet user needs where the market falls short.
User interviews and market research have uncovered an opportunity to design a feature tailored to users' specific needs: enabling real-time music identification directly within the Spotify app.
How might we?
HMW design a feature that enables to easily identify and save new music in order to enhance the music discovery and playlist creation experience?
Primary Feature: Add a “Spot” feature in the Spotify mobile app
Users will be able to use this feature to identify songs in real time by using audio recognition technology in a matter of seconds.
HMW design a feature that enables users to identify and add new songs to their playlists when audio identification fails?
Secondary Feature: Improve UI of lyric Identification
If audio recognition fails, users can manually enter lyrics from a song to search on Spotify. Surprisingly, many interviewees were unaware of this existing feature. Therefore, the design will concentrate on improving the user interface (UI) to boost awareness and usage of this function.
Who are the users?
Meet Tammy! She embodies the traits, goals, needs, wants, and pain points identified in my user research.
![spotifypersona.png](https://static.wixstatic.com/media/da7428_569b3d1eaef14769a035987fd0e6811e~mv2.png/v1/fill/w_785,h_569,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/spotifypersona.png)
User Journey
Developing a user flow allowed me to better visualize how users will engage with the new feature in scenarios where it successfully identifies a song and in cases where it's unable to recognize the audio of a song.
![Spotify User Flow.png](https://static.wixstatic.com/media/da7428_e04fba56f31e4e89958cf6d7a912ac96~mv2.png/v1/crop/x_122,y_174,w_7698,h_4877/fill/w_912,h_578,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Spotify%20User%20Flow.png)
Time to design!
Using the user flow as my guide, I sketched out a wire-flow diagram and highlighted the key points of user interaction on each screen during the low-fidelity design phase.
![](https://static.wixstatic.com/media/da7428_9d1d170dbc72474eaee47869a841c5fa~mv2.png/v1/crop/x_109,y_76,w_4889,h_4171/fill/w_907,h_774,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/da7428_9d1d170dbc72474eaee47869a841c5fa~mv2.png)
Learn Spotify design system
For the successful integration of this new feature into Spotify, I must understand and adhere to the current design system.
The "Spot" feature was designed and added to the main navigation bar, providing users with easy one-tap access to activate audio identification.
![Successfulspot.png](https://static.wixstatic.com/media/da7428_a0293d0ad0e94d288c22050f9c598d05~mv2.png/v1/fill/w_920,h_470,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Successfulspot.png)
In situations where audio identification fails, we introduced a "Lyrics" filter for a better song search experience. You can conveniently access the "Lyrics" filter through the search icon, improving accessibility and user-friendliness. These enhancements enhance the overall user experience, offering alternative song identification methods within the Spotify app.
![beforeandafter.png](https://static.wixstatic.com/media/da7428_3586dd788a87456996bb361a9ada369f~mv2.png/v1/fill/w_772,h_561,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/beforeandafter.png)
![image 35.png](https://static.wixstatic.com/media/da7428_be05f362cde14349ae8b065efd2e3685~mv2.png/v1/fill/w_914,h_900,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/image%2035.png)
Testing Users
Successful, no iterations needed!
I tasked five participants with completing the following actions to validate the design and flow:
​
1. Use the audio identification feature to identify a song playing in real time
2. Use the lyric identification feature to identify a song when audio identification (Spot) fails
![image 36.png](https://static.wixstatic.com/media/da7428_79aa0616900141eaaccb96caac25178b~mv2.png/v1/fill/w_912,h_331,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/image%2036.png)
Reflection
Learnings
-
Music brings happiness to individuals, and it's crucial that users can enjoy their music seamlessly with the digital products they engage with.
-
Following the established Spotify design system provided me with a clear roadmap for integrating the new feature into the app interface.
Next steps...
-
After implementing the feature, conduct usability testing on the live Spotify app to validate the design and gather feedback for final adjustments.
-
Evaluate the lyric search feature's discoverability and user-friendliness within the Spotify interface and consider necessary enhancements for user awareness and utilization.