Making Shazam Super
Shazam UX Redesign Concept // General Assembly UXDI Program
“Our mission is to help people recognize and engage with the world around them” — Shazam’s mission statement
What makes music discovery super? Shazam, the leading song discovery app since 1998 (yes…1998), has been a loyal tool for many music lovers, but since the rise of top discovery apps such as Spotify and Apple Music, it has fallen into the graveyard of many users’ phones. My team and I took on the challenge in our User Experience Design Immersive course at General Assembly to redesign Shazam’s interface and experience, expanding its perception as a single-button tool, into a super music discovery toolkit.
The Team
Role: Project Manager & Lead Designer
UX Team: Katrina Allick, Vicki Chen, & Antonio Montemor
Scope: Two Week Sprint (December 2020)
Tools: Figma, Draw.io
The Brief
While initially just a simple utility, Shazam’s app has begun to use the data they collect to help users discover new music, follow artists, and even export their Shazam’d songs to a Spotify playlist.
Despite the overwhelming amount of human-centered data Shazam has collected on music taste, Shazam has done very little to leverage this information into useful features. Research indicates that the most common use case of Shazam lasts less than half a minute — suggesting that users are using the app to identify a song, then immediately bounce to a different app to collect or listen to the song.
The Challenge
Shazam wants to increase time in their app by providing services to help connect users and their music — but they’re not sure how.
Our team set out to unpack and synthesize answers to the following questions:
- What can Shazam do to increase the value of using their service to map its user’s taste in music?
- How do people like to receive music recommendations? Can it be done more effectively through an algorithm, or is human input more effective?
- Is geolocation data useful to users of Shazam? Is there a way to use location data to predict, record, or in other way map music data?
- What role does social networking play in sharing and enjoying music? What’s worked for other platforms, and what hasn’t?
Our exploration of these questions helped us define Shazam’s lost identity, determine its user demographic’s problem, and design a solution that met the balance of both the business and user’s needs.
Phase I: Research
Our team, while all Shazam users, realized that none of us had actually dusted off the little blue guy in awhile. When opening the app, we were both amazed and troubled by its new UI design. What was once the familiar pulsing blue button, was now an extensive song discovery/streaming/Apple Music app? While our first impressions led to many assumptions, we unfortunately did not represent the perspectives of billions of people, so we built a plan to help us funnel and breakdown three key phases of research: the business, the competitors, and the users.
Business Research
A majority of Shazam’s revenue comes from a referral system. When a user “Shazams” a song, they are then linked or “referred” to stream or purchase the song via major providers, such as Apple, Google, and Spotify. Shazam then receives a portion of each purchase for the referral.
In 2018, Shazam was acquired by Apple and in the past few years has generated partnerships with major forces such as Spotify, Snapchat, and Instagram, merging the worlds of social media and music streaming to evolve this referral system and therefore their profit.
Streaming now accounts for 80% of U.S. recorded music revenues.
— “The Future Of Music” in Forbes Magazine, 2020
What tickled my team’s brain is: why is Shazam still around? Apps like Siri and Google Voice can be prompted by voice to discover a song in the same capacity, Spotify now has a lyric searching function, Snapchat has now incorporated a song tagging function in their app, and Tik Tok has become a global leader in song/artist discovery leading to millions of streams. Our team looked further into the features of some of these competitors to help uncover why Shazam remains the 7th most popular music app in the iOS app store.
Competitor Research
Our competitor research was broken into two methods: plus/delta & element analysis. Shazam lives in a niche market through its referral system, where it does not live as a streaming service, but guides users to streaming services. For that reason, we all agreed to include both competitive and comparative services.
Shazam’s direct competitors include Sound Hound, Siri, and Google Voice all which compare to Shazam in the fact that they are voice activated. After full analysis we decided to funnel our focus into the comparison of Shazam to Spotify. While Spotify is viewed as a streaming app, it is currently the most used music collection and discovery app.
Moving back to our guided questions, we chose to focus on aspects of collection, music taste mapping, and social networking. We came to the conclusion that what sets Shazam apart from its competitors is its plethora of (misused) human-input geolocation data. The algorithm of song recognition is used in its direct competitors but not in Spotify, whose biggest delta is that it is not geolocation specific. This realization made us think, can Shazam become a social media app?
Additionally, how can we compare it to other social apps, such as Snapchat, that use geolocation at the core of its user experience? This brought us into our feature inventory chart where we decided to compare and contrast Snapchat, Spotify, and Shazam. What UI features Spotify and Snapchat included, Shazam seemed to mostly lack. To support these assumptions, we went to the source, the users.
Phase II: User Research
Site Map
Before jumping into user interviews, we did an audit of the current sitemap, pictured below. At first glance, the sitemap is dense and folded with multiple options for the user to choose. This gave us further insight that perhaps the reason most users view Shazam as a simple utility and have not explored its other features, is because these features are lost within the map and disorient the user.
We concluded that the four biggest pain points were the following:
- The current site map almost hides the search function and its capabilities
- The user currently has to do at least 4 actions (taps) just to search lyrics
- Suggested songs are buried within the app, there is no sense of global navigation or orientation for the user
- Complexity of the app doesn’t match Shazam’s brand personality (simplicity)
User Interviews
We recruited five random Shazam users (a mixture of old & new) to ask them a series of questions ranging from their experience using Shazam to their approach to recommending and being recommended music. After each interview, we performed a simple usability test where we asked each user to join the zoom call from their phone, open Shazam and screen share, then perform the below two tasks:
- Discover a new song, and find a recommendation based on that song
- Find one of the top songs being “Shazamed” in your location
We proved the results of the usability tests to be inconclusive as the internet connection between the phone, zoom call, and app made Shazam completely dysfunctional (thanks Covid!).
While the results were unable to be properly synthesized, we were able to draw some incredible insights on the users’ impressions of Shazam overall.
+ “Shazam allows me to like be curious and discover, like more obscure things that I may not otherwise come across or know how to find”
— “Shazam does exactly what I need it to do and not a whole bunch more… I think any more buttons would be a detriment”
From our interviews, we were able to synthesize key insights through an affinity map and develop four “I” statements that would further define our user persona. We were also able to confirm the assumptions of the sitemap that I previously listed. Overall, users found Shazam confusing and overwhelming due to the amount of features and lack of navigation. Users knew Shazam for what it did at its core, tag a song, and had interest in nothing further. How could we implement changes to Shazam without deterring users?
Phase III: User and Business Research Synthesis
User Persona: Round 1
Our first impression of our interviews led us to develop the below problem statement:
[User] needs a way to explore new music because it’s a personal and rich way of connecting with her social network.
With the concept of “mapping” music taste in mind, we drew from the inspiration of Snapchat’s UI. We led with the assumption that sociability was the core lacking of Shazam’s interface and developed initial sketches to help us align our initial visual ideas.
After a good night’s sleep, we took a step back and realized we were not listening to the core needs relayed in our interviews. After our daily standup, we decided to broaden our focus, concluding that if we completely changed the identity of Shazam it would deter its loyal user base.
User Persona: Round 2
With further ideation, we developed a new direction and problem statement. Our user persona Cadence represents the overall connection between observations we made in our affinity map, which was that Shazam’s user needs a clear and exciting way to discover new music.
Cadence needs a fun way to discover new music so that she may evolve her personal taste and connect with her world in a vibrant manner.
Solution Statement
Taking our user’s problem statement, needs, goals, & frustrations, we categorized the below questions to help us identify a solution statement that reflected both the user’s and business’s needs:
With these questions in mind, we believe that by creating a stimulating & novel way to expose users to music, we will see an increase in user engagement, enthusiasm, and therefore streaming, which will increase Shazam’s profit.
Phase IV: Design
Sketches & Ideation
Following the initial sketches, our team initiated a second design studio where we took all of our exciting findings and individually brought our thoughts to paper.
When we came together to give feedback and synthesize ideas we were able to ideate and merge together aspects of all of our ideas. We decided to focus our UI redesign on two key concepts:
- A clear three-screen navigation system
- A new primary feature called Super Shazam
Super Shazam allows the user to “Shazam” a song in a new way. When a user “Super Shazams” a song, they can set preferences to discover other top
“Shazamed” songs based on these preferences. This new feature allows the user to discover music catered to their exact preferences and creates a fun way of engaging with the world, all made possible by the geolocation data of other Shazam users.
Style Guide & Moodboard
When considering our design, I took the lead in integrating Shazam’s style guide with our ideations. The statement, “less is more”, became our best friend. Shazam’s users are loyal because they enjoy the simplicity of its use. With that being said, we aimed to build a design based off of the following qualities: clean, inviting, energetic & simple.
Our main goal was to incorporate Super Shazam as a “sidekick” to Shazam, so it needed its own identity through color and gesture, all with the simplicity and visual identity of the current Shazam button UI. Shazam’s royal blue evokes calmness, and familiarity, a pulsing gesture that echos a water drop in a pond when pressed by the user. Super Shazam, to us, meant an evil twin of excitement and energy, so a golden and electric yellow felt purposeful.
Mid Fidelity Wireframes
Using the ideation from our sketches, we deemed the userflow to incorporate three swipable starting paths: previous Shazams (left), Shazam (middle), and Super Shazam (right). As Apple acquired Shazam, we wanted to incorporate familiar gestures to the Apple UI, which led us to create a swipeable global navigation, similar to the global navigation of the iPhone UI.
Maintaining simplicity in design, we wanted to incorporate gamification, color, and gesture into Super Shazam. From Antonio’s sketch design concept, we wanted to emulate the shooting of a slingshot in our animation.
For the “My Shazams” page, we chose darkmode to create a sense of neutrality and familiarity to major streaming apps such as Spotify and Apple Music.
With all this in mind, we developed a mid fidelity prototype ready to test. In the below wireframe you can see the at-large flow of the user.
Phase V: Usability Tests & Findings
We recruited and tested four new people, to complete the below two tasks:
- Discover a new song (based on genre) with our new Super Shazam feature.
2. View your past “Shazams” and pick a song to share to your Instagram story.
50% of users completed Task 1 with some slight confusions, mostly related to the navigation within Super Shazam and labeling of buttons.
75% of users completed Task 2 very quickly, confirming overall navigation design.
100% of users wanted simple onboarding.
100% of users said they would use Shazam more with the new Super Shazam feature!
Some positive insights:
- Architecture: felt familiar to the brand and intuitive in its simplicity.
- Gamification: animations are playful, fun & engaging.
- Super Shazam: creates a clear space to continually explore in the app in a way that’s unique to competitors.
“It’s good for me that there’s a place to discover within Shazam without me leaving.”
Some negative insights:
- Needs Onboarding: currently lacking direction of what tools do.
- Copy: needing simple tweaks and labeling for further user guidance.
- Settings: needing further refinement to indicate settings for specific parts of app.
Overall, users were excited by the animations and considered the app to be a discovery toy that they would engage with often, but we needed to rethink how to increase the readability of the new Super Shazam feature and what it actually does for the user.
Phase VI: High Fidelity Prototype & Testing
Finally, our high fidelity prototype. While the UI might seem familiar to the mid fidelity, what sets it apart is the details. We primarily re-designed the UI of Super Shazam settings and results pages, as well as brought more detail and significance into the overall settings of the app.
Most importantly, we incorporated an (optional) onboarding process. When any user new or old re-opens Shazam, we strategically give them an overview of new features and encourage, but do not force them to finish the onboarding. We kept the onboarding brief (4 screens) to not deter users from exploring the app.
After testing three users, we gained the below insights:
- 100% of users found the onboarding necessary.
- 100% of users were not able to fully define Super Shazam, but would use the app more to explore music.
Overall, users found the app design to be straight forward, convincing, and exciting. The use of gesture, color, and simplicity drove user approval up & encouraged one to want to discover more. Our biggest take away is that we needed to refine user experience of the onboarding to fully equip our user.
Phase VII: Next Steps
I believe that our design successfully addressed the need of our user to create an exciting way to discover new music, the need of the brand to create a more engaging experience, and the need of the business to drive more external streams. The next iterations of our design would make the onboarding more intuitive by making it interactive, so the user learns the gestures as they go. Additionally we feel that the UI deserves further development in terms of making copy more readable in size and providing breathing room between elements.
Ideally we would bring Apple Watch into beta with our new design, with the confidence that gestures would be even more friendly for on-the-go daily interaction with Shazam.
Conclusion
This two week sprint was an incredible and honorable challenge. As it was my first UX team project, I learned how to find my specific strengths and own them. I saw my natural leadership put into action as Project Manager and Lead Designer and further developed my skills in building an atomic design system, as well as learning from my team members when to focus on the big picture/scope of project and move on from the nitty gritty details.
The biggest lesson I learned is to constantly challenge and silence my own biases. My team’s initial pivot from our original problem statement completely defined the successful outcome of our project, and for that I am grateful.
Thank you so much for taking a look through this case study. I hope you found it insightful & fun and continue to follow my work.
Link to clickable prototype for your pleasure!
