Spotify Mic
Spotify is a popular audio streaming and media services provider. It is mainly known for its music streaming feature. This case study proposes further expansion into the karaoke space, in which many Spotify users have expressed interest in.
Roles
UX/UI Designer
Responsibilities
Competitive Audit
Wireframing
Prototyping
Team
Individual
Duration
3 weeks
Idea Synthesis
As a music lover, I wanted to address a common issue faced by others in the music community.
So, I turned to Spotify Community and found a post that resonated with me. With nearly 400 votes, it earned a place in the community's 'Good Suggestion' section.
Other users also expressed support for this feature in the comments.
As someone who belts out tunes in the car every day, it’s only fitting that I take matters into my own hands…
Understanding the users
Insights from Spotify Community indicated that there are two main kinds of user groups.
Those who want to sing karaoke.
Those who want to listen to the instrumental version of songs.
User Personas
Representing user groups
I created two personas for this new feature to better understand and address the diverse needs of my end users. These personas provide insights into user behaviors, preferences, and pain points, which allowed me to create a more user-centric and enjoyable experience.
Defining the problem & ideating solutions
While we have two main user groups that seek different experiences, what lies at the core of their needs is the same.
Problem
Users want the ability to turn off vocals in any songs.
Competitive Audit
Analyzing competitors
To understand the existing market landscape, I conducted a competitive audit to identify the strengths and weaknesses of my direct and indirect competitors.
Apple Music
Strengths
Easily switch between cover and lyric screens
The karaoke mode remains activated when you switch songs
Users can adjust the volume of the backup vocals
Lyrics are separated my vocalists
Growth Opportunities
There's no indication when users should start singing
Cannot rotate horizontally
Doesn't automatically activate the karaoke mode even when users go through the Sing category
Strengths
Has many songs to choose from, including recent releases
Some songs are available in multiple keys (in separate videos)
Has indicators that help people know when to start singing
Growth Opportunities
Non-premium users have to deal with ads
Users have to do multiple searches to find the different keys, which are limited to some popular songs only.
Strengths
Users can duet with original singer
Can duet or sing in a group with friends
Can record karaoke sessions
Have bars that represent notes in songs, which helps users follow along and improve singing skills
Growth Opportunities
Outdated UI
Task flows are too complicated, as a new user, I was overwhelmed
Key Features
Addressing market gaps
Drawing from the competitive audit and user insights, I identified the following key features that not only address the problem but also make Spotify Mic stand out from the competition.
Turning off vocals with one click
Easily turn off vocals when users want to sing karaoke or simply listen to the instrumental version of songs.
Countdown indicators
Help users know when to start singing.
Key adjustment
Adjust key to fit user's vocal range so they can sing more comfortably.
Horizontal view
Allow users to view lyric in bigger size with less distraction.
Prototyping solutions
Task flow
Mapping user interactions
Based on the opportunities from the competitive audit, I created a task flow to visualize the user journey of this new feature. By mapping out each step users would take, I refined navigation and streamlined interactions to ensure the product is both functional and user-centric.
Low-Fidelity Wireframes
Brainstorming design solutions
I brainstormed the layouts for Spotify Mic, using the task flow as a guide. I began by sketching some layouts by hand and then translated them into digital wireframes. During this process, I took into consideration how to introduce this new feature to users as well as how to ensure users can easily tell when karaoke mode is activated.
High-Fidelity Wireframes
Incorporating brand elements
Introducing Spotify Mic!
Users can be introduced to this new feature via various ways. One of which is through a distinct button on the home page.
Inspired by bright neon lights, which are often associated with karaoke, I designed the Mic button with bright green border to distinguish it from the rest while also adhere to the well-established Spotify brand.
It's karaoke time!
There are countdowns throughout the song to help users jump in at the right time. The fading of white text over colored text is in sync with the speed of the track to help users stay on beat.
Rotate your phone for an even better experience!
This message was designed with accessibility in mind. The combination of text and icon ensures that everyone can get the meaning, including those who might not have seen or known this icon before.
Karaoke settings
Users have the ability to select lower, original, or higher key. The vocal volume can also be adjusted depending on the user's preference.
In karaoke mode, the vocal is set to 0% and the vocal control is visible by default. Users can choose to change these in the settings as shown here.
New look, same aesthetics
To differentiate yet still maintain consistency with Spotify's lyric page aesthetics, the karaoke page employs an inverted color scheme—using colored text on a black background instead of the traditional black text on a colored background. The white text indicating the current line in the song is kept as is.
What's next?
Conduct usability testing
Continue to iterate on UX/UI
Support multi-artist songs
Allow users to create their own karaoke playlists and share with friends