Case study hero image
←   Go back to homepage

Spotify Karaoke

Adding a karaoke feature for Spotify users to enjoy a night in
introduction

Spotify Karaoke is a design-led project to implement a unique interactive function to an existing application.

my role

Project scope

A team of 3 designers (Rachel Nhan, Stephanie Flordelis, Savannah Ling). 1 month (Mar '24 – Apr '24).

skills & tools

User Research, Interaction, Visual design, Prototyping & Testing

Problem Discovery

Spotify wants longer user retention and the people want to sing their hearts out.

We conducted research related to the overall user satisfaction of Spotify's listening experience. From our research, we concluded that many users wished for a karaoke feature to be added on to their current lyrics screen. This fun, interactive game-like element would align with Spotify's mission "to unlock the potential of human creativity."

‍
The project outline encompassed:

  • Understanding the user goals and needs through the AEIOUT Framework
  • Ideating UI elements that fit the brand identity
  • UI design and development for a game interface
HMW increase usage of Spotify apart from streaming music? HMW we gamify the app?
Our Solution

A gamified and competitive karaoke feature to elevate a group night-in

For our final project, we developed a prototype of a karaoke feature for users to play and connect with their friends.

  • Access a full gameplay through a secondary screen (desktop, TV, projector, etc.)
  • Engage and challenge users in a competitive karaoke game that simulates the feeling of a real karaoke session.
  • Seamless connection to Spotify's UI that makes the transition into the game that much easier.

Below you will find a preview of the launch of the feature in a promotional-style video.

The Process

Research & Ideation

As a user, the result must be seamless, intuitive, and easily accessible.

Throughout our research, we looked into adaptive, semantic, and physical constraints to implement into our process that would assist in creating a cohesive design.

Questions that came about from our initial research are as follows:

  • How do we seamlessly implement a new game element onto the application screen?
  • How would a user know about the feature?
  • How would we use other technology to create a group activity?
  • What would the UI look like to feel separate but unified with Spotify's brand identity?
User Storyboarding

Visualizing the ideal candidate for this karaoke feature.

In this scenario, we have our target user who only accesses Spotify but wishes to connect with her friends in a new way. At this stage, our goal is to visualize the design requirements that we have to support in order for this kind of scenario to happen. These ideas would then lead us to the development phase.

Defining Persona & Goals
“I wish I could interact with my friends more on Spotify.”

Cassidy Smith

25, burnt-out grad, bored

Their goal is to have fun with their friends without going out of their way to find it.

Photo by Anne Peres on Unsplash

Project Development

Building on the existing brand identity and creating a seamless addition.

Considering the questions we had initially, we had to find inspiration and study Spotify's UI patterns and styles to begin to design a new feature. Some style patterns we noticed were the following:

  • Large green primary button supported by an outlined secondary button.
  • While the primary colours are their iconic green and black, there is flexibility in colour and design styles for their unique features.

I want to be able to use the feature easily.

I want it to still feel like Spotify.

User Testing
Final Wireframes

Karaoke Set-up

Game Start

Game Progress + Completion

Project Takeaways

Seamless design integration takes practice and true attention to detail.

While this was a more creative project, there were still valuable insights in developing an accurate UI to Spotify's existing brand. User experience also benefits from a consistent design so there was a thorough testing period to see the accuracy of how it would display on phones and large screens.

‍
Some key takeaways from this project are:

  • Presenting the product is just as important as the development of it: Creating a visually engaging presentation through videography can help users understand better by seeing the product in a real-life scenario.
  • Key attention to detail is critical when working alongside an existing brand identity.

‍

See my other work

Copyright © 2025 Rachel Nhan
ProjectsLinkedinEmail