Project: Sundance TV website re-skin, for AMC Networks

|
AMC Networks
Sundance TV website re-skin

A new website for one of cable’s more refined denizens.

A longtime haven on the cable matrix for thoughtful film and other independent-minded programming, Sundance Channel has in recent years quietly begun to create content of its own. In late 2013, emboldened by two seasons of well-received original series, they hired Johnson & Wolverton to rebrand them as Sundance TV. J&W hired us to look at the online component of the brand.

This is a re-skin rather than a redesign, as the underlying use patterns and content groups of the site’s previous incarnation remain: AMC Networks, which owns Sundance TV, runs all of their sites (AMC, IFC, etc.) on the same platform and with the same basic architecture, and the site uses standard internet ad units. So we couldn’t change much beyond the master CSS file.

But sometimes that’s okay. A little discipline can work wonders: merely rationalizing and setting clear hierarchies for the typography did a good deal, as did the use of webfonts – several weights of Benton Sans, the anchor of the brand language, had been recently made available for licensing from Font Bureau, and we used them. We also stripped away the presentational cruft from inline video players and social media icons, and set strong rules for presenting sub-brands (e.g., show packaging) pushing the Sundance TV brand and its content to the fore.

1/6

Index page

J&W’s campaign language is about content and quality: the shows themselves, and what other people say about them. The selling is left to the reviewers, in the form of real blurbs writ large. Here, the anchor video carries one such blurb on its poster frame. In contrast, the network’s voice is friendly and informal, but mainly used to describe, not hype.

Shows often have rich brand languages of their own; we counseled to use those sparingly on the site, opting instead to use stills or dramatic keyframes to keep the content to the fore.

navigateup

2/6

Series aggregator

Page gathering the various series on Sundance in one place. The “blurb” strategy described above also works for the network; here, and on subsequent pages, the top part of the page features a channel-specific blurb drawn at random from a growing database.

Although we’re not huge fans of slideshows, they were part of the existing architecture. We worked hard to simplify and integrate them with the rest of the page, presenting each image as a content frame, with title, caption and links included on the same surface.

navigateup

3/6

Individual series index

Although there is some show packaging here, it’s restricted to an area on the main video poster frame. Successful shows can own their networks, a lesson we learned with The Daily Show when we were working for Comedy Central. In this context, the program must always be seen as part of the network’s brand. We could reference the show’s packaging in subtler ways, as in the small red keyframes below the main viewer.

navigateup

4/6

Films aggregator

Aggregator pages (series, films, festival, etc.) behave in consistent ways throughout the site, though the content they carry helps make them unique. Sundance’s interactive wing pushes a lot of content to the site weekly; we paid particular attention to defining rules for content types, so that the user’s experience would be coherent from visit to visit.

navigateup

5/6

Schedule

Here, the visual language is applied to denser list-type information. As the site is responsive, hierarchy had to be controlled by color and value rather than scale.

navigateup

6/6

Blog aggregator

The site contains many blogs: most of the series have their own blogs, as do each of the major categories and the Sundance Film Festival, which keeps a room here. This is the aggregator for them all, shows the visual coherence of each post – clear hierarchies and chunking of different types of information: comment count, tags and so on – which would carry over no matter where the post was rendered. We corralled the social/sharing buttons into a cluster using a picture webfont (Symbolset’s Social Circle), which kept the buttons from overpowering the post, as can so easily happen.

navigateup
Credits/colophon
Typography
Benton Sans, various weights
Agency
Johnson+Wolverton
Creative directors
Alicia Johnson
Hal Wolverton
Designer
Adam McIsaac
Development
AMC Networks
navigateup