Shazam

Song Recognition App
UX Research + Design

Duration

Aug 2023 (3 weeks)

My Role

Design & Interaction Lead

Team

Kayla Kwan
Connie Chen
Eric Wilkinson

The current Shazam app is only known for identifying a song. Our team improved user interaction within the app by adding new features for customizing and sharing songs discovered through Shazam. 

Problem

Goal

Enhance user engagement with Shazam to increase the amount of time users spend on the app and maintain the number of returning users.

Research

We began with mind maps and various types of research including heuristic evaluation, user interviews, competitive & comparative analysis (task analysis, feature inventory pluses & deltas), and secondary research.

Heuristic Evaluation

During the heuristic evaluation, we assessed the capabilities of the current Shazam app and prioritized the severity levels of the usability issues. One of the significant usability violations identified was that the current app is limited to a single playlist with no customization. Additionally, there are inefficient flows that are repetitive or require the user to take multiple steps to complete the task. This heuristic evaluation helped us to identify several issues with the current app that might cause users to be unsatisfied with the app.

Competitive Analysis

Competitors from Music Industry

  • Spotify
  • Apple Music
  • Youtube Music
  • iHeart Radio

Feature Inventory
We discovered that these apps offer customization and personalized options for each user. However, they lack an efficient method for sharing multiple songs with individuals who use different streaming platforms. 

It requires users to share their songs through an external link to get the song information and manually add to it their playlists.

Comparative Analysis

Comparators
Additionally, we explored the area of sharing and interaction by comparing with four comparators:

  • Facebook Memories
  • Google Photos
  • Pinterest
  • Instagram Story

Pluses and Deltas
These insights cover the strengths and weaknesses of each app, allowing us to identify areas for improvement and differentiate the Shazam app from others.

We learned that these apps allow users to share their content with other users in multiple formats and choose the level of visibility to the public feed. 

Task Analysis

User Interviews

From user interviews, we were able to identify user’s behaviors, needs, and frustrations and also gained insights into various perspectives of their interactions with music including listening, sharing, and collecting.

"It feels like I can relate to the people who listen to
the same music as me.”
"I used to spend a lot of time organizing music,
but it’s too time consuming."
"I share the music that I like with my friends and family
to let them know I am thinking about them."

* Interview Questions Brainstorm

Affinity Map

From user interviews, we were able to identify user’s behaviors, needs, and frustrations and also gained insights into various perspectives of their interactions with music including listening, sharing, and collecting.

"I view music as my inspiration and a way to connect with others."
"I don’t want to spend a lot of time organizing my playlist."
"I like having options to adjust my playlists, even if it’s generated
by the application."

Pain Points

  • From the user interviews and affinity mapping, we have noticed that the users are facing these problems:
  • Users think it is inefficient to spend time organizing their songs.
  • Users weren’t aware of syncing music streaming app feature.

Key Findings

  • Users are likely get connected with other people and share their music experiences.
  • Some users think organizing playlists is time-consuming and overwhelming.
  • Users easily share their songs with others who are using the same music streaming apps but use social media to share with others who are using different platforms.  

User Persona

Based on the insights from the research, we created two user personas to empathize with pain points, needs, and behaviors.

Both Amanda and Michael are looking for a more efficient way to create their music. Additionally, Amanda additionally wants a sharing option with other users across different music streaming apps.

User Journey Map

The user journey is based on our primary persona Amanda’s scenario.

If she doesn’t have an easy way to manage and share her discovered songs within the Shazam app, then she will leave the app once she finds a song with the song recognition feature.

Problem Statement

Shazam Amanda, a private dance instructor, needs an efficient way to sort a song she just discovered because she wants to curate and share new music with her students to keep her classes interesting.

How Might We Statements

We began exploring potential solutions for our problem statement with these HMW statements:

  • How might we make Shazam more interactive with other users?
  • How might we bring more fun to users besides recognizing the song?
  • How might we let users access their current playlists from other platforms?
  • How might we allow users to customize their own playlists?

User Flow

We created two user flows to illustrate different approaches to user engagement with new features:

Discovering a Song and Adding It to Playlists

Sharing Songs with Other Users

These user flows are based on the same scenario from our primary persona so we can see how these new features can improve the capabilities of the app and create more interaction experiences within the app.

Information Architecture

This sitemap illustrates how the app is structured with the new features, which helps us to know where the content is located and whether it is easy for users to find the content.

Wireframes + Iterations

Before creating wireframes, we spent time sketching wireflows individually and shared our ideations as a team. During this process, we were able to highlight areas to focus on. As the Design Lead, I was responsible for creating digital wireframes that reflect our discussion and feedback from the team. We began with lo-fi wireframes and gradually added fidelity so that we can see if the structure and flow makes sense before adding any content. It helped us to visually communicate and iterate ideas.

Usability Test

We conducted 4 usability tests with our mid-fi prototype to understand their difficulties in navigating with the new features. We gave the users a scenario similar to our primary persona's and observed what types of errors occurred during the testing and the success rate of the tasks. 

Insights:

  • 3 out of 4 users were confused with the "add to playlist" section as a button due to its blue color. Based on the results, we decided to use that as a button and removed the "save" button.

  • 3 out of 4 users thought it takes multiple clicks to edit the playlist because the edit button is under the three dot icon. So we added the edit button next to the playlist name instead.

Improvements

From the usability test, we were able to observe user’s behaviors while interacting with the new features. The frequency of errors occurred in a specific task highlighted instances where users experienced confusion, which was related to the UI design. Based on this insight, we refined the clarity of the button and icon designs.

Design Solution

Improve Connectivity Between Shazam and Other Music Streaming Apps
View the user’s existing playlist from music streaming app and able to directly add the shazamed songs to these playlists without having to exit the Shazam app

Customize Your Shazamed Playlists
Create and organize the songs you found
based on your preferences

Increase User Engagement with
Sharing Features
Explore what other users have shazamed.
Create and join groups to share playlists and Shzamed songs 

Style Guide

The style guide and component library are based on the current Shazam
and iOS design guidelines.

Prototype

I led the team in creating a style guide for consistency and developing the fidelity of the design. We had iteration processes, and I refined the prototype based on feedback and discussion with my teammates. 


Challenges

Time constraints limited our scope for research:
focused on discovering and sharing music experiences

Making decisions when we had multiple approaches:
prioritized ideas based on our problem statement and had voting system 

Next Steps

1. Discover more topics related to music such as the relationship between music and memory

2. Gamifying the process of discovery and sharing music to make it more interactive

3. Consider other devices and platform users (i.e develop Android version)

Takeaways

Communication during the iteration process
Our team had a variety of ideas for potential solutions and needed to narrow them down. While discussing which direction to go, we revisited our problem statement and kept asking ourselves, “Does this idea solve the problem we proposed?” Creating a connection with our problem statement helped us in making decisions during the design process and aligning with our research insights. This process of communicating and sharing ideas with teammates helped me to practice how to convey my design decisions to others.

Project planning and time management
Using a gantt chart, we planned the overall timeline of the project with given time (3 weeks). We were able to determine the estimated time required for each task and divide the task into four phases (discover, define, design, and deliver). I learned the significance of setting priorities for tasks and improving my time management skill. 

Efficient design process using component library
Having a clear visual system elevates the pace of progress and maintains consistency throughout the overall design flow. Consistent design makes clear and easier navigation for users.

View All Projects →

☁️ ☀️ 🍀 👀 💭
© CARRIE CHAEEUN AN 2023