A “song recognition” feature
Spotify Id
Project // Spotify Id Case Study Role // Product Designer Timeline // 4 Weeks Toolbox // Pencil +Paper, Sketch, Adobe Suite
Elevating the Spotify experience by introducing a song identification feature including recognition through singing or humming
As a streaming music service, Spotify is the group leader, and it wants to stay that way. For this reason, they want to improve engagement and retention in the app.
To do that, they wanted to integrate a new feature requested by their users. I helped them define the best way to move forward in that direction and provided them with a prototype integrated seamlessly within the rest of the app.
Needfinding
Often, I find myself hearing a song on the go and think, "Oh, I love this track, who sings this? I want this song". What do I do next? I get on my Shazam app to identify the track. Satisfied in the present moment, I tell myself, "I'll add it to my Spotify playlist later." Nine out of ten times, the song never makes it to my playlist. Honestly, I get distracted easily, and the idea of using two applications to complete a closely related task throws me off.
Everyone has different habits, so I was curious to see how other Spotify users felt on this topic. Interestingly enough, when I searched the Spotify Community board, I found many users suggesting developing a built-in song recognition feature like Shazam. Some say they would love to have their song identified directly within Spotify and are confused about why this feature doesn't exist. Others mention they haven't used Shazam often but would utilize the song recognition tool more if Spotify provided the same "apparatus." It seems I am not the only one interested in a one-stop music app.
Market Research Takeaways
Overall, Direct competitors, Spotify, Youtube Music, AmazonMusic, and Apple Music, lack a built-in microphone song recognition feature. Even though integration is available through apps such as Shazam, users need to take extra steps to add songs to their music libraries—this adds a disruption to the user experience. Spotify is a leader in the music streaming market and has an opportunity to remain at the top by keeping its current user base engaged with innovations and ways for them to personalize.
In contrast, both indirect competitors, Shazam and SoundHound, offer a platform specializing in music recognition. The apps focus on giving users an experience catered to them specifically.
Lyrical features are strengths for direct and indirect competitors. Popular current attributes include searching by lyrics, x-ray lyrics, behind the lyrics, live lyrics, and humming lyrics. Lyrics are an integral part of the streaming experience and have a strong link with music subscriber loyalty.
User Research & Insights
Convenience, layout, affordability, and sociability are among a few of the features that keep interviewees loyal to Spotify. Shazam and Siri are the most famous music identification apps, and participants use both in conjunction with Spotify.
One-step playlist and music identification features prove to be the most popular needs among users. When asked why these features are essential, users mentioned it's because they have busy schedules and, even when discovering or listening to music, crave instant gratification. Further customization of playlists, intuitive interface design, and accurate song recognition prove necessary app engagement and retention attributes.
Good brain chemicals that release in our brains can be even more powerful when listening to new music. Whether through features like Spotify's discover weekly, social sharing, or good old word of mouth, participants desire new music suggestions.
Lyrics are at the center of the streaming music experiences. When asked about what new features they would add to the Shazam app, most participants were very interested in various lyrical features.
Post research, I validated that Spotify users want an intuitive "Shazaam-like" feature integrated within the app.
This feature will eliminate time wasted on downloading secondary apps, linking, or technical difficulties, increasing engagement and retention, and keeping Spotify at the number one spot for discovering and listening to music.
I further broke down user's needs, wants, desires, and pain points, which led me to think about some design opportunities.
Design a built-in microphone song identification feature including the below elements:
Clean and straightforward UI design
Digital and accurate footprint technology
Hum, sing, or type lyrics for identification
Live lyrics and info upon track identification
Instant social sharing of identified track
Intuitive + customizable playlist options upon track identification
Based on key findings and analysis from all research phases, I noticed Spotify's users include busy individuals that like to experience pleasure or fulfillment without delay or deferment. To achieve a reliable and realistic representation of this key audience segment, I started to build my primary persona around these characteristics.
Danielle is a creative soul. She's curious and likes exploring but quickly moves on if a task is too time-consuming. Her motivations include creating custom playlists, discovering new music, and sharing it with her family and friends. She needs an all-in-one intuitive music streaming service complete with a song recognition feature for a quick way to discover new music.
Utilizing research synthesis and Spotify's current platform, I created an app map to visualize information architecture correlation and make sure the new Id feature embeds smoothly with the rest of the app. The Id feature's customized main screen would enable users to tap a key button element to identify their track. Post identification, they would have the option to add it to a playlist, share it, or obtain lyrical info.
To spot dead ends and understand the steps required to get a user from intent to completion, I created a few linear task flows. These flows included
Identifying a song and adding it to a playlist
Identifying a song by singing lyrics and then sharing it with a friend
Finding new music based on a previously identified track
Proving to be a dynamic feature, I felt Spotify Id required an icon design for users to access at the bottom navigation bar. To keep on track with Spotify's current aesthetic, I illustrated some of their present icons and added new ideas before digitizing them.
User feedback revealed interest in designs 1A, 2, and 3. After deeper discussions, users felt options 1A and 2 could be mistaken for a camera feature and be confusing. Option 3 was most "intuitive" and therefore chosen as the winning icon design.
Low-Fi
To brainstorm and iterate ideas, I sketched a few variations of three critical screens for the Spotify Id Feature. With research and key findings in mind, my objective was to create an intuitive design that enables speedy task completion. I used Spotify's current interface and design system as a resource to guide my illustrations and make sure the added components are embedded smoothly. I chose the winning designs based on feedback and a combination of the most vital elements.
Pre-Id Screen - I chose the first option because it includes essential components and isn't too overwhelming.
Id/Button Design Screen - I went with the Middle illustration for this one because the loading bar is intuitive, and the design is minimal.
Post-Track Id Screen - Here, I chose the first design because of easily reachable touch targets and simple design aesthetic.
Mid-fi
I created mid-fidelity wireframes and annotations for the new Id feature's key screens to visually elevate layout and component details.
Below are some key added elements:
Pre-Id Screen
A minimal, intuitive button that highlights the sing/hum feature
Quick access to previously identified tracks
Instant Id access from the main navigation bar
Id Screen
Content notifying the user song recognition is underway
Loading bar for live progress tracking and engagement
Post-Id Screen
Easily accessible icons for quick task completion
Expandable screen allowing users to access lyrical info and customized playlists
Hi-Fi
In preparation for user testing, I upgraded wireframe illustrations to High-Fidelity UI screens. These included quality and authentic images, typography styles, color, and more. Since time was constraining, I did my best to work smart. I used Spotify's design system, interface, and other resources to ensure I could create high-quality designs without doing a lot of rework. My ultimate goal was to set up and test with a realistic prototype to get top feedback for the next iteration.
Usability Testing
To gather valuable feedback on designs, I created an interactive prototype for target users to test the following flows:
Identify a track using the new Id feature
Add identified track to a playlist
Share the identified track
Find Music suggestions based on previously identified track
Participants were provided a link via Craft Invision to test the prototype on their mobile devices. They were asked to carry out a few tasks and encouraged to think aloud while I asked a few questions, observed, and recorded notes.
Testing Insights & Iteration
Post testing, I synthesized research into an affinity map to evaluate where the prototype was successful and where it needed to be improved.
All in all, participants felt the navigation structure was "effortless and "very easy" to comprehend. They understood the purpose of each screen and intuitively tapped their way through tasks. They had a few visual design and content edit suggestions for better visibility and comprehension. An additional pain point included concern over what would happen if Spotify couldn't identify a particular track correctly.
Post sorting and prioritizing user feedback, I created some design iterations for the next round of testing. My goal was to alleviate pain points and provide clarity for a seamless user experience. Some improvements included refining verbiage, increasing font sizes, adjust design layouts, and providing a reporting solution for incorrect track recognition.
To be continued…
I had a lot of fun working on the Spotify Id project. I especially enjoyed the challenge of designing for an existing brand and learning how to use Spotify's current design system to fit information architecture and other elements smoothly within the present application.
If I had the opportunity to continue work on this project, I would love to dive a bit deeper into providing a more customized experience within the Id feature.