SHAZAM: Explore music to set the mood.
CONCEPTUAL PROJECT PARAMETERS
Time: 3 Week Design Sprint
My Role: UX Designer
Team: Brandon Tsukano, Kathleen Cho, Allie Kent
Tools: Figma, Google Suite, Voice Memos, Jira
CATCHING SMOKE: Shazam prevents melodies from becoming lost.
Forgetting a song is like trying to hold onto smoke—just when you think you have it, it slips away. Shazam, however, captures that fleeting melody, bringing it back to life and making it tangible again. Shazam preserves something beautiful from being lost. Working with them, I had the opportunity to improve this powerful tool by enhancing its opposite–discovery.
THE PROBLEM: One tap and users turn away.
Unfortunately, users spent less than 30 seconds on the app, suggesting they’re primarily using it to identify a song before immediately switching to another app. Our goal, aligned with Shazam’s, was to design an interactive experience that keeps users engaged on Shazam longer
WHAT WE FOUND: Music, a vibe curator.
We set out to understand users' relationship with music, their motivations and behaviors for discovering it, and their behaviors in collecting it.
1
Music helps users bond with others.
2
Music is a user’s companion that follows them throughout the day.
3
Music enhances a mood.
4
Music gives users more knowledge about culture, trends, and the past.
Our research helped us build two user personas who depend heavily on music. Meet Harmony and Shayna.
WHO SHOULD WE CHOOSE AS OUR PRIMARY?
We chose Harmony as our primary persona because her challenges closely aligned with our research.
Harmony creates a ripple effect through Shazam: she discovers a song, plays it at her events, customers Shazam it, and then share it with their networks. This cycle amplifies the reach of Shazam, making Harmony's music discovery more impactful than Shayna's personal use, as it influences a broader audience.
HARMONY'S PROBLEM STATEMENT
Harmony needs more music to add to her library that fits a specific theme for her event that she is hosting because she wants her business to be known for immersing her guests with authentic cultural experiences
COMPETITORS: WHAT TO DO WHEN THEY DON'T HAVE AN EDGE?
Harmony gave us this great information for what needed to be solved, but the competitive analysis I conducted for our team helped us dig deeper.
Competitors: Spotify, Soundcloud, and Soundmap
I listed key features that each of the apps had and determined what purpose it served for the user.
Shazam already shares many elements of these apps such as: artist page, top songs, similar songs, albums, country chart, etc. Soundmap's Map and Soundcloud's sound bar inspired our final version.
We knew that Shazam focused on discovery so we wanted to maintain that vision. So, what do you do when they already have what their competitors have?
You look through Harmony and Shayna’s eyes.
SHAZAM'S CURRENT DISCOVERY FLOW: How Shayna and Harmony Feel
.png)
Hmmmm...
What song matches international wine mood...?
Whaaaat???
Shazam had so many feature to find songs?
😯
🤔
Why is it so hard to find the music that matches the mood? Am i thinking too much?
😭
THE MILLION DOLLAR IDEA:
Rearranging Information Architecture to Introduce a New Feature
Card sorting taught us that Shazam was lacking an explore section that users wanted to see.
So, we engaged in a design studio, and I came up with the million dollar idea.
-
Have Harmony explore from the very start.
-
She's looking for international songs. What better way to "explore" than through a map?
SKETCHING OUT THE MILLION DOLLAR IDEA
REALIGNING WITH BUSINESS GOALS AND HARMONY'S NEEDS: Increase app time and get Harmony to her goal.
FEEDBACK
After solidifying my million dollar idea, and Harmony's discovery process, we engaged in a peer review that opened our eyes to what we were still missing:
1
Address the core business goal of keeping users longer on Shazam rather than switching to Spotify
2
On our “Explore Page” we only provide top Shazams. These only point to popular music–how will Harmony find the authentic music she’s looking for?
3
The “Explore Page” was too chaotic.
To address these issues, we engaged in another design studio. We sketched again.
And again.
And again.
And again.
OUR CHANGES
.png)
.png)
Home Page
Explore Page
Regional Page
Artist Page
TEST FINDINGS: Clearer UX Copy
With a better flow for both our user and Shazam, we set out to do a Usability Test to learn how users effectively use filters to find and add mood-matching songs for a French wine tasting event to their Spotify via Shazam.
From this test, we identified key findings and categorized issues as low, mid, or high priority based on how it influenced their ability to add music to their playlists.
01
CLEARER UX COPY
⅗ of users did not select “Regional Music” for the “French Wine Night” because they were unclear about the category's meaning.
02
MOVE AND REDEFINE FILTERS
5/5 users were unclear about the functions of “Based on Your Taste” and “Feeling Adventurous?” filters.
03
MAP INTERACTION
Users expressed that they wanted to interact with the map to find a location.
04
THE "ADD TO PLAYLIST" METHOD IS TOO LONG
During testing, users expressed that the “Add to Playlist” felt too long and they had to keep going back and forth, every time they liked a song.
THE "NEW SHAZAM": Accessibility and User Satisfaction.
Accessibility:
To maintain Shazam’s style, we used a white background on most pages, a blue home screen, and a black background on the artist page.
Given these contrasts, I leveraged my special education background to ensure all content was legible and met WCAG guidelines for different-abled users.
OUR IMPROVEMENTS: HI FIDELITY AND ACCESSIBILITY
Home Page
Artist / Playlist Page
At the end, Harmony is ecstatic that her process of discovering songs she wasn’t familiar with was made so simple with Shazam! She now has a whole playlist for her "French Wine Tasting Event".
FINAL TAKEAWAYS AND NEXT STEPS: Significance of Retention Rate, Long Chats, and Iterations
MEASURING APP SUCCESS
Though the redesign of this app didn’t launch, to track success and impact, we would have monitored the following:
-
Elevated app ratings, indicating users satisfaction with the app, overall
-
Increased click-through-rate, Indicating users discovered and used more features
-
Increased app usage to at minimum, one minute, to determine whether the initial business goal to increase time was met
-
Boost in sign-up and download rate to assess app loyalty, a sign of user satisfaction and recommendations among friends
-
Boosting the amount of time users use the “Explore Feature”, showing the feature’s value in increasing time on the app
NEXT STEPS
1
Add Explore Mood
Add “Explore Mood” on the Explore Page - We’d like to add an "Explore Mood" category to the “Explore” page, using our adjective database to further help users like Shayna reflect and Harmony match songs to their desired mood.
2
Expand "My Friends"
Expand on “My Friends”- While not a focus for the primary user flow due to time constraints, we’ve included a “My Friends” feature for our secondary persona Shayna and plan to expand it further.
3
Continue Testing UX Copy
We plan to test the revised UX copy, especially on the “Explore Page” to ensure clarity and effectiveness, addressing initial feedback that the titles were unclear.
FINALS TAKEAWAYS
01
Overall, I learned that our long discussions were crucial for the certainty of our iterations and implementation of our design. I am thankful for such great group mates who constantly questioned whether we were meeting our users’ needs every step of the way.
02
Through this project, I was able to clearly draw the comparison from education that keeping accessibility at the forefront for all designs makes great designs for everyone.
03
We created two affinity maps, 8 rounds of problem statements, and seven rounds of sketches. I am now aware that all the work we iterated and produced was not a waste of time, but rather gave us more clarity to create a successful design, being well worth the extra work put in.