Netflix Song discovery feature

Why I decided to work on this project?

I was watching How I met your Mother in Netflix and I must admit , the soundtrack of the show is really good.

As I was watching, anytime a song was played in the background of any scene and I loved the song, I had to rewind by 10 seconds or pause the scene and search by whatever lyrics I heard or just use Shazam app in my phone to know which song it is.

After facing the same issue several times, I decided to design the song recognition feature in Netflix and see what everyone else think about it.

“ I wish Netflix had song recognition feature which displays which song is currently played in the background of any scene.”

Also, What if Netflix makes this act of discovering music easier?

  • Whenever a song is played in the screen, Netflix will display the song, the performer and adding to it, the option to listen it on Spotify and Apple Music.
  • It will improve the user experience in Netflix as the user doesn’t have to pause any scene.
  • Spotify can gain more users, as they can leverage on existing Netflix users.
  • As Apple devices sales are going down and they are focusing on strengthening their services, signalled by acquiring Shazam, this little change can help them to direct some users to Apple Music, thus revenue.

What is the main problem I am trying to solve?

Present Situation —

Currently when a song is played in any scene, the user have to pause the scene and search for the song online using the lyrics heard or Shazam the lyrics to recognise the song.

“ I want to design the built in song recognition feature for Netflix media player which will show the song currently being played without the user resorting to online search or Shazam.”

Who are the users I am solving this problem for?

  • Netflix Users

What’s my role in the project?

  • UX Researcher
  • UI Designer
  • Usability Tester

Solution to the problem

In built song recognition feature in Netflix media player.

Final Design of the solution

Design Process

In this project, once I realised the problem I am solving for, I created a quick mockup and posted it in Linkedin as Proof of concept testing method.

The reaction I got from my mockup helped me to iterate and come up the solution which was the best fit.

Design Process

Proof of Concept Testing

To understand if this feature is a need of several users or if it’s a p[roblem worth solving , I quickly prototyped a version and posted it in Linkedin to check the reaction of my connections. To my surprise, the post received very good reactions and I gathered lots of reactions that suggested the need for song discovery feature.

Reaction to the Post

59 likes and 36 comments

The reaction to this post was phenomenal and I got some really good feedback with most users stating this as a very good feature to enhance the user experience. Here are the reactions -

Comments I received on my post
  • Users believe this feature is really important.
  • Competitor Amazon does it on pause screen.
  • Users don’t want the song information to be automatically displayed on the screen. They would like to trigger or interact with the UI to know more about the song (In case of Amazon, the user pauses the screen)
  • Users want a non intrusive solution as compared to the mockup I suggested.
  • Some users automatically adding to it Spotify or Apple music list whereas few users raised the concern that it might over-populate/inflate their playlist.
  • Users wanted a small indication in UI if the song is recognised.
  • Some users feared that having a pop up may break immersive viewing experience.

User Research

To understand user’s existing knowledge and how they usually try to discover the music while using a streaming service , I interviewed 5 participants and also did exploratory research via googling.

​- They ask their friends

​- In youtube, in the video description, the background score is also mentioned.

Artist Name is mentioned in the description

​- In youtube, most users ask for the name of the song in the comments.

Many users ask for the song name in the comments.

​- They use Shazam App for discovering the soundtrack.

​- Amazon Prime users can pause the screen to know details of the ongoing scene like who are the actors and what song is currently being played. Since Amazon prime is a competitor, this method acts as a benchmark/ reference point while designing the solution.

Amazon X-Ray feature

Design Considerations

From the research data, 3 design alternatives were found.

​- As in Youtube, the users can scroll down further the screen to see all the songs in that episode. But this idea may affect the consistent watching experience as the user scrolls down.

​- As in Amazon Prime video, the user can pause the screen to see all the details but again the similar problem exist as it hinders the consistent viewing experience and also Amazon doesn’t give the option to add the track to Apple music or Spotify which most users felt is really good.

​- Having an option in the Netflix streaming player which the user can just click to view what song is currently being played. I decided to go with this option as the user doesn’t have to pause the screen and easily can add the song.

I tried several alternatives to test with the participants

Version 1

Version 1 with Lyrics on Screen. In this version, just below the Lyrics, a button appears which the user can interact with to know more about the song.

Version 1 with Lyrics on Screen. In this version, just below the Lyrics, a button appears which the user can interact with to know more about the song.
Version 1 — with no lyrics on the screen. In this version, a music note appears on the screen when a song is played in the background and the user can click to know more.

Version 2

In Version 2, the feature is integrated with the player controls area.

Keeping it simple and in consistent with the existing UI, all the soundtracks will be listed with the video player and appears on click .

The user just need to click on the soundtrack option to view the tracks , the context and the active track will have a white dash beside the name to show it’s active.

In Version 2, the feature is integrated with the player controls area.
Version 2 description

How users will discover this feature?

When the feature is released, when a song will be there in the background for the first time, the user will get a pop up (only one time)

User Testing

During the think aloud testing, I focussed on 3 aspects -

​- What do users feel about this option?

​- Is the feature easy to discover?

​- Is the feature easy to understand?

​The user testing results were favourable with users preference for this visual design of the UI and most users easily found the option when I gave them the task to find the option to view the soundtracks.

Learning Takeaway

There were three key learning takeaways from this project -

  • Keep asking yourself throughout the design process — “What problem are you solving?”
  • Proof of concept testing is really useful if you can quickly prototype a solution and you can get some really good feedback.
  • Be careful with use of icons and make sure that people get the meaning of the icon and to aid them, use tooltips or on hover options.
  • Often the easiest solution is the best solution and try to maintain design consistency before trying any new interaction design.

Thank you :)

Click on this link to go to my UX Portfolio.

Pritish Krishna Panda

Written by

UX Designer @Blueface. Minimalist, photographer and visual storyteller. Find me on www.pritishkpanda.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade