Overview

Working with the TV Product & Development teams, I led the complete mobile design of Shazam for Live TV. My role was UX, information architecture, interaction and prototyping as well as visual design. The project was focused on designing a modular, responsive and customizable system in HTML5 that was adapted to both iOS and Android. With the final experience including the development of a live timeline, we were able to increase time spent from less than 20 seconds to over 90. More notably, our Live TV results achieved our biggest number of Shazams for any Shazam result, when at the 2014 Grammys we received 1.1M tags.

Improving a Customized Experience

Music is a central part of Shazam for TV; it’s one of the driving reasons for user Shazaming shows. Very often, however, users Shazam live shows for which we wouldn’t be able to give them an exact music match, because in order for Shazam to identify a music track it already needs to exist in our music database. In supporting music for TV shows and live events, Shazam set out to create Live Productions so that we could serve users the music they were looking for, as well as surprise and delight them with extra content. Live Productions were built in HTML5 to be nimble enough for updates from show to show, independently of new app releases.

What was the problem with this solution? Starting out, each experience was very expensive to design and build. We didn’t have a scalable system in place, or any tools for producers to create the results. For that reason, every element of the experiences needed to be hard-coded by our developers. Given this amount of work, the results were built in partnership with shows and sponsors that could provide an on-screen Call to Action (CTA) – in return, each experience was heavily branded with the TV network or show. Applying the branding (through colors and images) added more design and development work to each experience as well as diluted the identity of Shazam for Live TV.

Making the Content Scale

Overview

In order to solve these issues, I set out to design a system that would:

  1. Reflect the Shazam redesign of Music & TV results
  2. Remain flexible enough to be customized for different types of shows
  3. Make room to include partner content above the fold in a clean, unobtrusive way
  4. Make it easy to reflect a show’s branding without heavy development effort
  5. Be feasible to build in HTML5/CSS3 (no heavy assets in one page, less vertical space due to the web-view nav, etc.)

This was a daunting set of variables to consider. To start, I gathered our TV design team and we set out on a few brainstorming sessions. We first mapped out the most relevant shows and content. This would determine how to best tackle the pieces needed to contain it. Then we embarked on structuring the pieces, by considering the content that would be most relevant to users of each show.

Templates for Show Types

The initial result of this brainstorm led us to focus the design on templates for each type of music-centered show, especially for competition shows (like X Factor), and award shows (like the Grammys). In doing so, I chose to place the show image at the top to establish page hierarchy, and included sections below that could be divided into tabs for different pieces of the show content.

As early shows like the X Factor started getting produced, we gathered and analyzed usage data. While surveys and informal interviews confirmed that the content surprised and delighted users (74% of 818 respondents enjoying a surveyed show “a lot”),  we found that many of them weren’t navigating to deeper parts of the experience. A closer look at usage metrics showed that very few users would interact with relevant content that was one or more click away. Informal feedback showed that users were having trouble navigating through the structure of TV results. Some of the misunderstanding comes from the mental model of Shazaming music; for example, one user commented on liking a show result “so much that they would Shazam it several times.” Mostly, the confusion stemmed from the complexity of the tabbed layout, and dividing the content by categories – instead of relevance. In short, placing content a click away led to significant user drop-off. One of our biggest breakthroughs therefore came in the form of letting go of rigid templates, and instead opting for building more general, smaller modules that could be tailored and rearranged for each unique show. This made it easier to serve the most relevant content up-front for users, while also adding less overhead to the Production team having to fill each part of a template. It also allowed the development team to build a highly scalable framework.

Increasing Engagement

The Timeline

As the Superbowl approached in early 2014, our Product team took immediacy one step forward by setting out to create the TV Timeline. Working with our Advertising, TV and Production teams, I designed and supported the development of this feature. The Timeline allowed our Production team to create a live stream of varied content, readily discoverable in one place. For the Superbowl, it also allowed our Sales & Advertising teams to place sponsored content. Similarly to all other content pieces, the modules in the Timeline were designed to be general and to adapt to varied content.

The design of the Timeline needed to feel like a content stream, but one that was synchronous and “happening live” (unlike most asynchronous feeds that mobile users are familiar with, such as Facebook Home). It also needed to be visually distinct from the Shazam newsfeed, allow the user to focus on a given piece of content, and represent a contained, event experience.

The final 3 iterations of this work included a horizontal layout, a version with a Timeline preview module, and lastly a design with a tab dedicated to the Timeline.  The three different versions can be seen in these Flinto web prototypes:

