top of page

SHaZaM

Shazam is an app that can identify music and Tv shows by listening to a short sample of their audio

Screen Shot 2022-02-09 at 10.33.21 AM.png
Screen Shot 2022-02-09 at 11.16.44 AM.png

Business Problem: Research indicates that the most common use case of Shazam lasts less than half a minute

 

Business goals: Increase the time users spend on Shazam by providing a new, engaging service

​

Solution: To increase the time users spend on Shazam we  added few features like 'Discovery' where you discover new songs which is generated by "hashtags" and "liking a song". 'My Library' where it shows recommend songs based on past shazam's and and songs that they have discovered under my music taste. 'My Music Taste' shows different song recommendations which is split into different categories based on past shazam's as well as songs that they have discovered

Role - UX Designer
Duration - 4 Week
Tools/Methods - Figma, Otter.ai, Optimal workshop, Trello, Google slides
Responsibility - Research,Usability testing on original site,  Ideation, Wireframes, Usability testing, HiFi prototype

Research Goal

Understand how users discover, collect, and engage with new music, identifying any positive or negative experiences 

To figure out the reasons behind the business problem, we had to understand what the current user's experience was like. In order to tackle this, we began our research with a screener survey to find six users that met all three criteria below:

   1. Listen to music frequently

   2. Has added music to their playlist or music application of their choice in the past month

   3. Has previously used the shazam app 

"I don’t want to limit my preference to an artist or genre. I want the music app to take all of that into account when suggesting music"

Affinity Mapping

We analyzed the research data gathered from the interviews and found 3 key insights from our affinity mapping. All are quotes”

    1. When shazam can’t identify song, I google lyrics

    2. Once I identify the song, I leave to go to another app to play the song or add it to my playlist

    3. I want more unique song recommendations for new songs from my music app

Screen Shot 2022-02-09 at 11.20.41 AM.png

With this information in mind, we began our problem statement:

- Users shared that they really wanted a way to easily find unique song recommendations that aren’t limited by music genre because they feel like they are getting the same popular song recommended to them by other apps.

​

From there, we needed to consider how we would solve the problem. The team came up with multiple solutions and decided to tackle the following one:

- How might we make it easy for users to find unique new song recommendations based on patterns from songs that they have identified?

User Persona

With all the research information gathered, we developed a user persona- Ashley- she represents the behaviors and pain points of Shazam’s target users.

PERSONA - Light.png

Competitive & Comparative  Analysis 

To find out what was missing from the current app experience, we looked at popular music applications to see what features other apps had compared to shazam app. We specifically looked at youtube, spotify, Amazon music as those were the most popular among the people whom we interviewed.

Screen Shot 2022-02-09 at 11.22.02 AM.png
Information Architecture

In order to figure out the website’s navigation, I did card sorts with users as well as compared the menu to our competitors to see best practices.

Site Map

In the current navigation of the Shazam app, we found that some users didn’t know that there were other features on the app besides searching for songs. We decided that before moving into our sketches, we should create a sitemap knowing that we would want to change the navigation of Shazam in our design so that users are well aware of the other features on the app aside from identifying songs. 

Screen Shot 2022-02-09 at 11.22.45 AM.png

User Flow

It shows all possible steps that Ashley goes on shazam app. Here is a user flow diagram:
User Flow- Presentation_edited.png

Ideation

After making the rough sketches for ideation, we came together to identify which screens we drew similar elements. We as a team worked on digital adaptations of our sketches and created wireframes. From there, we designed our digital wire frames while keeping in mind the issue that we're trying to solve for our users. A handful of wireframes for the landing page and product page. Here are a few sample screens:

Identified  Songs

This screen shows up after a user has tagged and identified a song. Users are able to vertically swipe up to explore the song.

Screen Shot 2022-02-09 at 10.39.29 AM.png
Screen Shot 2022-02-09 at 10.40.18 AM.png

Discover/Explore Page

From this screen, users are able to explore and discover more songs that are based on their shazam and music library.

Screen Shot 2022-01-19 at 11.34_edited.png
Screen Shot 2022-01-19 at 11.35_edited.png
Screen Shot 2022-01-19 at 11.35_edited.png

Library

The Library section collects all of the users past shazams as well as any songs the users choose to “like” within the app.

​

Under the My Music Taste section, this data is collected based on the user's past shazams, which is split into different categories such as artist, genre, mood, tag, etc. and is then placed into a pie chart for easy visibility.

Screen Shot 2022-02-09 at 10.38.20 AM.png
Screen Shot 2022-02-09 at 10.38.11 AM.png
Screen Shot 2022-02-09 at 10.45.11 AM.png

Usability Testing

We conducted usability testing on our mid- fi prototype with 4 different users, each with 11 tasks to complete.

 

1. Our users were able to complete more than half of the tasks with little to no issue in under 5 minutes. However, our fourth task is where our users struggle and only ¼ users knew what to do. The given task was to find a related song by asking them the following: show me how you would expect to get to the next related song from this page.

​

2. From this task, we wanted to see if users were able to figure out that they had to swipe up on the identified song screen to find the next related song. This is an area where we referred to Tik Tok and Instagram’s vertical scroll, thinking that most users should be familiar with this social media feature and would instinctively swipe upwards.

​

3. To tackle the issue that users had with finding the next related song, we decided to add an onboarding element to the identified song screen. This will show up on the app for the first time users and will prompt them to swipe up to discover more.

Change 1

Added an onboarding process to explain swipe up feature. 
4/4 Users successfully swiped up for a related song
Copy of P3_ Shazam (LeshaHoney Lavender Ice Cream) (3)_edited.png
Copy of P3_ Shazam (LeshaHoney Lavender Ice Cream) (3)_edited.png

Change 2

Changed language on My Music Taste & Discover pages to add clarity. 
4/4 
Users navigated to and understood the purpose of the My Music Taste page
Copy of P3_ Shazam (LeshaHoney Lavender Ice Cream) (4)_edited.png
Screen Shot 2022-02-09 at 10.38.11 AM.png

Change 3

Added a quick like feature from the Discover page. 
4/4 
Users discovered a new song based on mood
 
Screen Shot 2022-02-09 at 3.21.53 PM.png
Screen Shot 2022-02-09 at 10.41.37 AM.png

PROTOTYPE

Prototype

"It's always kind of fun to look at what you've listened to the most, so I think the pie chart is pretty fun too"

Next steps

From our usability testing results on the mid-fi prototype, we received feedback from the users on the other features they would’ve liked to see on the app. Unfortunately, we did not get the chance to incorporate all the features brought up as we wanted to focus on the most important features that would allow our users to have a seamless experience on the app.

​

For the next steps, I would consider adding some of the features mentioned below:

​

  1.  Add a quick play button to the Discovery page

  2.  Add a music bar that would be docked at the bottom of the app/page

  3.  Building out the kabob menu on the identified song screen

  4. Conduct round 2 of usability testing with all the changes made in Hi-fidelity prototype

bottom of page