NPR’s Delightful Design

This article appears in the January 2015 issue of HOW magazine. Get all the latest issues delivered in print or digital format.


Amid changes in technology and content consumption, NPR’s in-house design team bridges digital and physical design to shape captivating storytelling experiences for its audience.

I wake up in the morning, have breakfast, and open NPR News on my mobile phone while my espresso is still fuming hot. By the time I’ve slurped back my morning caffeine, I can listen to my local NPR station during my morning drive to work, when I park, and during the walk to the office. I don’t miss a thing because I can hear it through my phone at every step. If I want to listen to a story again at a later time, there’s a good chance I can find it on npr.org. And if supplemental information that adds breadth in the form of a written article, video, graphic or other visual is available, there may be an NPR microsite that goes deeper into the story.

But it wasn’t always this way. I used to tune in to my local NPR station (WFAE 90.7 FM) first thing in the morning from my bedroom. Once ready for breakfast, I’d head to the kitchen and turn on a nearby radio. I’d listen to the news while eating, and would usually miss something while having to go from one room to another, gathering up everything I needed for the morning commute. I’d time my walk to the car during a WFAE station announcement so I wouldn’t miss any news content. I listened to WFAE on my morning drive to work, and when I’d park. If the program was something engaging, entertaining or important—as was often the case—I’d stay seated in my car to hear the entire broadcast. Over the years, I observed co-workers sitting in their cars doing the same thing, which—I have to confess—made me feel more comfortable about sitting alone in my car in a parking lot. I wasn’t the only one who suffered from fear of missing out on NPR.

NPR design; in-house design team

Photography by Stephen Voss/NPR www.npr.org

Lucky for us, that’s no longer an issue. Thanks to mobile technology and always-on high-speed internet connections, we can get content—be it aural or visual—at any time and virtually anywhere, without having to worry about missing something. As a loyal NPR listener, it’s something I appreciate, and I know plenty of other people who feel the same way.

Water-cooler discussions still happen in many offices across the world, and much of what I talk about with my co-workers has to do with what we heard on NPR or saw at npr.org. NPR’s team of in-house designers and programmers have the enormous task of bringing all of NPR’s content to audiences across the globe, and NPR’s designers continue providing that content to users in new and exciting ways, using the web, apps, information graphics, video and a range of other digital assets.

One Consistent Voice

T8223How do you take decades of radio content, and deliver it to an audience visually? In a number of ways, but above all, you need to make it consistent. NPR listeners know the news organization for its rigorous reporting and dedication to storytelling. And that quality comes across in the content they’ve delivered since their first broadcast in 1971. But over the years, as news media has moved into multiple platforms ranging from television to the internet to mobile devices, NPR recognized that they needed to visually represent themselves in the world in a consistent visual voice.

To help them achieve that goal, Zach Brand, NPR’s vice president of digital media, brought in Liz Danzico as creative director in January 2014. She continues to be what Brand calls an “etiquette guide” who works with a range of creative services teams across NPR.

Brand says Danzico came in to assist with NPR’s efforts of translating their rich auditory content into visual and physical experiences, and above all, “to make sure the efforts are great—and great in cohesive ways.” In her new role, Danzico’s efforts can be seen in a unified look and feel that has begun to take shape across all of NPR’s visual manifestations.

Brand describes NPR’s visual essence as one of “simple elegance: Not too loud. Not too brash. Not flashy neon signs.” In addition to npr.org, listeners are able to experience their content through apps for personal electronic devices such as smartphones and tablets, as well as the collection of microsites housed at npr.org.

Fans of “Arrested Development” can explore the running gags strung throughout multiple episodes.

Fans of “Arrested Development” can explore the running gags strung throughout multiple episodes.

commencement

The Best Commencement Speeches, Ever site catalogs over 300 commencement speeches dating back to 1774.

tshirt

Quotable turns typed text into an image.

quotable

Learn about everything that goes into making a T-shirt at the Planet Money Makes a T-shirt site.

Of the many in-house departments at NPR, the digital media team and the visuals team produce a majority of design for such platforms. They are constantly creating, iterating and releasing innovative ways to deliver the news and stories that NPR listeners have come to enjoy over the years. But because technology changes, it’s a never-ending game of learn-as-you-go in order to stay abreast of what’s cutting-edge, what works, and what’s next. As a result, they’re also designing for what Brand calls “nascent platforms” such as wearables, including Google Glass and smart watches.

