Shazam case study

A clickable solution for the Instagram user

This case study focuses on a design problem in Instagram. During the process a solution will be presented, that focused on combining two separate apps in one. This will simplify the process for music lovers that are searching for the song they listened to in their Instagram feed.

 

Shazam your tune

See the end result of the clickable prototype

Design Background

Instagram has developed a large community of 500 million active users from the beginning of their launch in 2010, until now. The concept of the social network was initially one simple click of sharing a picture in real time with friends and family from anywhere. Features like capturing, editing and sharing pictures or videos are one of the multiple elements the app has been improving over time. 
Shazam was founded in 2002 and provides consumers with the solution for music recognition. The app records a song and compares it with their large database. A digital fingerprint can also be recorded in an offline mode by saving the song and once the user is online again, he can access it. Music can then be added to music streaming platforms like Spotify or Apple Music. The consumer would also have the option to synchronize both apps with each other, which will then automatically add a song to the Shazam playlist within their account.

Introduction

The issue

  • Lack of usage for iOS users
  • Shazaming songs in Instagram is inconvenient
  • Lack of UX with the fast pacing trend for video content

Competitive research

I then looked at one of Instagram’s main competitors, Snapchat. A social networking platform, with over 186 million daily users that focuses on a short communication exchange attaching pictures and videos to chats. Besides many other effects and functions, the app has a feature to Shazam songs immediately within their camera mode. A simple touch on the screen will record the music instantly. Once it has been recognized, the user has three options to choose from. One window will pop up with information about the artist, the other enables them to add the song to their Apple Music or Spotify account. Unfortunately, users are then forced to leave Snapchat and enter their music streaming app of choice.

 

The challenge

My goal for this project was to save your new favorite song, faster and easier, while combining two well-known applications at once, specifically for the iOS user. I wanted to keep things simple and focused on the information architecture of Instagram.
 
Project aim
 
1. Creating a clickable prototype for a Shazam button on Instagram
2. Combining both apps, in order to make these two functions simple and more convenient for the user
3. Focusing on a UX design with UI elements for an iOS phone

My personal ambition

Since I am a frequent Instagram user and I often get caught in the situation of scrolling through my feed and listening to a great song, followed by me searching for the title for several minutes in the comments and ultimately giving up, I knew I could not be the only one. I created a survey and received my conformation, that there was a need for my idea.
Over the winter break I started developing my prototype, experimenting with several tools and finally choosing Adobe XD, since this was what I felt most comfortable with.

Collecting an outsider's opinion

Based on a survey among young adults, an interest in adding a Shazam button to the Instagram feed was discovered. For Iphone users, it is not possible to open both Shazam and Instagram at the same time. However, Android devices are able to add Shazam to their quick settings and record songs from their Instagram feed. As an Iphone user myself, I identified this issue when I was searching for the songs in the comment section below the video. It would either take a long time to find it, or it wasn’t possible at all.

Over 55 responses were collected through the survey, of which 48 are current Instagram users. Almost 60% utilize the Shazam app to record songs. The other 35% do not have it and the remaining were not aware of this app. More than half of the interviewees said, if they like a song in their posts, they search in the comments for it. Otherwise they would use a different device to Shazam the title or could not be bothered with it in the first place. 

Almost 100% agreed on this being very inconvenient, but have never searched for a different way to overcome these troubles.

Participants that had a Snapchat account were asked if they utilize this function and 25% said they do. Further feedback showed that many were not aware of it in the first place.

The last part of the questionnaire focused on the customer usage and request as to what the design should look like. The 36 respondents wanted to be able to scroll further in their timeline after using Shazam, without an interruption. Other suggestions were (listed in hierarchical order):

Psychological aspects​

Applying the 5 dimensions of interaction design to the Shazam feature
Text

Choosing the right words to engage with the users is important, so that information is being presented the right way. In this project, the tone of voice will not differ from Instagram’s language. Text will be simple and short, with a focus on video content.

Graphical elements

Images and icons are more likely to grab the audience’s attention, rather than just the typography. The Shazam icon is a great element to be embedded in the screen. Its bright colors are recognizable, but at the same time do not distract the users’ activities on Instagram.

Behaviour​

Combining these four points will then illustrate, what is necessary to influence the persona, while they are communicating with the feature. Feedback and testing will then assist to improve or make changes to gain the best possible result.

Physical object/space

Keeping in mind that screens vary depending on the device, it is important to choose the correct location for an element. This will have an impact on the overall design and potential clustering will affect the experience. This case study will place the element on the opposite side of the like button, with enough spacing between other interactive buttons.

