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.

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, we turned our focus to the visual designs. Even from the earliest comps, it was clear that these pages deserved an environment that was free from distraction. We quickly pursued ruthless editing of the visual elements from the page.

MLE Early Sketch

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