NPR Music Live Events Platform

Project goal: Transform a cobbled together experience trapped in a traditional story page template into a focused, cross-platform, live-event viewing experience.

Visual Design, Interaction Design, Strategy (November 2011)

Adele Tiny Desk Concert

Organic growth

In late 2010, NPR Music started experimenting with the idea of producing live events that created a digital gathering place for music fans across the country. These first experiments proved wildly successful, but were built on story page framework that wasn't well suited to the combination of live chat, photos, video and audio these events demanded. They were also completely unavailable on anything other than a desktop computer.

MLE Mobile
MLE Desktop

Paving the cowpaths with Sharpies

Sharpie sketches helped simplify the complex workflow required to produce live events. We distilled the myriad variants of the early experiments down to four main stages of a live event:

  • before the event, for promotion
  • live, during the event
  • after the event but before archived audio/video is available
  • archive version, for time-shifted participation
MLE Sketches

Early comps

When we achieved basic consensus on the UX direction, I turned my focus to the visual designs. Even from the earliest comps, it became clear that these pages deserved an environment that was free from distraction. I quickly gravitated toward the notion of ruthlessly editing (gutting) the visual elements from the page.

MLE Early Sketch

Making the case for simplicity

We had general buy-in from stakeholders on the concept of a mobile-first design philosophy. This positioned us well to simplify the mobile experiences by removing cruft from the designs that simply wouldn't fit. But what about on the desktop where scarcity of space isn't an issue? I presented an argument to stakeholders that pushed for the same reductive design on the desktop, citing examples of pared-down experiences like Vimeo's couch mode and the, then recent, New York Times The Reckoning 9/11 memorial presentation.

The argument wasn't simply about reducing visual noise on the page, it was about focusing the value of the page by providing an abundance of relevant content, not a sea of navigation choices.

NYT Reckoning

Turn down the lights, mute the navigation

The final design built upon the metaphor of a theater experience. Here, we can dim the lights and remove everything that isn't essential to participating in the event or a quick path to similar archived content. Through user testing, we validated our hypothesis that readers have plenty of context to understand the change in environment and truly appreciate an environment that is free of distractions.

Supplemental text is contained inside a drawer that we referred to as The Playbill: The information is there if you need it, but isn't competing for your attention in the distracted environment.

SXSW 2012