Time

“Time is of the essence” and so is the interaction with a feature, which will impact the user’s journey, depending on the time they spend with it. For the system to recognize the song and compare it with the database, a certain time will be necessary to achieve this process. However, as identified in the survey, respondents did not want this to affect their interaction with Instagram itself. So it would be beneficial, once the recognition was completed, that the Instagrammers are able to scroll further down their timeline

Getting to work

Working with various design materials, like Sketch, Photoshop, Figma or InDesign aided in making a decision as to which suited my work best. Photoshop and Illustrator were helpful as approaching the later stages of mid- fidelity and high- fidelity, where icon creations were required.

Due to personal preference Adobe XD was the final tool used to design wireframes and the final prototype. The advantages were that all the Adobe programs use familiar sequences and numerous guidelines were available online. Although Figma and Sketch were considered but lastly, the convenience of XD was predominant.

Introducing features and functions

After analyzing and evaluating the feedback from the survey, the following functions were identified, which have to be included within the app.

Saving tunes

With Instagram’s “save” function, pictures can be added to the “saved” library to view at a later point in time. This will be utilized for the shazamed videos and collected, and clearly visualized in the profile separately from all the pictures.

ADDING SONGS TO YOUR MUSIC LIBRARY

Once the song is in the collected library of the user, they add it directly to their desired music streaming service. Since Spotify and Apple Music are the two most commons ones, I chose these for now.

SHARE YOUR DISCOVERY WITH YOUR FRIENDS

Finally, there is nothing better than sharing a new song with your friends for the next road trip, hangout or lazy Sunday.

Medium Wireframe

The medium fidelity wireframe was created to test most of the interactive features, functionality and layout. Content and pictures were not added at this level. Feedback from a user was collected, which would help with the final implementation of the prototype. Due to the lack of design and overall feeling for the app, this might have been a factor that influenced the customer journey.

Design critic
  • While music in video is being identified, the background should be darker, so that the user can clearly identify the Shazam process
  • A clear difference between “Saved pictures” and “Shazam saved songs” has to be made visible
  • “Play all” and “Search your Shazams” button have to be set below the grid and burger menu icon
Video abspielen

Style guides

Since this case study is applying the theory of the Jacob’s law, style guidelines of primarily Instagram and Shazam were followed. Spotify and Apple Music icons were either downloaded directly from their websites or created in Adobe Illustrator, if changes had to be made concerning size or color. This way the user can interact with a new feature, but a familiar interface.

A radical impact for every music lover

After feedback was gathered from the mid-fidelity wireframe, changes were made and a final clickable prototype was developed in Adobe XD. The newest dark-mode design from Apple was used for the joint apps. When opening the saved song titles in Instagram, the user will see similar ID and UI features from Shazam, implementing the Jacob’s law. Additionally, the Doherty Threshold law was applied, to create the best possible UX concept.

Video abspielen

Positive results and much more to do

However, this task has illustrated, that many skills are required at once to write a case study, which involves UX. There are numerous subjects that were not considered during this project and have further potential to be explored. Next steps could include a customer journey map, interviews with targeted individuals, followed by market testing and implementation.

“I liked the idea, that you can continue scrolling in the pipeline once you tapped the Shazam icon”

“The song being automatically saved in my profile is great, otherwise I would have forgotten about it”

“ I love the design in the “saved shazams” file. It doesn’t seem to me like I even used another app”

Skills incorperated

This case study was particularly design centered with skills incorporated such as Photoshop and Illustrator. Adobe XD was mainly utilized for the wireframing and rapid prototyping process. This gave me the opportunity to better display a task flow the user will be experiencing throughout their journey on Instagram. Additionally, various research methods like interviews and surveys were required, to underline a need for this design problem.  

Explore other case studies

June 2020 - Lyft

The goal for this project was to improve the overall rider experience by letting the passenger adjust their ride preferences in the app settings. This offers a smoother riding journey, as well as more comforability with strangers. The driver will be informed prior to arrival if e.g. the passenger would like to have a chat, listen to the radio, and much more…

December 2020 - Test Valley Council

This project concentrates on a British council website, which is in the process of being re-designed. In order to make appropriate changes, a usability test was conducted, and suggestions were made based on current issues, which affect the user experience.

May 2020 - MIT Hackathon

My team „Elderwand“ developed a platform, where the elderly can connect virtually to communicate and combat their loneliness.