Shazam World AR Experience

December 2016

Overview

Shazam's mission is to help people recognize and engage with the world around them. As the established leader in audio recognition, Shazam also wants to give users the ability to interact with the physical world by simply opening the app and pointing their phone’s camera at anything with the Visual Shazam CTA. Knowing that AR is a powerful tool to engage users and gain new audiences, we partnered with a third-party company called Zappar, and ventured to create an AR experience called ‘Shazam World’.

Role
Design Lead
Team
1 Product Manager
Partner company
Tools
Sketch, Photoshop, Zeplin, G Suite
read more

The Challenge

Prior to this project, Shazam did not have any AR capabilities and being given the task to work on it was definitely a great challenge. We were working with another company and I knew I had to do a lot of research to get a better understanding of how this space worked. We wanted to make sure that this first demo experience would sell the idea to brands and partners.

The Goal

The goal was to create an immersive and interactive experience that would exhibit Shazam’s ability to create a frictionless connection between the physical and digital world.

revamped Shazam.com

The Process

Working with Zappar, we set out to create an experience that was engaging, compelling and easy to use where users could discover music around the world. There were two main features being discussed: First, the experience's homepage would display tracks around the world and sponsored/promotional tracks that would deep link to a custom experience depending on the brand. Second, there would be a marker that would pinpoint the user’s exact geolocation and display what others are Shazaming around them.

There were some concepts thrown around planets/space and others about spinning vinyls. After a bit of back and forth, we decided to go with a 3D floating globe, where the user would be able to spin and explore tracks from around the world featuring Shazam’s Top 10 Future Hits of a specific country. Once a track was tapped, a floating card would appear featuring the track's name, album art, chart position and name of artist. If the user tapped again, they would be directed to Shazam.com’s track page.

These were Zappar's original ideas. We were not big fans of the vinyl and thought it looked too flat, but we were in the right direction.

I began my research phase by looking at previous AR examples from other companies. At the time, I was unaware of the amount of AR/VR startups, so I was able to create a solid mood board. I also downloaded a number of AR apps and began playing around with them to get a better understanding of the user flow and navigation.

revamped Shazam.com
Sketch of how we envisioned the pulsing animation would appear once the user would scan the Shazam code.

I sketched some ideas for a 'Shazam World' lockup that would serve as a sub-brand and stayed prominent all through the experience. I also found and purchased a realistic 3D globe online and used it on the homepage.

Since cards have provided a space for information for as long as we can remember and we were already using them inside our native apps, inside Discover, I created a set of cards that would display the track’s information and sponsored branded content.

revamped Shazam.com
Set of cards I designed to display countries' Top 10.

Solution

At the end, we were quite pleased with the final result with over 100K people using it every month. We did not ship the product with the geolocation feature, but the final solution served as Shazam’s demo to showcase its AR capabilities. You can give it a spin by opening your Shazam app and scanning the code below. If you are on a mobile device, open Shazam, swipe up or tap the camera icon, tap the '?' and then tap where it says 'No code? Try Demo Here.'

We handed out this card with a Shazam code as a promotional piece. Try visually Shazaming the card using your phone and experience Shazam World.
While in Shazam, users can also access this demo by swiping up or tapping the camera icon, tapping the '?' and then tapping where it says 'No code? Try Demo Here.'
We handed out business cards with a Shazam Code that enabled users to access the Shazam World AR experience.

The Next Steps

We weren’t able to ship with the geolocation feature, but we are looking to eventually add more features to the experience. Since launch, many brands have partnered and created very successful AR experiences through our platform. This was a really fun project and I am thrilled to see Shazam evolve into a key player in the AR space.