Adding a new Lyrics Feature to Spotify
Branding ✦ Adding a Feature
Summary - Student Project
I added a translation and romanization feature to Spotify’s Lyrics to promote their ongoing strive for diversity and inclusivity, as well as promoting music to an even larger, international audience.
(BTW: This is a conceptual project- I am in no way affiliated with Spotify!)
Role
UX/UI Designer
Timeline
Feb 2023- March 2023
Tools
Figma, Figjam, Otter.Ai, Optimal Sort, Maze
Designing for Spotify Users
Problem
The benefit of Lyrics on Spotify is limited for international music listeners.
With no translation or romanization options available, the ever-growing amount of Spotify users who listen to international music have no choice but to leave the app to find those translation options elsewhere.
Solution
Providing users with translated and romanized lyrics!
Providing users with more lyric options enables them to comprehend the song’s meaning, even if they are unfamiliar with the language. This feature establishes a unique way for users worldwide to connect with international artists.
✧ New Feature Alert
A pop up alerts users of the new feature. You are now able to easily switch between different translations!
✧ View the Lyrics of Your Choice
By clicking on the toggle, users can view just the translated lyrics of their choice. They also have the option to add a new translation, with a link taking them to the Musixmatch site.
🔍 Discover
Project Background
Spotify’s collaboration with Musixmatch allows users to contribute lyrics and translations
Spotify is the most popular music streaming app out there right now. It’s well known for having many customizable features for users to enjoy and curate to their own music interests. One of its most recent and highly demanded features, the Lyrics feature, allows users to read and sing along to time-synced lyrics. This is possible with Spotify’s current collaboration with Musixmatch, a leading music data company where users can contribute lyrics and translations to songs.
Background Research
Researching Spotify’s Lyrics Feature
Given the task of adding a feature to an existing product, I wanted to see if a lack of translated lyrics was a real problem that users faced. I discovered that translated lyrics seem to currently be a beta feature Spotify has tried out and is only available in particular regions in the world.
An example of Spotify’s beta feature of translated lyrics. Unfortunately, it is currently not available everywhere.
I decided to then focus on Romanization, as this would be a completely new feature many users that listened to international music wanted.
Secondary Research
Why focus on the needs of international music listeners?
Spotify themselves say that a quarter of their users worldwide actively listen to artists outside their own culture or country (approximately 94.25 million users monthly)!
Currently, Spotify has pushed for and is promoting culturally diverse music on its platform more than ever.
In recent years, there has been an explosion of streaming for K-pop, or South Korean Pop. Around 8 billion streams of K-pop are streamed a MONTH on Spotify.
The music industry is becoming more and more international.
This is a large part of the market that would be brought to Spotify and benefit from Romanized lyrics.
Researching online, I found that Romanization is a feature that is already highly requested.
💡 Key Insight
To prevent users from leaving the Spotify app to search these lyrics, we should implement a romanization feature where there is an option to have romanized lyrics for languages that have non-roman alphabets.
User Interviews
Speaking with Spotify Users
I wanted to directly ask Spotify users for their opinions to see if they had similar issues to what users said online about wanting improvements on the Lyrics feature. I created a screener survey on Optimal Workshop to make sure my interviewees used the Lyrics feature on Spotify and listened to international music.
15 survey participants:
The majority were female in their mid-20s-early 30s.
Most were moderately satisfied with the Lyrics feature and used it frequently to sing along to songs.
I interviewed 4 participants who passed the screener survey and created an affinity map to identify common user wants and pain points related to the feature.
Interview Insights
Users use Spotify daily and mostly on their phones.
Users want English translations of songs from different languages (mainly for K-pop) as well as Romanized versions.
Most users would use the Romanization feature to sing along.
Users want more options to customize which lyrics they see (translated, romanized)
Users find Spotify very intuitive, and often don’t even realize the implementation of new features.
Users expect to see the new feature somewhere near the current Lyrics feature. One user mentioned getting a pop-up about a new feature.
“I really love actually using lyrics. Just helps me to memorize it. Sometimes I do want to memorize a song too when I go to a concert. I want to sing along!”
Interviewee 3
“I was thinking about how a lot of the songs that are not in English, […] and I'll be like, I need to read the translation. I feel like, ‘Put another tab or something.’ Let me see it like what they're saying in English.”
Interviewee 2
Competitive Analysis
Scoping the Competition
📝 Define
User and Business Goals
Visualizing our Goals
Though Spotify has a version of translated lyrics as a beta feature out and I want to pivot my focus on romanization, I decided to also include translated lyrics in this feature since it aligns with users’ needs.
Persona
Focusing on our User
I created our persona, Megan, based on the characteristics and needs of the interviewees since they all had common problems and insights. She represents users that are very active on Spotify, and want to see more options for translations in the Lyrics.
Brainstorming
Coming Up with New Ideas to enhance Lyrics experience
Based on my How Might We questions, I came up with ideas for how I would go about designing the new feature. I placed stars on the ideas I believed were the most relevant and useful based on the research conducted.
Storyboard
Creating our User’s Story
Keeping our persona in mind, I created a storyboard showing how adding this new feature would satisfy Megan’s problem of not understanding the Lyrics shown to her while listening to her favorite international artists.
User Flow
Determining the screens to be created
I created a user flow of the user starting from opening the app to how they would get to the new feature. This helped me determine the future screens that would be created, such as the pop-up alerting users of the feature and the different ways the user can access the new feature on their own.
🎨 Design
Low Fidelity Wireframes
Staying on brand
Keeping Spotify’s branding in mind, I wanted to keep the new feature consistent with how Spotify already looks and its micro-interactions. When coming up with the feature based on feedback from peers and brainstorming, I decided to keep it simple with a small button added to the Lyrics tab. Users would be able to notice the notification naturally and try it out.
UI Kit and High Fidelity Wireframes
Utilizing Pre-Existing UI Kits
I utilized a Spotify UI Kit from the Figma community, which saved me a lot of time from having to design the frames from scratch. Using this kit and my own Spotify account for reference, I was able to come up with the new design.
In these screens, I kept in mind that it would be unlikely that every song has a translation since these are lyrics that would have to be manually uploaded by users on Musixmatch and be approved.
Along with using the UI Kit, I created my own new components to be added to the new design. I heavily referenced what the current Spotify layout looks like, taking examples from the ‘Settings’ and ‘Current Device’ options on mobile.
🎁 Deliver
Usability Testing
Testing Our New Feature on Current Spotify Users
After creating a working prototype based on my user flow, I conducted a usability test on Maze to gain users’ insights. I went for a remote, unmoderated route as our users are already familiar with Spotify, and I wanted to see if regular users could intuitively understand the new feature with little guidance.
We tested 6 participants that use Spotify and listen to international music. Users were instructed to interact with the prototype as if they were usually using Spotify.
✧ 100% were able to understand the purpose of the new feature
✧ 100% of users expected to see the last translation they chose when they navigate to a different J-POP artist
✧ Overall score of 4 out of 5 in intuitiveness
Iterations
Users wanted a way to add more languages and needed more context.
After making the iterations, I conducted a few more remote, unmoderated usability tests. This time,
100% of users were able to successfully toggle between viewing the translations of their choice.
💭 Reflection
What I Learned
This project showed me the importance of design constraints when it comes to designing for a company that already has established branding, as well as how important UX copy can change a user’s understanding of a feature. Getting to know users’ experiences and frustrations with an app they are already familiar with was insightful, and I was able to discover new pain points I would have never thought of while using the app myself. Spotify is always constantly improving on itself- someday soon there will eventually be more widespread, accessible translations and romanizations available!
Next Steps
I would like to explore what transitioning to a different song would look like for this flow.
Congrats on reaching the end of my UX case study! 🎉
Thanks for investing your time and attention in understanding my work and design process, I truly appreciate it. Interested in another case study? Check out my other work!