Spotify ‘Recognize Music’
Tune In, Turn Up: Your Music, Your Moment
Designlab Capstone 1: Add a Feature
Mobile Web Design | Solo UX/UI Designer | November 2024 - January 2025
Background
Spotify, founded in Sweden 2006, is an audio streaming service used worldwide. Users can access millions of songs, podcasts, and other media from artists and creators around the world. Spotify provides users with 2 options, users can access all of Spotify’s benefits for free but with ads. Or there are multiple premium plans where you can enjoy all the perks and go ad free.
The Problem
As an avid user, I’ve come to realize that Spotify currently does not have music recognition built into their application. When I’m out in public, and I hear a song I like, I have to Shazam it and manually add it to my Spotify playlists myself.
I am looking to improve and gain a wider audience base by adding a music recognition feature where users can find a song and add it to their liked songs / other playlists all within the application. Spotify users currently lack the convenience of identifying music from their environment using the Spotify app. When users stumble upon a song in public and want to add it to their liked songs and playlists, users have to go through many steps to achieve that goal.
Competitive Analysis
I began my project with some research, starting with a competitive analysis of four companies: Shazam, SoundHound, Music ID, and Song Finder. I examined their mission statements, target markets, pricing structures, key strengths, weaknesses, and unique features. Through this analysis, I found that, aside from Shazam, the other platforms were difficult to use and lacked reliability.
Understanding my users
I conducted five user interviews with individuals who use Shazam or other music recognition services, Spotify subscribers, non-subscribers of any music streaming service, and users subscribed to competing platforms.
The goal was to better understand their pain points, needs, and goals—specifically any challenges they face when identifying and saving music.
This insight would help inform the design of a seamless music recognition feature. From these interviews, I created an affinity map to identify common themes and recurring pain points.
Empathize
Building on these insights, I used affinity mapping to identify the most important user goals and frustrations to address. By analyzing the common themes from my research and interviews, I was able to prioritize key pain points and needs. This informed the creation of 2 user personas, representing the target audience and helping to guide the design of a more seamless and user-friendly music recognition feature.
Goals and Needs
To quickly identify songs without having to leave Spotify
Quickly add identified music into personal playlists
Present options to the user about what next steps they would like to take
A very clear indication when a song as been identified
Having the ability to one-click to search it on the platform
Frustrations
It takes too long for Shazam to find the song
Songs which are largely comprised of lyrics in a foreign language or have generic or unintelligible lyrics are difficult to search up
Finds a lot of music off social media and typically audio sources are often not credited to the correct sources, so it is difficult to find the original song
*Note: I built out 2 personas but was only able to focus on ‘Brooklyn’. This is due to this project having time constraints as well as only being able to focus on 1 feature being added.
Project Goals
I wanted to create a feature that not only keeps users engaged with Spotify but also makes their experience smoother and more enjoyable. I thought about how frustrating it can be to hear a great song and struggle to save it, so I focused on making the process effortless. At the same time, I had to consider the technical side—making sure the feature could work seamlessly within Spotify without unnecessary complexity. By balancing user needs, business goals, and technical feasibility, I aimed to create something both valuable and practical.
User Flow
I then created a user flow—a diagram that maps out the different paths a user can take to complete a task. This included both the main path and alternative routes users might take to reach their goal. I specifically focused on outlining the steps a user would follow to scan and identify a song within the app.
Low Fidelity Screens
Next, I sketched low-fidelity screens for mobile devices, bringing my ideas to life in a tangible design.
I focused on four key tasks: recognizing music, checking history, adding songs to a playlist, and exploring recommended music. The first three tasks were straightforward and designed to ensure a simple, user-friendly experience. However, I wanted to expand on the recommended music feature to highlight its potential impact.
This feature would suggest songs based on the track a user just scanned, enhancing music discovery within the app. Similar to Spotify’s curated playlists—such as Daylists and Daily Mixes—it would generate a personalized playlist tailored to the user’s latest identified song.
Mid Fidelity Screens
I then took the low fidelity wireframes and digitize them, keeping them in black and white to focus on building out the UI first. This allowed me to prioritize layout, structure, and functionality without getting distracted by colors or visual details. By refining the wireframes at this stage, I ensured a strong foundation for the overall user experience before moving on to higher-fidelity designs.
UI Kit and Branding
Spotify’s branding is already built out, however I found out that you have to pay to access Spotify’s exclusive font. Fortunately, I was able to find a UI kit to help me narrow down some colors and typography that were similar to Spotify’s original branding. With the help of Momitha Yepuri’s kit, I was able to select the
7 colors I ended up using in my frames and narrow down my typography to ‘Avenir Next LT Pro’. While building out my screens, I also created a UI kit with icons, album covers, navigation bars, and other interactive elements to streamline the development of my high-fidelity wireframes.
High Fidelity Screens
Taking the mid-fidelity screens and the branding I planned out, I built more detailed high-fidelity screens. I focused on refining the visuals, incorporating the selected colors, typography, and UI elements to create a polished and cohesive design. This step helped bring the concept to life, making the interface feel more realistic and aligned with Spotify’s existing aesthetic.
Usability Tests
After developing my high-fidelity wireframes, I conducted user testing with five participants to gather feedback. The goal was to observe how users navigate the screens, identify what works well and what needs improvement, and evaluate the overall ease of use and accessibility. This feedback helped me understand which aspects of the design resonated with users and which required refinement. Below are some key findings from the tests I conducted.
Mid Fidelity Testing
User testing revealed mixed feedback on the “recommended songs” feature—one user disliked it, while another found it valuable. Some users felt that providing more details about the scanned song, such as artist, genre, and album, was more important than recommendations. Others noted that the interface had too many options beyond the identified song, making it feel cluttered.
There was also some confusion around certain buttons and screens, though users understood them better after clarification. One user suggested redesigning the scanned song and recommended songs screen to be more intuitive, either by using a larger image similar to the “Now Playing” screen or highlighting the song within its album.
Despite these refinements, three out of four users appreciated the idea of a built-in music recognition feature with a history log, though two users suggested making the history more accessible without requiring a new scan.
High Fidelity Testing
User testing showed that three out of four tasks were rated as very easy, with all users ranking them a 1 on the difficulty scale (5 being the most difficult). For one task, two users rated it a 1, while three users rated it a 2.
One user found the task easy but mentioned they wouldn’t personally use the feature, another struggled due to a language barrier and relied on process of elimination, and the last noted that Spotify already has a similar feature when a song is playing. This user suggested renaming the button to “Similar to…” for clarity, referencing Spotify’s existing UI that categorizes songs by artist and similarity. Another user proposed adding a subtle animation, like a "breathing" effect, to draw attention to the primary button but acknowledged it might not align with Spotify’s design language.
Overall, users found the tasks intuitive, though one pointed out that while they may be easy for younger or experienced Spotify users, older or less tech-savvy users might struggle.
Final Revisions
After conducting usability tests, the last step was to take all the feedback received and make final revisions to my high-fidelity screens. I focused on implementing changes that would enhance clarity and usability based on user input.
The key revisions included:
Changing the tap-to-scan button into a moving element, such as a “breathing” or “loading” effect, rather than a flashing animation, to make it more intuitive.
Renaming the “Recommended for You” button to better align with user expectations and Spotify’s existing UI.
Final Screens
Challenges Faced
Working with an established brand had its pros and cons. While it was helpful to have colors and fonts already defined, finding and replicating those exact elements was a challenge. Building out every component to match Spotify’s UI was time-consuming, but it was rewarding to see the final design come together. I also struggled with animating certain elements, such as the "breathing" loading button, within Figma, as it's not really built for that kind of animation, and I didn’t have the time or resources to code it myself. Another major challenge was time—this project took longer than I had planned, which was unfortunate but also a learning experience in project pacing.
Future Steps and Other Prioritizations
In the future, I’d like to expand on features I didn’t have the time to develop. A key focus would be improving reliability, ensuring the feature can recognize niche songs, remixes, and unofficial tracks—aligning with the needs of my other user persona. I’d also explore making it accessible from the iPhone’s Control Center, allowing users to identify music within other apps seamlessly. Additionally, I’d work on extending its functionality to desktop and other devices for a more integrated experience across platforms.