The clickable prototype of a Shazam feature on Instagram — case study
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 taking, editing and sharing pictures or videos are one of the multiple elements the app has been improving over time.
Today it is not only a sharing network for its users, but influencing characters are using Instagram to spread their message to their global community. Being up-to date and following bloggers, businesses and celebrities in their daily life has become an essential way of interacting with the app. Thereby, adding new tools to their monthly updates, which are improving the user experience, is a promise that the company has kept.
“If we could build you a teleporter to take you to someone else’s experience, whether it’s a wedding your missing or an amazing vacation someone is having and allow you to experience that immersively, that’s absolutely something on the rising for Instagram.” Synstrom, 2017
Posting videos is one of the best content strategies for businesses. Especially on Instagram, the engagement has skyrocketed. This trend has also been adapted by private accounts, which resulted in 95 million videos being shared daily. With this rising movement, a feature for song identification like Shazam, would aid in the overall video experience of this platform.
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 Problem
- 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.
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
Project aim
- Creating a clickable prototype for a Shazam button on Instagram
- Combining both apps, in order to make these two functions simple and more convenient for the user
- Focusing on a UX design with UI elements for an iOS phone
UX in a nutshell
“UX is the intangible design of a strategy that brings us to a solution.”
User experience is the experience between the user and the product, which simplifies their journey. This can include many factors such as technicalities or design problems, but also content strategies and delivering the right message to the consumer. The rapid digitalization has caused an overload of online information. The way this is presented is essential, in order to stand out from competitors, but at the same time raise the attention of the consumers.
The core element of UX is creating a memorable journey, customized to the targeted audience, so that they sense this in the best way. So that this can be accomplished, emotions and empathy have to be encouraged, resulting in a positive interactive learning experience. Organization and layout of information are key points, as well as simplicity and structure that assist during the user’s navigation through an app or website.
Interaction design (ID)
Another important aspect of UX is the interaction design (ID), which is not to be confused with UI. Interaction design describes litterally an interaction with the design element.
This is essential, because it helps distinguish itself from ordinary features. Hence, the customer will want to come back to this experience.
Part of the ID is an action-reaction feedback. The users expect an immediate reaction after their action, and incomplete loops can lead to a poor experience. Therefore, a good functionality at the right time results in a positive engagement.
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.
2. 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.
3. 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.
4. 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.
5. 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.
The design principles
Fitt’s law
Fitt’s law focuses on elements being placed in the right position, that are most likely to be engaged with. Interacting with larger objects, which are closer to you, are more likely to be utilized in comparison to ones that are smaller and further away. Hence, why preferred buttons are larger, than less preferred. Applying this law to the project, it is important to consider the sizing in the design elements, that can vary depending on the device. Since Instagram already has multiple buttons included in their feed, placing and space are topics to consider.
The Shazam element is the key element in the design. It should be noticed by the audience immediately. However, it will comply with other Instagram icons, following their guidelines.
Productivity can be increased by reducing the time of reaction of the device. The response should not exceed a limit of 400ms. The Doherty Threshold law proved, that there is an addictive effect on the user, when this scenario occurs.
Utilizing this law could increase the engagement with the Shazam feature, improving an overall satisfaction with the app.
This psychological design principal identified, that users prefer similar design pattern, rather than unfamiliar ones. The customer journey could be improved by simple structures and design patterns, which make the learning process easier. This is not only convenient for the user, but also for the creator taking other designs as an orientation and adding individual features.
Project design needs
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.
Low fidelity = pen and paper
Mid fidelity = Adobe XD, Photoshop, Adobe Illustrator
High fidelity = Adobe XD, Photoshop, Adobe Illustrator
Prototyping-process
A design process can be divided into three main stages to establish a good prototype.
- Brainstorming
This allows the developer to explore and capture numerous ideas within a sketch (low-fidelity), mood chart or in element styles. At this stage it is not important how good or bad the ideas are, quantity over quality counts. After gathering many ideas, they will have to be evaluated, ideally in a certain time frame, to stay focused on what is most important.
2. Designing and planning
Furthermore, the planning process will continue by designing wireframes at mid-fidelity. Also, details are not important here and first functionality, flow or issues, which have been spotted in the low-fidelity level, can be corrected.
3. Evaluation
At this stage the testing and evaluation of the prototype begins. Receiving feedback can be helpful, in order to improve ideas and receive a different perspective on the project.
Introducing Shazam - 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:
- Adding the song to a Spotify or Apple Music account
- Being able to continue the Instagram journey after the song has been identified
- Recognition process cannot take longer than 400ms
- Saving the song in the Instagram app
Low-Fidelity wireframes
Fidelities refer to the design progress, which can differ in content, commands or interactions. The low-fidelity is a simple sketch of initial ideas. This can help in an early stage to visually see if concepts, user flow or design elements can be used as initially planned.
Second round wireframe
The mid-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.
Final screen
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.
After changing and improving certain final steps, 3 young Instagramers were asked to give their honest feedback.
“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”