Shazam
A music recognition app that helps users discover any type of music from around the world.
Challenge
Shazam is a music recognition app used by millions of users worldwide. The business goal is to create an interactive design that enables the users to stay longer in Shazam because currently time users spend less than 30 seconds on the app to recognize a song, so our goal is to improve the time.
Background
A design to extend app usage
Role
As the leading UX Designer, I focused on visuals and designing using WCAG guidelines to make it useful to all types of users.
Duration
2 week
Tools
Figma, Photoshop, Jira
Card Sort
Since Shazam's information architecture is similar to an experience of a treasure hunt, I set out to uncover what users expected to find under its four main features. After running unmoderated card sorting with 5 users, I synthesized the data, highlighting common patterns and key insights to help us design a clearer, more intuitive information architecture so the user can find their treasure faster.
Outcomes
Quick Explore
The new feature "Explore" increased user engagement to over 1 minute, surpassing the 30-second mark.
Regional Music
Users can expand their music choices by finding music from different regions across the globe.
Easy Add
The new design allows users to add songs directly to a linked playlist.
Diverge
Learning the meaning behind music
Interview
We were curious about how people feel about music, so we dove deep into their experiences. I spiced up our interview questions, ensuring the conversation stayed lively and engaging. After several tweaks, we connected with five individuals: passionate music lovers and musicians.
Key Finidings
Bond
Music helps users bond with others.
Companion
Music is a companion that follows users.
Mood
Music enhances users mood.
Knowledge
Music gives users more knowledge about culture, and trends.
Home
What users see
Users dont' see "My Music"
My Music
Users don't see the search icon
What users see
Key Questions
-
What role does music play in your life?
-
Do you think music has played a part in shaping who you are?
-
Tell me about the last time you found a song you really loved.
-
Could you tell me about a memory you associate with music?
-
Could you tell me about an experience that you associate with a memory?
-
Do you listen to music from other cultures?
-
Tell me about the last time you found a song you really loved.
-
Do you like to share music with other people?
Converge
Imagining the personas
Search
Too many steps to navigate
Waste of space
Shazam Charts
Simple and beautiful but user cannot go back to home
Heuristic
To uncover hidden gems that could address Shazam's core issues, I conducted a heuristic evaluation. I identified areas that could confuse users and hinder their enjoyment of Shazam's unique features. The main problem was that the information architecture concealed these hidden gems from users.
Question
Wondered if Shazam is more than "recognizer"?
Ideations and Sketches
From the task flow analysis, I realized the "Explore" feature needed to capture attention and engage users. I sketched ideas for the "Song List," "Song Page," and filters to simplify sorting. After peer reviews and refinements, I added new features and relocated filters to the "Explore" page for clarity. Ultimately, I split the design into four pages to create a seamless experience.
Key Finidings
Home
A screen to navigate to different features and search for song.
My Music
A screen to browse saved songs and prefered songs.
Search Result
A section to flexibly search song or the user.
Explore
A page to discover music from all over the world.
Explore
Pushing the Shazam's feature, "Discovery"
Usability Test
We aimed to make it easy for users to add songs to their "French Wine Night Playlist" by simplifying how they discover and understand the music. To allow users to find unfamiliar music from different countries, I focused on maintaining consistency and created a navigation bar, homepage, and song list for better flow while refining the UX copy and layout. As a result, our users left some key insights:
Interaction
Users are expected to zoom into the map when tapping the Explore section.
Home
Explore
UX Copy
Users couldn't choose our intended category due to lack of description for each sections
Use of Filters
Users prefered browsing through the listed songs first rather than using filters. They also, did not understand the filter option "feeling adventurous" and " Based on Your Taste."
Song List
Song Added
Endless Loop
Users would not leave this page to explore other songs due to its convinience to find more songs.
Styleguide
I wanted to keep Shazam’s style and add a twist, so I followed their official guidelines while adding our unique touch.
Use the same blue and gradient rule as the style guide.
Use the same tone of voice as the style guide.
Button and Icon Size are all WCAG standard size.
Added sound map to visualiz the frequency.
All contrast are passing the A11y contrast check.
Accessibility
I improved visibility using WCAG guidelines and designed the sound signature for people with hearing problems. Furthermore, I adjusted the spacing for legibility and readability using the guidelines.
Mockup
An adjustment to improve the design
User Usability
Many users were confused with the descriptions so we updated them. Then to give flexibility, we redesigned the navigation bar so users can visit back to the home page while keeping the settings next to the search bar.
Moved setting right next to search bar.
Added description for each categories
Swapped setting with Home Icon.
Takeaways
-
Discussion and Meeting: Overall, I learned that long discussions, while time-consuming, were crucial for ensuring the certainty of my design preparation and implementation.
-
Iterations and Sketches: It's important to iterate as many times as necessary to design with more certainty.
Next Step
-
“Explore Mood” on the Explore Page - I want to focus on solving Shayna's problem, which would benefit users who use music for reflection and also be helpful for Harmony when she wants to wind down her cafe with a chill playlist.
-
Expanding the “My Friends” feature - My next step is to develop the "My Friends" feature, an option for users to expand music through songs discovered by friends.
Age: 36
Occupation: Cafe/ Bar Owner
Location: Los Angeles, CA
Scenario
Harmony, a cafe/wine bar owner, is planning a "French Wine Night." Harmony wants to pair the wines with music to enhance the experience but is worried about choosing the right songs to match the mood.
Harmony - The Curator
GOALS
-
Wants to immerse guests
-
Wants to set the mood for her gatherings
NEEDS
-
Needs to get a taste of the sound and feel of a song.
-
Needs a better way of searching for songs.
-
She needs to discover a variety of songs.
Age: 21
Occupation: Student
Location: New York City, NY
Scenario
Shayna, an active streamer who is finding herself through music. She is an introverted extrovert who feels that music is the best way to enhance any experiences.
Shayna - The Self Explorer
GOALS
-
Wants to share and create memories through music.
-
Wants a way to sculpt herself into a cultured person
NEEDS
-
Needs to music that reflects her emotions.
-
Needs variety of music
Prologue
Possible next step for improvements
Primary Persona?
Harmony - The Curator
Problem Statement
Harmony needs more music to add to her library that fits a specific theme for the event she is hosting because she wants her business to be known for immersing her guests in authentic cultural experiences.
Why Harmony?
Harmony is not just trying to satisfy herself, but also those around her, making her problem more impactful, rather than Shayna, only using it for herself, as a B2C.
A Cycle of Share
Harmony discovers a song through Shazam and then plays it at her events, a few customers Shazam the songs and share their favorites, and from their networks others may shazam their favorites, and so on.
