top of page

Spotify

A concept “identify songs in real time” feature to
make music discovery faster and easier

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

Solution

Introduce a real-time song recognition feature for instant song identification and saving.

This feature aims to improve the user experience, offering seamless music identification within the app, eliminating the need for third-party tools like Shazam, and streamlining the user journey.

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

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

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

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

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.

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

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
image 35.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

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.

bottom of page