Timeline: Horizontal      Timeline: Preview Module     Timeline: Tab

Looking back, I would’ve worked with our product team to first define placement requirements for the Timeline. At the time we were still learning from our usage metrics and figuring out whether Live TV would be the most scalable Shazam for TV product (due to the high impact channel of using on-screen Calls to Action). On the hunch that this was going to be the best path for a Shazam for TV product, it made sense to begin crafting Live TV results with consistent content that users could become familiar with (thus creating a Shazam for TV product identity). However, looking for this consistent content structure added complexity to the Timeline design, especially in regards to placement and visibility of other content in the result. In other words, would the Timeline take over all other content? Would it be just as important? Would people looking for music get lost in other timeline content and have no consistent place to find it?
While it was helpful to design and gather early feedback from users on alternative treatments, the final dedicated Timeline Tab design was chosen because it would immediately surface music and promotions. This made sense given our previous user behavior learnings. It was also the right strategy as Live TV became more focused on one-time events (which could be more unique as they wouldn’t have repeat Shazams by a given user, over time).

Initial Visual Design

Given that a branded look-and-feel was expected from our TV network partners, we had to find a a scalable way of solving for color-scheme without having to pick and choose colors for each show. With some experimentation and direction from iOS7, the solution came in the form of transparent content pieces, laid on top of blurred show cover-art. This enabled the brand colors of each show to come through in the experience, with content modules only having to be built once. Lastly, over time I refined the layout and typographic set and colors to reflect other evolving, redesigned parts of the product. This created a cleaner guideline for the Production team and designers, and enabled them to reuse the live TV framework for other content that didn’t need the blurred background with transparent overlays.

Final Product

Once we had established a strong content relationship and gained traction with our partners, we were able to streamline the design of live TV shows to fit more cleanly within Shazam. A re-designed color palette uses white and neutrals to make the content more prominent. The final product has been used to produce a variety of shows, from American Idol to the X Factor, to the Voice, Grammys, Oscar’s, Country Music Awards, the VMAs, the Superbowl and many, many more. For the production and newsfeed marketing of these shows, I also led the creation of reusable content templates; this effort helped to make the production of image assets faster, cleaner, and more consistent as well as ensured legibility of text on images.

Supporting Product Growth

The Editor & Other Content

Last but certainly not least, I worked with our developers and production team to build the design and system alongside the content editor that would generate the custom experiences. Over time and through a number of constraints and guidelines, we continued to refine the system and tis modular pieces to both scale well with varying content, and work optimally in both iOS and Android phones. This editor and system is also used to create peripheral content pages from the Shazam newsfeed, including Featured by Shazam landing pages, as well as curated playlists, and other newsfeed items. All of this in-house content production was a very apt test for the system, since it would eventually be opened to third parties to create their own custom experiences on Shazam.

Impact & Results

Over the course of a year, I continued to work with the TV, Production, Development and Data Analytics teams to help build and refine the Shazam for Live TV framework and experiences.

The experiences built using the Live TV framework have increased Shazams year over year for many shows, including: BET (170%), CMAs (300%), Grammy’s (168%), Super Bowl (200%). These engaging experiences have contributed to supporting our growing Monthly Active User base, a major company goal for Shazam. Besides saving the Production team a lot of time in creating the experiences, the launch of the Timeline feature received very positive user feedback. Below are Tweets captured during the 2014 Superbowl.

Now this is an application. #Superbowl commercials, music, tweets and much more in the #Shazam app.

Bert Callens

Best #app for the #superbowl game. Go ahead and #shazam the tv!

Paulina Casado O

If you're watching the #GRAMMYs and not using @Shazam, you're missing out on the chance to see brilliant product integration.

Alex King

Also, can we talk about how much I love @Shazam posting #SYTYCD music? My @Spotify lists are blowing up!!

Laura Murphy

Live song timeline at @Shazam w/ #SYTYCD is awesome! @Shazam @DANCEonFOX

Positive user sentiment was echoed in our metrics, where overall time spent and click-through rates increased significantly. Timeline performed really well in recurring performance shows, but also in tentpole events, where it gained the highest time spent of any Shazam result (including music) at about 2 minutes. The following graph shows the impact of Timeline on a show like the Voice, where more Timeline items increased total time spent.

Last but not least, the Grammys experience helped us reach the most Shazams ever for a show – at 1.1 million. Check out the video to see overall tag activity during the live performances.