NPR Shots Health Blog

The redesign of the Shots blog was an experiment in reductive design meant to push the concepts of page design beyond established and traditional news design patterns. By destroying the concept of a right rail and removing many non-essential elements from the page, we aimed to increase time spent on the page and create a more focused experience.

Visual Design, Interaction Design, Strategy (February 2011)

Why start from scratch?

From the beginning, this project wanted to be a redesign, not a refresh. Our team felt strongly that this was an opportunity to correct many of the shortcomings of our blog templates. Beyond that, we quickly rallied around the notion that so much of editorial design was in need of reinvention. We don't have enough forest fires to clear out the old growth. This was our chance.

We had a chance to remove everything that wasn't completely necessary to the page to give the stories and photographs room to expand and breathe. Most importantly, we had a chance to destroy the right rail. Editors use it as a junk drawer for non-curated offerings and readers flat out ignore it. Squint at any news site and you'll see nearly the same grid. Not here.

SHOTS before
SHOTS before redesign

Readability, relevance and rejection

Editorial promise as branding

A minimal navigation introduces the page with small but bold references to NPR and the main content pillars. The SHOTS branding was given some more real estate to better establish hierarchy and a sense of place. The categories were consolidated from many to just five, serving as an editorial promise about the scope of coverage.

Destroy the right rail

The right rail was effectively destroyed, putting half of it on each side of the content well. Instead of putting other content offerings into a disconnected box somewhere in the right rail, this design offers contextually relevant choices, tied to the category of the post. Less used features were relocated to a larger footer.

Sweep out the barn

Anything that was not required on this page was removed. We trimmed cruft from sharing tools, global navigation and the right rail. The de-cluttered page created plenty of room for powerful photos, bolder typography and improved readability. Elements can hang off the grid creating visual interest that was impossible in the former grid.

SHOTS story page