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.
Design Background
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 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):
- Adding songs to Apple Music / Spotify
- Saving songs within their Instagram profile
- Sharing songs with friends and family
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
Developing this project meant applying industry standards and using tools for the creation of the prototyping process. Sketching ideas on a piece of paper was the first step, to implement all the ideas concerning the UX problem. It is very common to get more inspiration during this process.
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
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.
Positive results and much more to do
Finalizing this project has gained an overall positive response from interviewees. After receiving feedback concerning the icons and layout, I quickly realized how important the layout and positioning actually is. Comparing the developing stages on different devices, like the iPhone X and a MacBook was a good practice. Differences were not recognizable on the MacBook, but then checking the prototype on the iPhone XD app made them very visible. Misplacing one icon could ruin the complete proportions.
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.
- Adobe design tools
- Task flow
- User research methods
Explore other case studies
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…
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.
My team „Elderwand“ developed a platform, where the elderly can connect virtually to communicate and combat their loneliness.