I worked alongside the Product and Design teams to redesign Shazam results. The previous result layout consisted of a hero image along with with a list of text links, limiting Shazam to a utility that only strongly answers the “what’s that song?” use case. In order to turn Shazam into a destination, we set out to bring content forward and incentivize engagement. We achieved this by fusing a minimal design aesthetic with a dynamic grid of content modules, flexible enough to support many use cases (music, TV, advertising, etc.). The modules act like content breadcrumbs for users to discover and follow. I was responsible for supporting the overall redesign and leading the design of the TV result.
From the Beginning
The previous design of Shazam for TV results consisted of a title image and a list of links that were often inconsistent. This was part of a legacy design for Shazam, and while the intent was to deliver rich media content related to the show, its cluttered and busy layout was perceived by many of our users as a page of ads.
To decide how to build the new TV results, we first had to establish a few key product goals. This layout would show up whenever someone tagged a TV show airing on any one of 160 cable channels in the US. We knew that often people were looking for music, so we had to make that prominent. To help ease users into TV, it was desirable to make TV results look like music so that we could use consistency to help communicate the role of Shazam in “telling you more about” the show (as it can for music). In addition, using a modular design would help to dynamically change content as needed, and would best adapt responsively across platforms and devices. I was responsible for determining the order and type of content, as well as for adapting the design of modules to best fit the content. I then ran informal interviews with users to ask about what content they are sometimes curious about in shows.
By gathering interview responses, current usage data, organizing elements to create a clear hierarchy, and prioritizing modules based on business objectives, I laid out an initial list:
- Show Title
- Episode, season (if applicable)
- Music from the show
- Short show description
- Twitter (social media) feed
I finally worked closely with the design team to refine the containing modules and overlay pages. To finalize content, we also brainstormed about additional content that could be tested in the future and I designed its containers.
It’s worth noting that after we first released this TV result we came across shows that would have high Shazam rates, but often featured live music – which we don’t automatically recognize. Because any live music would need to be entered manually, I designed a “featured track” module that would be served on top of everything else to help prioritize music. This module is also dynamic, allowing many live tracks to be populated or even promoted during a show.
TV Result Design
The final collection of modules enabled a TV result for Shazam that feels at home in the product alongside music content. This enabled a clean, consistent, modular design across the product, while supporting content that tailored for TV, and remaining flexible for broadcasters and advertisers to populate that content as the platform evolves.