Screen-Shot-2014-12-12-at-2.46When the NPR News app was released in August 2009 for the iPhone, it launched to the top of the free apps in the App Store news category, proving that plenty of listeners wanted to have NPR in the palm of their hands at all times—not just when they were near a radio. When the NPR One app was released in mid-2014, listeners were given a new way to access news and stories. NPR digital team senior product designer Benjamin Dauer explains the app: “NPR One is a new way for consumers to get digital content. It’s an app that connects you with a stream of local and national stories, fits into your life and learns from you over time. NPR One is trying to solve a difficult problem: taking four decades of storytelling, and delivering that amazing content, around the clock, all on demand.” Having worked on and delivered a wealth of NPR products, including but not limited to NPR Infinite Player (NPR for Chrome), NPR for Connected Cars, NPR News for Android and iPhone, NPR for iPad, and NPR One, Dauer brings a keen design sense and an understanding of how humans interact with electronic devices to every product he develops.

The Secret Sauce

As an NPR digital team senior interaction designer, Vince Farquharson works closely with product designers such as Dauer, and assisted with the design, development and release of NPR One, as well as revisions that will go into its future iterations. The team has been looking for ways to grow and improve the app, but they’re always aware of the need to keep themselves in check, and not think too wide and far. “We’re all mindful of the MVP [minimum viable product]: the least a thing could be,” Farquharson says. “It’s less blue-sky. Not overdesigned. Not overpromised. In two weeks, we have something done, and changed, and releasable to our potential users or our internal stakeholders.” And although he has been working on the app, Farquharson knows his role in the design, development and testing: “I’m not my user.” Distancing himself from the product in this way forces him to rely on the end-user—the general public, who ultimately will download NPR One.

vxv9akli4oema5oxg4ef

Enroll Today: Motion Graphics and Animation Design, a course by Sean Brodbeck

Another challenge NPR digital media has faced relates to workload: With so many products in the pipeline, how do designers balance it all? Because design relies on and incorporates technology, designers will always have something new to learn, especially those working in interactive and user-experience design. When they began creating NPR One, Dauer took steps with his own process in an effort to not only move the product forward, but also to assist those around him: “I’m constantly looking for ways to increase workflow efficiency—to streamline my process. For example, NPR One marked the first time as an organization we shipped a new app on both iOS and Android at the same time. To maintain our velocity, I took it upon myself to learn aspects of the Android Studio development environment—pulling the project code from Git and making a new branch for design tweaks, editing it, deploying local builds, testing and committing that code back to the repository for merging. This allowed the developers to remain focused on their tasks while I tweaked and finessed the design on my own branch.”

Before NPR One, listeners could access NPR content through a variety of platforms, but with NPR One, the digital team is hoping to create a customized experience. Dauer, Farquharson and their colleagues have managed to deliver an app that is not only easy to use, but also aware of your usage. The visual look and feel is important, and the overall experience, including the content you receive, is equally—if not more—important. According to Dauer, “In addition to taking cues from the user—plays, skips, shares, searches—it uses human curation in combination with an algorithm to determine what rolls into what.”

As Farquharson explains, “[It] can learn and know your tastes, giving you suggestions. We have our own editorial secret sauce. It will never be a machine on autopilot.”

Like other digital, interactive and user experience designers, NPR digital media is agile and uses SCRUM in order to stay on track, check in with team members and conduct retrospectives. Their product designers and interaction designers build products together, and their responsibilities often cross over. Farquharson says that they’ve also embraced the lean startup approach, and have an innovation accountant. “We create hypotheses that we prove or disprove using metrics, prototypes, user testing and other methods,” he says. No matter what the digital team is working on, Brand says they strive to deliver “the same depth, richness, and delight that NPR’s content does.”

Kick-Ass Content

At the end of 2013, NPR’s news applications team, which worked with the graphics and data visualizations, merged with the NPR multimedia team, responsible for making and editing photos and video. They became the NPR visuals team. Like NPR digital media, the visuals team works on web projects, but they also produce charts, graphs and data visualizations for the web and news desk. And while the newly formed team looks similar in composition to NPR digital media—both have designers, developers and graphic designers—the visuals team has different priorities. Digital media creates products. But if you ask Brian Boyer, the visuals team editor, “Visuals rarely crosses the line into something that is considered a product.” Brand defines a product as something with a longer timetable to develop and release, compared with the news events that Boyer’s visuals team delivers. “A product is influenced by the consumer world,” Brand says, and has “a durable framework that is able to deliver content in compelling ways.” Digital media and the visuals team are both constantly testing and iterating, but much of the visuals team’s output is closely tied to a news story that you may have heard or will hear, and in some cases, their work is part of a recurring NPR series, such as Planet Money. “Planet Money Makes a T-shirt” is an Emmy-winning, five-chapter online story complete with short videos and information graphics.

NPR design; in-house design team

