Music Recognition

Spotify

TLDR:

Problem: Current Spotify premium members are unable to identify songs using their microphone within the application, forcing them to turn to outside applications like Shazam, or Siri.

Solution: A hands-free music recognition feature within the Spotify mobile app, giving Spotify premium users the ability to identify songs and artists through audio input alone — without ever leaving the app.

Process & Reflection: Through user interviews and usability testing, I was able to validate this features existence within Spotify’s current ecosystem. Refining UI placement, interactions and user flows, then solidifying post-recognition actions.

Full-Length Case Study

Background

Spotify is the leading music streaming, podcast listening, and audiobook library. Yet users are still not able to search their database using their microphone, audio samples, and recordings.

Research Goal

Why do Spotify members have to use another application or service, to find the name of a song, or find the artist behind it?

Research Objectives & Methodologies

  • When dedicated Spotify members want to know the name of a song, or the artist that created it, they should not have to use another application or service to deliver them the answer they’re looking for.  Users should be able to have a seamless listening and exploring experience within Spotify.

  • Spotify users that are multitasking, or on the move, should still be able to identify, and explore without taking their hands away from their main focus.

  • Some users struggle to explore and discover new sounds because they are unable to capture and identify songs using their microphone, leading to missed listening opportunities.

5 Participants were interviewed

  • 4 Current Spotify premium members

  • 1 Non-Spotify user

What did we learn?

User interviews gave us the following insights:

  • None of the participants have a dedicated music recognition app, or service that they use, when they need to find a song they either ask Siri, or have to rely on asking people they know.

  • Out of the 5 participants, only 2 of them use their own music in the car, the remaining 3 choose to listen to the radio while in the car.

  • On the topic of finding new music, 2 of the 5 participants said they love to find and actively seek out new music, while the remaining 3 said that while they enjoy finding or getting new music, they are unsure of how to actively seek it out, and most of their new music comes from the radio, or music playing in the background of other media, I.E. Tv Shows or Movies.

  • All of the participants agreed and explained that they feel as if the process of finding new music, or finding the name of a song/artist can become tedious.

  • When asked “Does the idea of identifying songs through Spotify or other streaming services align with your expectations of the app’s functionality” all the participants agreed and said that they would think that there is already a feature where you could ask the application to list out the Artist, and name of a certain song already.

How might we develop a system that enables Spotify users to find new music, while keeping them on the application, and hands-free?

Project Goals & Feature Set

Business Goals:

  • Differentiate Spotify from other music streaming
    services

  • Increase subscription growth (Feature only available to Spotify Premium members)

  • Reinforce Spotify as the leader of all audio related mobile applications.

User Goals:

  • Have useful post recognition actions

  • Be able to trust this feature with their data/microphone usage

  • Lead users to explore and discover new music based on
    results

  • Reinforce when the feature is active/not
    active so users are aware

Technical Goals

  • Make sure this feature would not put strain on Spotify servers, or the performance of the mobile application

  • Continuously improve feature by expanding data base

  • Be able to detect artists/songs from almost all widely spoken languages

Initial Planning

User Testing - How do participants feel about this concept, and the initial designs?

5 Participants were interviewed, 4 that actively use Spotify Premium, and 1 that has never used Spotify.

  • Multiple participants commented on how the feature was built into the already existing “Search” tab of the app. 

  • Two participants gave positive feedback, indicating that they like keeping the bottom navigation bar the same, as adding a new tab might cause confusion, misclicks, or dissatisfaction. 

  • The one other participant explained that they understand how adding a fourth tab on the bottom navigation might interrupt the flow that Spotify currently has, but in their eyes they thought that if this feature was going to be fully detailed and fleshed out, it deserved its own home, and tab on the navigation bar.

  • Every single participant agreed that, on the “song result” screen, the essential action icons (like, add to playlist, download song, search again) were incredibly bunched up and needed more room, or to occupy different parts of the screen.

  • Two participants were pleased with the widget screens, expressing that if it were real, they would add the widgets to their own home screen, as it would be a quicker way to access the function.

  • Multiple participants were confused as to why the song identification symbol (the waveform) was at the top of the search bar (in replacement of the camera icon/function that Spotify currently has), which goes to show that Spotify users are unaware of the current “Spotify codes” feature they have.

  • Multiple participants were surprised that the Spotify mobile app does not already include/have this feature.

First round High-Fidelity Wireframes

Usability testing - How can we positively iterate upon these wireframes?

5 Participants were interviewed and had access to the wireframes, producing the following results.

All 5 participants completed every single task, in under three minutes. No errors, or blockers found.

Clearly the feature works as intended, and blends seamlessly into the pre-existing Spotify landscape, majority of time spent during the tasks was just the participants looking around, seeing what had, or had not changed, or just exploring the Spotify mobile layout if they don’t use the application themselves.

Interview takeaways:

  • Change layout of the song result page, focus on the essential buttons for next steps, make sure they are all distinct, have enough space between each other, and are in a section of the screen that makes sense.

  • Work on titles / descriptions for function, make it easier to remember, more catching, and a little bit more creative. 

  • Somehow incorporate or reinforce that users data is safe and secure, the microphone will only be active when the feature is active, etc.

  • Work on widget versions of the feature, make it more easily accessible, potentially add a siri like function(?)

Final High-Fidelity Wireframes

Reflection:

Reflecting back upon my progress, it was clear that what halted it the most was being a perfectionist, trying to make sure that I was emulating the base apps design system and style perfectly. 

Right out of the gate trying to create a one-to-one copy of the application, finding that I was also getting hung up on taking the results/advice from user testing and interviews, and properly implementing it into my designs and making useful revisions.

The entire interview process was still quite new to me at this time, so I was finding it difficult taking data and results, understanding what each of it means, how these results came to be. Then transferring it all into efficient design, style, and function choices.

You can improve the function of an already existing application or system multiple fold while staying within pre-existing limitations. I absolutely adored working within Spotify’s design system, and using their style, hopefully there will be other opportunities similar in the future.