Inside the design process for NPR’s iPad app

April 6th, 2010

By Matt Mansfield

One of the most popular free apps for Apple’s new tablet, the iPad, showcases content from National Public Radio.

The NPR app, which has been in the top free downloads since the device came out, and a companion site optimized for the iPad feature clean design and a careful attention to usability details (the ability to play audio and browse other content works well, for instance). That led me to want to hear more about the prototyping process, so I talked this week with NPR’s Paulo Lopez and David Wright Jr. about what it took to get to the finished product.

Notably, the NPR team decided to address the Flash issue for the iPad from the start: Apple’s iPad and iPhone don’t allow for the Adobe technology, which is how many online video and audio players currently work. (Apple has a good list of other iPad ready sites that support the latest Web standards and don’t rely on Flash.)

This was important because most of the audio — the heart of the experience — on NPR.org is delivered through a Flash-based player in a pop-up window, providing continuous listening. Because both pop-ups and Flash are non-starters on the iPad, the NPR team needed to re-imagine the player experience entirely. They decided on an HTML5 player anchored to the bottom of the page that retains most of the features of the desktop-browser site. For video and photo galleries, they swapped the Flash-viewers for HTML-based versions.

There’s much more about what the NPR designers did in rethinking for portability on the iPad (check out more from NPR itself here), as well as a little insight into the old-school paper prototyping process the team used to get a feel for the size of the device without having one in hand.

The designers answering the questions are:

• Paulo Lopez, who has been a senior interaction designer at NPR since July of 2009. Before that, he was in San Francisco working as an art director on apple.com and, briefly, on palm.com for a brand redesign. Check out his portfolio site here.
• David Wright Jr., who has been a senior interactive designer at NPR since February of 2009. Before that, he was a senior site designer at usatoday.com. Wright, along with Tyson Evans of The New York Times, also leads Web Design Boot Camps for SND. Check out his personal site here.

SND: I really like the feel of app. It takes advantage of the screen size. It’s intuitive. And it’s beautiful. What was the guiding thought for the design and navigation?

NPR: Thanks for all the kind words!

We knew at the start that we wanted the iPad app to go beyond the News focus of the iPhone app and represent the two other pillars of NPR, Arts & Life and Music. The set of horizontal tapes on the homepage was a concept we had very early on in the process. The approach seemed best for showing all three at once, in a manner that seemed ‘natural’ for a device that puts an emphasis on the casual consumption of content. Visually, we thought that the individual story modules made the tapes appear more tactile, sized so that some would fall off-screen and give a cue that there was more to discover. Apple’s Human Interface Guidelines suggest that there is no right way to hold the device, and optimized our layouts for each orientation.

For the story pages, we envisioned our users navigating through the stories as if they were flipping through a magazine. Swiping horizontally or tapping arrows like on an e-reader to get to the next or previous story seemed most intuitive. The story tape at the bottom allows the user to quickly jump to other stories within that topic.

A key feature in the app is the audio player. Once engaged, it’ll stick with the user anywhere they go in the app. The user can pause, play, and scrub the audio at any time. We wanted to make sure the listening experience is as good as the reading experience. The iPad’s screen size allows audio to have a greater visual presence not possible in the iPhone app.

SND: How long did you spend developing the iPad app and working on modifying npr.org for the tablet?

NPR: For the app, we had just under a month to sketch, design, and develop. We had a great foundation in the iPhone app, understanding from the beginning that our iPad app should be as functional and useful. Working with the developers at Bottle Rocket again (they helped NPR with its successful iPhone app) made it easier to implement some of those same features in the short amount of time we had before launch. As it turned out, it was not quite as easy to repurpose certain core iPhone app features — the playlist, the station finder — as we had first imagined.

To modify the site, we had just under a month to go from concept to complete. We weren’t necessarily starting from scratch, as we were able to leverage a great deal of code from our recent redesign and CMS improvement. The decision to create an entirely separate instance of the site was a lot easier because of the planning infrastructure we put in place last summer. We’re lucky to have a great team of developers who understand storytelling as well as the value of iteration and rapid prototyping.

SND: What do you think the importance of being quick to market was for NPR? I ask this because you went with a robust approach right away while others (notably The New York Times) released smaller efforts to start.

NPR: Thanks for calling it a robust approach. While we’re incredibly pleased with the products we launched, we’re already hard at work on future enhancements. It was important for us to have a good experience on launch day because our research indicated that a large number of NPR listeners would also be heavy iPad users. As an organization, we’ve made significant investments in our visual storytelling, design and technical infrastructure. Launching quickly on this platform was a perfect opportunity to put to use some of what we learned.

SND: What things did you learn from working with the new format? Anything that could help others designing for a tablet?

NPR: Conducting user tests on a such a gesture-dependent platform that very few people in the world had ever touched was challenging. Paper prototypes were obviously incredibly helpful, as was an existing familiarity with the iPhone.

SND: Anything you wish you could have done in this iteration that you did not do, either because of time or other limitations?

NPR: There were many features in the original concept that did not make it into version 1, such as landing pages for topics and a more hierarchical presentation of the day’s news on the homepage. We were certainly constrained by time, and had to avoid designs that required too much conditional coding. Our main goal was to launch something solid with an experience that didn’t disappoint. That said, we’re already hard at work at plugging these features back in. Look for some great enhancements in the updates to come.

This post was tagged: iPad, Web Design