Inside the design process for NPR’s iPad app

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.)

Paper prototypes helped NPR designers get the feel of the iPad without actually having one.

This was important because most of the audio — the heart of the experience — on 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:

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?

An early iteration of the landscape view of the NPR home screen.

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.

The portrait view of an early prototype.

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 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.

A marked-up story page shows designers what API calls they may need.

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.

A working version of a story page. The final uses a narrower width for text to improve readability and make better use of the grid.

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.

Matt Mansfield is an associate professor at Northwestern University and the co-director of the Medill School of Journalism’s Washington program. Mansfield was president of SND in 2009. Follow him on Twitter: @mattmansfield

About Matt Mansfield

is a Partner at MG Strategy+ Design.


Pingback: Wedding Gifts?

I am an Apple owner and user. I have an iPhone 3g (i’m looking forward to the near release of the rumored 4g), and also a relatively new iMac (which I LOVE). I don’t know or understand why Apple has a problem allowing Flash technology, even though they allow many other Adobe programs such as .PDF readers, etc. Hopefully this issue won’t be an issue a whole lot longer, because as time goes on more and more people are dumping their archaic HTML websites in favor of more exciting and flashy Flash-based sites. Hope they work out an arrangement sooner than later.

Finally a decent app – the NPR is one of my favs and its great to get insight into how it was created. I really like how you dealt with the flash issue. A lot of app designers should take notes from this blogs post and hopefully we can see better apps in future.

At a Google event in Paris earlier this week, the search giant broke the news that they would soon be offering iPad users the chance to view and edit Google Docs from within the browser. They’ve also been hard at work on collaborative editing of Microsoft Office documents via Google Docs too.

You recognize thus considerably relating to this matter, made me personally consider it from a lot of numerous angles. Its like women and men are not involved until it is one thing to accomplish with Woman gaga! Your own stuffs nice. At all times take care of it up!

Hello, i think that i saw you visited my weblog so i came to “return the favor”.
I am attempting to find things to improve my website!I suppose its ok
to use some of your ideas!!

I really like using iPad and iOS, its operation is very smooth and responsive. When I played the mod game on and it was very smooth

You have touched a great topic and you have explained everything is just amazing. I want to read more like this from you. Keep it up

Kindling is dating application and program which can assist you with finding your affection. With kindling gold and premium apk you can trade boundless and get increasingly opportunity to coordinated with young lady. Truly uniquely in the event that you are searching for excellent young lady in your area you can undoubtedly ready to get your ideal date.So today I will give you kindling premium apk which is likewise called kindling gold.

Leave a Reply