Shazam: From Tool to Toolkit

Vicki Chen
7 min readDec 24, 2020

--

“Our mission is to help people recognize and engage with the world around them” — Shazam, mission statement

Shazam is a simple utility that tags, or identifies, unknown songs and is often used in environments outside of the home. On top of this feature, the app also offers a platform to stream music. However, this has placed Shazam as an unsuccessful competitor to Spotify, which currently dominates the music streaming platform alongside Apple Music (Statista, 2019).

Shazam wants to increase user engagement with the app, but the company has not utilized its ample amount of human-centered data to achieve this goal. Now with the COVID lockdown, there are even fewer instances of user interaction.

Our goal as a team is to utilize Shazam’s extensive user data to create meaningful features that increase user engagement with the app while keeping the company’s objectives in mind. We address the issue brought about by lockdown but broaden our scope outside of the current pandemic.

Meet the Team

Katrina: Project Manager, Head of Visual Design, Research; Antonio: Research, Presentor, Team Motivator; Vicki (me): Research, Creative Director, Visual Design (support)

Note: we were all involved in each stage of the process — especially research and brainstorming

Timeline: 2 weeks (Dec. 3 — Dec. 16)

Methods: Element Analysis, Plus/Delta Analysis, User Interviews, Usability Test, Affinity Mapping, User Flow, Persona, Site Map

Programs: Figma, G-Suite

Round 1: Shazam as a social media app.

When my team and I first encountered this problem, we immediately realized that the possibilities were endless. The app is so simple that the end product could evolve to be anything we wanted it to be — we had few constraints or limitations.

We started to brainstorm our redesign ideas, as a way to guide us into the expansive territory. My team settled on a Snapchat-esque social media app.

Shazam is known and loved for being a simple tool.

Prior to our user interviews and usability tests of the original app, we screened participants to include those who have used Shazam before.

Our main interview questions (right), with our motivations behind the questions (left).

From the competitors named at the interviews, we conducted a business analysis and compared Shazam to its competitors to gain an understanding of what Shazam is doing right and where opportunities for advancement/improvement are.

The C&C analysis, along with the interviews and usability tests, showed that

  • Users were loyal to Shazam because it is straightforward to use with immediate results
  • Shazam’s other features (like their streaming platform) are not being used because users found the interface to be cluttered and overwhelming.

The interviews also confirmed one of our fears: our users did not want Shazam to be any more than a simple utility.

“Shazam does exactly what I need it to do and not a whole bunch more…I think any more buttons would be detrimental.”

With these insights, we realized that we were taking Shazam into a wrong direction. Our Snapchat-Shazam was too complex and contradicted what everyone loved about Shazam — its simplicity.

So we spent the next two nights individually re-brainstorming Shazam’s redesign, this time from the lens of our newly found persona, Cadence.

Meet Cadence: an avid consumer of music who is currently in a quarantine rut.

An important trait about Cadence is her curiosity. Her curiosity is what drives her to actively look for new music — someone who does not want to explore can easily fall back on listening to what they already know. However, the stagnancy of COVID’s quarantine catches up to her and she loses her motivation to seek novel music.

We want to design a fun and low-effort way for Cadence to discover new music so that she may once again connect with her world vibrantly.

Let’s not forget that Cadence is not the only one we’re working for!

We also want to keep Shazam’s business interest in mind while designing for our users.

Some “How Might We…”s to guide our brainstorm with the user’s (left) and the business’ (right) problem statement on top.

We each came up with our vision for the app and consolidated our designs into one.

The original Super Shazam! A way for Cadence to engage with new music.
Brainstorming ways to incorporate Shazam’s geolocation data and streamline music sharing.
Exploring simplified layouts to redesign Shazam’s (current) cluttered navigation.

Our Design

Shazam’s style guide has a lot of bright colors, so we made use of their warm yellow for an energetic, uplifting, and inviting look to complement Shazam’s calming but vibrant blue.

Our redesign is kept extremely simple to match Shazam’s brand image and to simplify the interactions so that our users do not feel overwhelmed when navigating the app.

Colors play an important role in our design idea, so our mid-fi is in color rather than the typical grayscale. Each hue primes our user to associate each feature of the app with the corresponding characteristics.

We segmented the app into 3 main sections:

Blue: Shazam’s original feature, tagging songs

Black: A history of the user’s past Shazams

And Yellow: our new feature, Super Shazam!

Super Shazam: Our solution to break Cadence out of her rut.

Shazam already had one tool — music-identification. My team and I added another tool to its kit: music discovery.

Super Shazam (S.S.) is our design for a no-fuss way to discover new songs anywhere! With a simple drag of the S.S. button, a list of curated songs is generated for our users right from their bedroom. This list makes use of Shazam’s data, including data on exactly:

  • what songs prompted our user to open Shazam, and
  • among the songs that they’ve Shazamed, which ones they liked enough to export to their favored streaming platform.

This data is used in conjunction with individually inputted user preferences to find songs that users with similar preferences Shazammed and include them in the Super Shazam results.

Our redesigned Shazam is no longer a streaming platform; it is — staying true to its original identity — a music discovery platform.

Many of our users use Spotify’s daily/weekly mix to find new songs because of Spotify’s successful algorithm; however, the algorithm recommends songs that are very similar to their user’s tastes. We use human-inputted data to introduce randomness, i.e. genres outside the realm of what our users know and are comfortable with, but may like. This will distinguish Shazam from its Spotify by fulfilling our users' needs for new music with a different flavor.

Super Shazam also makes use of Shazam’s abundance of geolocation data to enable users to explore what their local community and other countries are listening to.

Users may choose to discover music by Location, Genre, or their current Mood.

Super Shazam is a warm yellow to uplift and excite our users when discovering new music. We’ve also introduced new animations and gestures to excite our users with these novel stimuli.

How do music-lovers feel about our concept?

My team conducted a usability test to see whether returning users liked this new feature.

Users loved the new feature and called it a discovery toy. They found the animations exciting (almost comparable to a coin slot machine and confirmed that the concept and design all felt on-brand with the Shazam they know! However, we found that onboarding was necessary to introduce the users through the new feature.

Super Shazam v.2.

Check out our high-fidelity prototype!

We added onboarding to notify our users of new updates and introduce our new feature. Ideally, the onboarding would’ve been interactive, but we opted for stills in the interest of time.

We tested it with new and returning Shazam users and received unanimous feedback that our redesign was engaging, exciting, and fun.

Onboarding dramatically improved the learning curve, though many users first tried to execute the interactions to get through this step.

Next Steps

This finding confirmed our original idea to make onboarding interactive. For our next iteration, we would like to make this step more dynamic to further improve the learning curve and have our app tested on a mobile device for more accurate representations of our user’s processes. Our team would also like to find a way to better convey the great capabilities of Shazam. We would also like to ideate an Apple Watch design, for a more on-the-go experience to extend Shazam’s reach.

(I will clean this up and add better animations + pictures on my portfolio!)

--

--