A music recognition app that supports users to discover all types of music in 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.
Team
Allie Kent
Brandon Tsukano
Kathleen Cho
Role
Lead UX Designer
UX Researcher
Duration
2 weeks
Figma
Jira
Adobe
Tools
Background
A design to extend app usage
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.
Diverge
Learn and empathize with the user about 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"
What users see
Users don't see the search icon
My Music
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
Question
Curious if Shazam is more than "record & search"?
Heuristic
I wanted to uncover hidden gems and potential issues in Shazam, so I conducted a heuristic evaluation. I identified areas that might confuse users and prevent them from enjoying Shazam's unique features. The core issue? The information architecture hid the hidden gems from users.
Ideations and Sketches
From the task flow, I learned that the "Explore" feature had to grab attention and keep users hooked. I sketched “Song List,” “Song Page,” and filters to make sorting easier. After some peer reviews and tweaks, we added new features and moved filters to the "Explore" page for clarity. Finally, we split the design into 4 pages creating 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 wolrd
Explore
Exploring the Shazam concept, “Discovery” to next level
Mockup
An adjustment to improve the design
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:
Task
To find a song appropriate to the "French Wine Night" Event and add the song to the playlist linked to Spotify.
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
We wanted to keep Shazam’s style and add our own 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.
All contrast are passing the A11y contrast check.
Button and Icon Size are all WCAG standard size.
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.
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.
Added description for each categories
Moved setting right next to search bar.
Swapped setting with Home Icon.
Prologue
Possible next step for improvments
-
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.
Takeaways
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.
-
Usability Test - I want to conduct another round of usability tests to ensure the UX writing hits right into the point.
Outcomes
Quick Explore
Users can find unfamiliar music through "Explore" and quickly find music they want to try. Allowing the users to stay longer than a minute in the app.
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.
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
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.
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.
Primary Persona?
Harmony - The Curator
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.
