Case Study: NPR.org

Editor’s note: On July 27, 2009, National Public Radio (NPR) relaunched the website www.npr.org through the efforts of its in-house design team and interactive agency Schematic. The following case study was written at AIGA’s request and coordinated by Sarah Zimmerman. Please contact the editor if you would also like to provide a case study.

Screenshot of the new NPR.org homepage, taken on September 14, 2009. (click to see before and after)

Client name:

National Public Radio (Washington, D.C.)

Project name:

NPR.org redesign

Duration of project:

April 2008–July 2009

Project team:

The redesign team consisted of roughly 30 people: designers, developers, project and product managers and editorial producers. For purposes of this case study, the core design team consisted of:

NPR (in-house)

• Darren Mauro director, user experience
• Jennifer Sharp design director
• Callie Neylan senior designer, user experience
• David Wright senior designer, user experience
• Brian Ingles user experience designer
• K. Libner senior analyst/information architect
• Scott Stroud senior analyst/information architect

Schematic

• Ian Cunningham creative director (New York)
• Tim Smith art director (Atlanta)
• John Ferguson senior designer (Atlanta)

Introduction and justification

NPR embarked on a major redesign of its web presence in April 2008. Its existing web platform and content management system (CMS) were outdated (it had been six years since our last redesign) and failed to provide the functionality for delivery of NPR’s signature storytelling and news reporting. An outside firm—Schematic—was hired to provide the initial visual design and information architecture, but the final product was developed in-house via a collaborative effort among NPR’s editorial, user experience, design and application development teams.

The goal

Our existing site failed to meet audience needs or deliver a news experience consistent with the NPR brand. Our goals for this launch were to provide:

• Flexibility in the presentation layer (via enhanced interactives, multimedia, audio, modularity), and a more intuitive and powerful CMS. NPR is well on its way toward the goal of training all news staff in digital media delivery via a grant from the Knight Foundation and needed a platform to better support these new capabilities. In addition, NPR has made key hires in the past 18 months to build its core multimedia, photojournalism and design teams.
• A redesigned user experience to improve the existing navigation, functionality and overall usability of the previous site.
• Enhanced visual design that strengthened the NPR brand. We were tasked with making visual something that has historically been exclusively audible. Everyone knows what NPR sounds like, but what does NPR look like?
• Improved editorial efficiency. Editorial producers were using a variety of workarounds to manipulate the system. We identified the driving goals behind these workarounds and added new features to the CMS to address editorial needs.

Methodology

Moleskine sketches from lead designers Callie Neylan (left) and David Wright explore layout options for the NPR blog and mobile site. (click for larger image)

In the early stages of the redesign, we were working with Schematic, moving linearly through the design process. Toward the end of the initial design phase, Kinsey Wilson joined NPR as senior VP of digital media, providing clear directives on how he wanted to see the team operate to build upon Schematic’s framework. The in-house product design and development was implemented via Agile development methodologies with a focus on participatory design; we had two editorial producers embedded in our group for the duration of the project. Their feedback was invaluable in helping us design a system that met the needs of our news teams. This involved a physical shuffling of a large number of staff so that the redesign team could work in close proximity. This move happened in February 2009 with a launch date set for July 2009.

Under Kinsey’s direction, we also took part in brainstorming exercises; completely rethinking and restructuring important elements of the information architecture that we felt would not work for our editorial process and/or did not reflect a certain “NPR-ness”; i.e., “wit and whimsy,” according to Dick Meyer, executive editor.

The main limitations were production time and adjusting to a new way of collaborating. We were unable to make as many improvements to the CMS for launch as we would have liked, since we were building upon our existing CMS framework.

During the earliest stages of the project, we conducted interviews and developed user personas representing our existing and potential audiences. The site architecture emerged from our understanding of user goals for finding, hearing, reading, viewing, and interacting with content. We performed several rounds of usabilty tests; these studies validated and improved our navigation model and guided our iterations of page design.

This was the first major project at NPR where Agile development methodologies were used. It took a couple of cycles for the team to adjust to this new way of working and to get into a good flow.

Challenges

Wireframes displaying the underlying grid superimposed over the story page template. In all, there are eight page templates for the site, each serving a specific editorial purpose. (click for larger image)

One of the main challenges was adapting to Agile methodologies. We had to think on our feet, be nimble, iterative and willing to fail often and fast. In some cases, we spent significant amounts of time working through a problem only to realize that our initial idea simply wasn’t going to work. We had to be okay with scrapping time-intensive, developed ideas and completely starting over when necessary.

Each one of us also had to be open-minded and empathetic. When conflicts arose over how best to solve a problem, it was imperative to remember that in the end, we were all working toward the same goal. NPR hires incredibly smart people and we were always challenging each other. This environment was highly conducive to developing a great end product.

This project was also very complex in terms of the sheer number of product users post-launch (there are more than 300 registered users of our CMS) and the information architecture of the system on both the front- and back-ends.

Because of the wide variety of editorial needs, newsrooms present interesting challenges. Post-launch, we are entrusting design tools to people who aren’t trained designers. It continues to be an exercise in the ultimate compromise between form and function.

A sample page out of the NPR.org style guide. (click for larger image)

In terms of design, NPR hasn’t historically been a design-focused organization and therefore lacked any established standard design processes or documentation. One of the main deliverables of the design group was a set of comprehensive style guides: one for the design and development teams, another for our editorial staff. We are focused post-redesign on a more visual way of thinking; the style guide will help us maintain consistency and educate the rest of the organization on the basics and importance of good design.

Results

Results so far have been very positive, although we are still in the immediate post-launch phase. We created a flexible presentation layer that allows our editorial, design and multimedia teams to quickly create new layouts with minimal dev involvement. We also developed a platform with a focus on visuals and photography, allowing for visual NPR storytelling that equals in quality to our renowned audio news delivery.

Our team has also received an incredible amount of positive press for this project, having been written about by The New York Times, Fast Company and the Poynter Institute (and now AIGA). We’re very proud of what our team has accomplished.

Beyond the results

We learned a lot through experimentation with a working prototype; we had a staging server set up that mirrored the actual site and was pulling from live databases. This enabled editors to publish actual content via the prototype, allowing us to identify bugs in the design and editorial workflows before launch.

In any large, complicated project like this, having more time would have been beneficial. However, given the time limitations, we were forced to fail fast and really focus on the most important goals of the redesign. This, I think, helped lead to a simple, elegant solution.

To other design practitioners, I would offer this advice: Design with an open mind. Our project was successful because a group of skilled, talented and passionate individuals were able to bring their skills to the table to solve a problem, while simultaneously recognizing and respecting the skills and talents of their colleagues. In the end, we were all intensely passionate about reaching the same goal.

Further reading

• Read more about the new site on NPR.org.
• See NPR web team’s Flickr set and read tweets from the relaunch.