In creating npr.org, responsive design was key so that the content and programming, such as the TED Radio Hour, functions across desktop, tablet and mobile platforms, ensuring that all users have a friendly and positive experience on the site.

Newsroom

Boyer and his team are always working with the newsroom in one way, shape or form. “Everything we do has an editor, a subject-matter expert,” he says. Boyer’s visuals team works on specific stories provided by NPR’s newsroom, as well as charts, graphs and data visualization, along with what Boyer calls “bespoke fancy story pages” such as the “Planet Money Makes a T-shirt” site. And because there’s always a new story on NPR, they constantly have a new project to tackle. One such project resulted from NPR’s Changing the Lives of Women series. The NPR visuals team created a Tumblr site where you could create a sign all about money. The crowd-sourced site boasts over 200 pages, full of financial advice in the form of colorful typographic compositions, making for a veritable digital quilt. Another ambitious undertaking was the “Arrested Development” site that cataloged running gags strung throughout multiple episodes, all cross-referenced and researched by NPR’s Adam Cole.

Boyer’s team has photojournalists on assignment and will take on various photo tasks from time to time, including photo editing for npr.org and producing animated GIFs. They’ve also tackled large screens, having produced NPR Music’s Tiny Desk Concerts Roku Channel. But because the visuals team is tied to the newsroom, they sometimes need to be more reactionary, whether it means getting a photographer out to Liberia or updating one of the custom websites at npr.org. And because of their shorter release cycle, and the need to get news content to viewers in a timely manner, the visuals team is acutely aware of the minimum viable product. “Sometimes, you have to kill your darlings,” Boyer says.

While Boyer and his team’s focus is centered around design, he realizes that it should never take over. “I’m not interested in graphic design for graphic design’s sake. There’s a trend these days in dressing up stories online. But I can’t dress up a dog. Novelty is rarely the thing that leads you to success. The content has to kick ass,” he says. If you’ve used any of the sites created by the NPR visuals team, don’t be surprised if you find yourself going down the rabbit hole of content and not obsessing over the clear, flawless design. In many cases, the interface often becomes invisible, and you find yourself walking lockstep with one of their web projects, achieving what Boyer calls content usability: “Usability is as important to content as the interface,” he says. In the end, the story becomes the focus, and everything that carries and delivers it furthers your understanding, engagement and, in some cases, your entertainment.

NPROne-Quintet

The NPR One app learns from your behaviors and listening preferences to provide a customized stream of NPR programs.

civilrights; NPR design team

Of the many “fancy story pages” that Brian Boyer and his visuals team have produced, Behind the Civil Rights Act combines a variety of visual sources into one easy-to-use website that delivers an educational and informative narrative about the Civil Rights Act.

In-House Spirit

Working in-house at NPR puts designers close to news and subject matter that is topical, relevant, critical and intriguing. And they get to work with it on a daily basis, producing visuals, applications and products for a large and extensive audience around the globe that wants access to that content. Working in-house provides that rare combination of both owning and distributing the design you produce, and one of the main reasons Dauer enjoys working at NPR is because he’s where content creation happens, and he gets to provide the framework and design that delivers it to audiences. And working in digital design, with software development kits, HTML and CSS and audio and video, means that you’re always having to learn something new in order to tackle a challenging issue. “At NPR, everyone is so committed to the mission and trying to solve hard problems,” Dauer says.

Because news is always happening, and there will always be stories to tell, NPR’s designers will always have to figure out how to deliver those stories in unique, useful and powerful ways. Their broad range of subject-matter experts have come together and continue to work hand-to-hand to create those visual and physical experiences. And because they all understand the mission, they’re able to get the work done, focusing on creating the best final outcome. “I’ve worked with people that I’ve loved before at other jobs, but not quite as much as here,” Farquharson says. “We’re all a little Type A on the inside.” But he admits that it’s not always warm and cozy, noting, “We’ll butt heads, then hug it out, and maybe have a beer later”—proving that in-house designers who play together stay together.

Brian Boyer Washington, DC www.npr.org
Zach Brand Washington, DC www.npr.org
Liz Danzico New York City/Washington, DC www.npr.org
Benjamin Dauer Washington, DC www.npr.org
Vince Farquharson Washington, DC www.npr.org

  • NPR’s marketing department has a trove of eye candy. Check out the design behind the merchandise and other promotional products they create.

Don’t miss all the latest issues of HOW magazineHOW strives to serve the business, technological and creative needs of graphic-design professionals with a practical mix of essential business information, up-to-date technological tips, the creative whys and hows behind noteworthy projects, and profiles of professionals who are influencing design. And now you can get it delivered in print or digital format!mw-how-imagemw-subscribe-button

COMMENT