spotify feature

Date
2022
Design Type
Product Feature
Purpose
Portfolio Project
This feature encourages user engagement by allowing users to easily access the music’s chords/tablature while they are listening to the song in order to reduce the need for utilizing external apps or websites and increasing the user’s engagement with the product.
MY ROLE
The entirety of this project was completed by myself with the guidance of my experienced mentor.
Ideation
Research & Analytics
Information Architecture
Wireframes
Usability Testing

Challenge

‍Currently, there is a disconnect between listening to a song and simultaneously accessing the chords for the song which allows the listener the ability to play along/learn the song.

goals

- Allow users to feel more engaged with the product while using this feature.
- Seamlessly integrate this design with Spotify's award-winning branding guidelines.

RESEARCH

recent news

Spotify has recently released a feature that allows users to access the lyrics to the song they are listening to while it's playing. This feature shows Spotify's ambition to increase user's interaction with the platform and lays an excellent foundation for my solution hypothesis.
"You Can Now Find the Lyrics To Your Favorite Songs in Spotify. Here's How."
Go to article

competitive analysis

Spotify’s main competitors are Apple Music and Amazon Music, respectively. My research shows that Spotify outperforms its competitors in multiple areas which makes it the top contender for this feature.
Click image to enlarge

user interviews

I wanted to know how users were currently learning how to play songs, and if listening to the song while learning it was beneficial. Participants were chosen based on their use of a music streaming app and ability to play an instrument.

william

Bass/Acoustic Guitar Player
"I like to teach myself the songs I hear, but I like to cross reference it with the verified chord charts."

sarah

Electric Guitar Player
"I use the chord charts and add my own style on top of them."

anna

Acoustic Guitar Player
"Listening to the song makes it so much simpler to learn while I'm playing."
Insights
• Users agree that listening to the song while playing their instrument is very helpful when they’re trying to learn how to play it.
Participants value credibility when it comes to the chord charts to ensure they’re playing the song correctly.
All participants who use Spotify understand the interface and could easily visualize how the feature would be integrated in the existing platform based on the existing lyrics feature.
One of the participants who plays multiple instruments mentioned the struggle of having to go to multiple sites to find chords for the instrument they're playing at the time.

personas

These persona cards reflect the thoughts of actual Spotify users and their desires for the product. These were essential references in designing the interface.

storyboard

This story board shows the potential this feature has to provide the user with a sense of excitement playing along with their favorite songs.

DESIGN

low fidelity wireframes

Since I'm adding this feature to a product that is popularly known for having a clean, intuitive interface it was vital that I made the feature look as seamless as possible by basing the featuring components off of existing components within the product. I decided to utilize the desktop version of this product based on user's statements during research saying they typically look at the song's chords on a laptop or display monitor while trying to learn a new song with their instrument.
1. Icons/Buttons
Spotify has buttons on the top of the song’s lyric page that allows users to access a Friend Activity menu and a button that allows the user to access their account quick links. I decided to follow their design and add an additional button here to allow the user to access the chord charts.
2. Chord Diagram
I needed an area where users could access the full chart of the chord’s diagrams in case they came across a chord they haven’t heard of or seen. I followed how Spotify activates this side menu when you click the “Friend Activity” icon in order to match their style.
3. Change Instrument
For the sake of adaptability and growth I wanted to show what it could look like if Spotify decided to add an option where users can change the instrument they’re playing. I used their Device Menu as my inspiration for this since it was the most similar in terms of functionality of the feature.
4. Bottom Icon
When Spotify added the lyrics feature they included a microphone at the bottom of the screen that would activate the feature. Since users were able to easily adapt to this addition I felt it was the best place to add the chord activation button.

high fidelity wireframes

Primary Lyrics Page
I decided to use "On the Water" by Steve Martin for my wireframe because it is the song I'm currently learning, and it has a diverse set of chords. Spotify automatically generates a background color that coordinates with the song. So I started with color-matching the background that Spotify chooses for my song choice and added my feature design to their foundation.
Chords Activated
As the song plays, Spotify highlights the section that the user is currently hearing as the song moves along. I followed that design and included what the chords would look like with that change. Along with the chords being displayed above the lyrics, the guitar icon at the bottom changes to the brand’s color to indicate to the user that the button is activated. This is a direct reflection of what occurs when the lyrics are activated.
Chord Diagrams
These charts were inspired by Ultimate-Guitar.com’s diagrams since that is the most popularly used site used amongst guitar players for accessing chord charts. I felt it was important to include the song’s tuning and capo location at the top of this display since that plays a vital role in how the song is played along with the chords.
Change Instrument
As mentioned before, I used the speaker menu as a foundation for this element. This approach enables the inclusion of a wider range of instruments while also expanding the user base that would make use of this feature.

TESTING

I wanted to make sure guitar players could easily access this feature, and if the interface was intuitive enough that it fit in well with the existing product. All of my participants were guitar players with varying skill levels.
Participants could easily see how this feature fits in with the existing product which aligned with my hypothesis.
All participants agreed that this was a solution to the problem that was initially stated in this case study.
Some participants provided feedback regarding the visual clarity and readability of the chords display. They suggested improvements such as using contrasting colors to enhance legibility.
Some participants noted that the feature lacked certain expected functionalities or options, such as the ability to access the chord chart by hovering over it for instant access.

revisions

feature activated
Users noted that it was difficult to see a difference between the lyrics and the chords so I added a darker background to the chords that would make them stand out more.
Original
Revised
chord diagram
Users mentioned changing the color of the text within the green areas for accessibility purposes.
Original
Revised
chord highlight
If a user wanted to see how a singular chord is played they have the ability to hover over the chord with their mouse in order to access the chart.

FINAL DESIGN

process reflection
Adding a feature to a product that is widely known for clean, intuitive design motivated me to further my skills as a designer. I learned how to incorporate my process into an existing design system and stay within their parameters. I was also encouraged by other musicians during this process hearing how helpful this solution would be. Matching the font was the only part of this process that I was unable to achieve. In the future, I will most likely pay for that resource in order to integrate my design more seamlessly.

PROTOTYPE