Shazam TV Experience

February 2018 - May 2018

Overview

Have you ever 'shazamed' a TV award show? If you have not, let me explain what happens when you do. In short, when a user 'shazams' music from a TV or award show, they get a web based result on their phones that includes various types of content such as: a synched timeline feed with the performances in the show on a reverse chronological order, recommended playlists, exclusives on artists, and information on the show. This experience, called a 'Shazam for TV', also enables brands to extend the reach of advertising campaigns by offering additional content to viewers.

To give some background on how these experiences came about, over 4 years ago (before my time), the team identified that a significant percent of our users were tagging music while watching TV. The team embarked on the creation of a second-screen custom result that would enhance the experience for our users. Consequently, our talented web team in San Diego, CA built an internal CMS tool which allowed anybody without a technical background to create custom mobile results based on any TV or award show. Pretty cool if you ask me.

Role
Design Lead
Team
1 Product Manager
4 Engineers
Tools
Sketch, Zeplin, Flinto, G Suite

The Challenge

Originally, award shows such as The Grammys, The Billboards, The Brits and The Oscars just to name a few, were averaging about 300K to 400K users tagging the shows. In recent years however, with overall TV viewership going down and the result starting to look outdated, it began to underperform.

In March 2018, we set out to completely redesign the Shazam TV experience. Based on user data and feedback received from past surveys, we found out that users who tag these tentpoles primarily do it to get the song information.

revamped Shazam.com
Here are a couple of examples of past show results. These were custom built every time, looked clunky and cluttered with information.

The Goal

The goal was to improve the Shazam TV result by simplifying the whole user experience, refreshing the visual language and focusing on the song result instead of the show. Our mission was to make the Shazaming experience personal, fun and rewarding for users, while increasing MAU, driving Apple Music up-sells and driving brand/partner value through sponsorships.

The deadline to launch the MVP was on May 20, 2018 during the Billboard Awards. Since we only had a couple of months to design, implement and refine a new solution, it was a tight timeframe.

revamped Shazam.com

The Process

I worked closely with the product lead to establish the goal of this project, requirements, steak holders, technical constraints and project timeline. Once we defined the problem, I worked with our data research team to get a better understanding of our users by analyzing previous surveys and user-generated data. Based on this user research, we knew that users enjoyed tagging these shows to get get the name of the song and additional content on the show. We would consistently see a high tagging interaction if there was a LIVE CTA to pull out your phones and Shazam the show. Otherwise, tagging interaction would vary depending on the artist and the performance.

Since this data was from 2015, we quickly worked to get a new round of surveys to a panel of 350+ and better understand user's behaviors and motives. This new data confirmed our hypothesis that users wanted a simple experience that focused mainly on the song result. 76% of all users responded that the song information was the most important thing they wanted to see in the result.

I began the discovery & research process by looking at TV, video streaming and entertainment mobile apps that featured some version of a timeline. I created a mood board on InVision and gathered UI screens, screenshots etc. for inspiration.

On the current experience, the main navigation consisted of 2 to 3 tabs surfacing various types of content. Since each experience was custom built in-house on the CMS tool, the results looked completely different. Based on user feedback, we knew that almost 30% of users had said that the current experience was too busy and hence were not tapping the other tabs. For this reason, we decided to move away from tabs and explore a more simplified navigation built around the song result.

Here's my first sketch focusing the experience around the song result.

I sketched some navigation ideas while keeping in mind that the song result was the main feature users were after.

Some of my early explorations tried to figure out the 'scrolling' vs 'swiping' navigation question. Below you can see some of the early mid-fidelity wireframes.

Here are some initial sketches of navigation ideas.

I then shared these sketches with the team and then decided to create some initial mid fidelity wireframes to get a better idea of how the navigation and scrolling would work.

Here are two mid-fidelity menu explorations. One vertical and the other horizontal.

As we narrowed down the initial ideas to two potential versions, we noticed that although these concepts improved the user experience and were visually more engaging, the result was still cluttered with too much content. Consequently, we decided to try a third version that was even more straightforward and would only include the core features, at least for launch day.

Horizontal Navigation
Here's a prototype exploring the idea of a carousel style navigation and timeline.
These were two different concepts with different style navigations. We agreed that these concepts needed to be simplified even more.

Solution

The final result was a simplified version of our redesigned track page with the same horizontal navigation. It featured a bottom module that would take users to a page that highlighted a secondary piece of content. It had an interstitial page that welcomed users and included a logo of the show. It would also let users know of a next performance via a notification. The new experience allowed color and text customization depending on the show through the same internal CMS tool, but kept a clear and consistent visual language all throughout.

The project lasted about 3 months and we were able to successfully launch a v1 during the 2018 Billboard awards. On the new experience, the initial data showed that user interaction and CTR doubled from 15% to 30%. It is fair to say that for this first version, we simplified the whole experience by decluttering it and limiting the amount of content shown. So in this case, less was definitely more. For v2, we are planning to include more content that is relevant to the show and continue testing out on upcoming TV award shows.

The final result was a simplified version of our track page, focusing on the song result and featuring a bottom module that linked to a secondary piece of content.
revamped Shazam.com

The Next Steps

Overall, the new Shazam TV result got really great feedback from our users and internal teams. All metrics are showing positive signs and we are confident that the user experience was improved. The plan now is to continue getting feedback from our users, test new features on upcoming shows and iterate to make the best experience possible for viewers.