NPR’s new redesign aims to create a less overwhelming reading experience

My first instinct when describing NPR.org’s just-launched redesigned homepage is to say it feels like the radio: soft-spoken and spare. But upon further reflection, I think the better old-media analogy for the new homepage is newspapers.

That might sound like a surprising take considering Scott Montgomery, NPR’s head of digital news, said in a phone interview that a goal of the new responsive homepage is to step outside traditional news website design — the jam-packed grid that resembles a newspaper and has been painfully slow to fade away since its adoption in the early days of the Web.

But what those densely packed boxes of links we’re used to don’t offer is the pleasure of leisurely browsing an orderly, elegantly presented collection of stories — in other words, the deep, exploratory experience offered by newspapers. And that’s what NPR aims to offer its homepage visitors starting today.

Just as the front page of a newspaper allows us to try stories on for size before we jump inside for more, this new NPR homepage provides better ways to evaluate which stories we’re likely to enjoy. Where NPR on the radio provides no choices about what to consume, the old NPR homepage offered too many. The new page nicely occupies a new space in the middle.

Simple, spacious and serendipitous

The simplicity and spaciousness of the new homepage is jarring considering NPR.org used to offer up to 100 links to choose from:

Screenshot of old site.

Before, as Montgomery put it, visitors were faced with “tons and tons of links, tons and tons of headlines.” It was so overwhelming, he said, that “you end up not choosing anything.” Now, depending on your platform and screen orientation, you’ll likely see only a few stories to select from upon arrival, along with tidy menus, up-to-date news links and a live stream from your local station, all of which remain visible even as you scroll down to see more stories in the main stack.

Redesigned site.

Zach Brand, NPR’s vice president of digital media, said users’ choices will be better informed thanks to the flexibility afforded by the new story boxes, which aren’t constrained by size or the type of media that can go inside.

Where before, for example, it wouldn’t have made sense to showcase a Krulwich Wonders item on the homepage with a simple blurb and photo, editors now have the ability to show off content on the homepage with video, audio, slideshows — whatever works. Photos are afforded more room, and all stories in the main vertical stack get explanatory blurbs. A Tiny Desk concert can occupy prime real estate on the page without being forced into an awkward box that makes it look like breaking news.

In essence, the stack allows editors to establish a better hierarchical showcase of stories and allows readers more opportunity to consider whether a story is worth their time — whether it’s likely to offer that serendipitous “driveway moment,” in public radio lingo, that hooks you when you discover it.

And what about those links that were previously located further down the homepage and now seem to be buried even more? Well, those weren’t getting much attention on the old homepage anyway, as visitors overwhelmed with the “paradox of choice” defaulted mainly to the top few items, Brand said. Now, all stories have a better chance of grabbing your attention as you descend the stack’s infinite scroll and uncover them.

Deeply engaged audience

Montgomery described the NPR audience as highly engaged and interested in comprehensive content. That’s especially true for NPR’s most loyal followers, who also are more likely to be the ones entering the site through the homepage. Readers eager to engage deeply with stories, then, hopefully are willing to browse deeply, too.

And that audience increasingly is browsing the site on mobile devices. The mobile/desktop split is close to 50/50 now, making responsive Web design the clear path forward. It’s the best way to future-proof content, and that’s why NPR tested the homepage on Google Glass, too.

The new homepage also introduces a new form of sponsored content, called Center Stage, which is unveiled a few stories down the page. The space is custom-built by NPR, with sponsor-provided video content screened by NPR. The result: a high-quality, sensible advertising display that isn’t flashy but also can’t be mistaken for editorial content:

Center Stage

“It stands out just the way a sponsor would want it to stand out,” Montgomery said. “But it doesn’t cover any of our editorial content even for an instant.”

Iterative design process

Brand emphasized the iterative nature of the NPR redesign. Responsive redesigns of the blog pages were introduced in the fall, and new responsive story pages launched in the spring, receiving positive feedback. The piecemeal approach means lessons learned from one step can be applied to the next. Designers learn as they go, and the best way to learn what works is to see how users interact with the site for real, outside of a lab setting.

Some issues remain for future iterations: I’m skeptical of the infinite scroll, for example. It’s a great tool for some blog posts and Twitter feeds where content is fully consumable without clicking, but it’s frustrating to click a story deep in an infinite scroll and return with the back button only to find myself back at the top of the scroll again. Moreover, it’d be nice to have an option to load more stories from all categories rather than from just one.

Also: while it’s great to see a simple play button for my local member station automatically appear at the top of the homepage, I’m looking forward to that stream not being interrupted when I navigate to other pages on the site. (Brand said that’s a goal as his team ties all the newly designed elements of the site into a more cohesive whole.)

Finally, I hope future iterations take into account the limitations of responsive design. While the site looks nice at first glance holding my iPad vertically, it’s a little odd to not see a headline in the landscape orientation until I start swiping down:

Headline appears below photo.

The biggest takeaway: it’s great to see a website asking visitors to take their time. With the new NPR homepage, readers will have fewer stories to choose from initially, but what they do see will include more context, not unlike the five to six stories carefully selected for the front page of a newspaper. While all news organizations aren’t blessed with the attentive, engaged audience that public radio enjoys, those looking to move away from typical frenetic news web design should keep an eye on NPR’s approach.

We have made it easy to comment on posts, however we require civility and encourage full names to that end (first initial, last name is OK). Please read our guidelines here before commenting.

  • US_Citizen

    I am a web designer of 12 years. The sites stinks now. I have a busy life and very little time to keep up with the news. So having everything in front of me so I can choose what I wish to read is imperative. The absolutely only place I don’t mind scrolling is slashdot.org. Their interface is way better!!!!

  • Nadine Noky

    I actually like it!

  • Lars

    I have to agree with John – I hate it. I thought something was wrong with my video card and what I was seeing was some default mode. I can take the “tons and tons of links, tons and tons of headlines” (hint-put brain & eyes on scan mode): I don’t need a site that looks like a project out of a web design 101 course.

  • Joey Figaro

    Regular viewer here, and I enjoy it. I like not having to sort through a bucket of items on my own. The topics navigation will be a nice utility once they implement the new design on the resulting pages. Also, I personally think they should’ve implemented grid control over the content so you can choose to nuke the photos and just have headings — or reduce the image scale. Like this: http://joeysharesthings.com/image/1V0l1S1Z0t3O

  • John doe

    This story almost reads like it was written by the page designers. I’m a regular reader at NPR, and I can tell you, that almost all of their regular viewers hate it. The old page offered everything at a glance, and you could click around at what interested you. This new Tumbler page, shows very little upfront, and you have to scroll, and scroll, and scroll, to track down what used to be at your fingertips. Worst redesign I have ever encountered.

  • http://ericthor.com/ Eric Thor

    Looks very “Tumblry”, which is a good thing in this case. A few other publications, such as the NYtimes could use a similar update.

  • samantha657

    just as Keith responded I’m startled that anyone can make $4728 in 1 month on the computer. have you read this page w­w­w.K­E­P­2.c­o­m

  • Chris Mandra

    If everything is important then nothing is important. It looks, to me, like wireframes with some color and pix. It has no identity, or rather a negative one. It’s an homage to the medium of radio, kind of like a beautiful, single-minded RSS feed.