• Save
Redesigning NPR.org
Upcoming SlideShare
Loading in...5
×
 

Redesigning NPR.org

on

  • 2,594 views

This keynote was presented in November, 2009 at the School of Visual Arts UX lecture series. It discusses NPR's 2009 redesign, highlighting UX, visual design and CMS strategies.

This keynote was presented in November, 2009 at the School of Visual Arts UX lecture series. It discusses NPR's 2009 redesign, highlighting UX, visual design and CMS strategies.

Statistics

Views

Total Views
2,594
Views on SlideShare
2,581
Embed Views
13

Actions

Likes
10
Downloads
0
Comments
1

2 Embeds 13

http://www.slideshare.net 12
https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • love this! especially because they illustrate their thinking all the way back to 1997, which gives great perspective.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Redesigning NPR.org Redesigning NPR.org Presentation Transcript

  • All Things Redesigned: Visualizing NPR creative commons photo by flickr user billyv
  • Scott Stroud Callie Neylan David Wright Systems Engineering, MFA in Design, Degree in Visual University of Virginia focusing on visual and Media with Focus: User-Centered user-centered design concentration in Software Design photography Lived for ten years in Certified Usability Seattle, working at Background in news Analyst & PMP way too many design: Knight- Over 3 years at NPR startups and Ridder/Tribune renowned design Interactive, USA Likes long walks on the firms including TODAY beach and fault-finding Gensler and Teague Adjunct faculty at Adjunct faculty in the AU’s School of MFA Design program Communication at MICA, working with teaching Web design Ellen Lupton Was once on The Has two of each: Price is Right and lost fixed-gear bikes and a car. Weimaraners NATIONAL PUBLIC RADIO
  • Scott Stroud Callie Neylan David Wright Systems Engineering, MFA in Design, Degree in Visual University of Virginia focusing on visual and Media with Focus: User-Centered user-centered design concentration in Software Design photography Lived for ten years in Certified Usability Seattle, working at Background in news Analyst & PMP way too many design: Knight- Over 3 years at NPR startups and Ridder/Tribune renowned design Interactive, USA Likes long walks on the firms including TODAY beach and fault-finding Gensler and Teague Adjunct faculty at Adjunct faculty in the AU’s School of MFA Design program Communication at MICA, working with teaching Web design Ellen Lupton Was once on The Has two of each: Price is Right and lost fixed-gear bikes and a car. Weimaraners NATIONAL PUBLIC RADIO View slide
  • Scott Stroud Callie Neylan David Wright Systems Engineering, MFA in Design, Degree in Visual University of Virginia focusing on visual and Media with Focus: User-Centered user-centered design concentration in Software Design photography Lived for ten years in Certified Usability Seattle, working at Background in news Analyst & PMP way too many design: Knight- Over 3 years at NPR startups and Ridder/Tribune renowned design Interactive, USA Likes long walks on the firms including TODAY beach and fault-finding Gensler and Teague Adjunct faculty at Adjunct faculty in the AU’s School of MFA Design program Communication at MICA, working with teaching Web design Ellen Lupton Was once on The Has two of each: Price is Right and lost fixed-gear bikes and a car. Weimaraners NATIONAL PUBLIC RADIO View slide
  • 1997 NATIONAL PUBLIC RADIO
  • 1999 NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO
  • 2003 NATIONAL PUBLIC RADIO
  • 2005 NATIONAL PUBLIC RADIO
  • SUPPORT FOR: Breaking news Analysis Arts & life Unique audio NATIONAL PUBLIC RADIO
  • TOTAL AUDIENCE FOR NPR’s NEWS PROGRAMS 2000-2008 24 22 20 18 16 14 12 ’00 ’01 ’02 ’03 ’04 ’05 ’06 ’07 ’08 NPR News Program Listeners (millions) Sources: NPR, The Washington Post NATIONAL PUBLIC RADIO
  • 2008 NATIONAL PUBLIC RADIO
  • Traction finally came from user-centered design approach. NATIONAL PUBLIC RADIO
  • it’s ON NATIONAL PUBLIC RADIO Source: Nintendo
  • Why not just crank out a news site and take on CNN? NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO creative commons photo by flickr user chrisdag
  • UNUSUAL ROOTS Audio Weird news cycle Grab bag Need for speed NATIONAL PUBLIC RADIO
  • RADIO ONLINE NATIONAL PUBLIC RADIO
  • What should we create ? NATIONAL PUBLIC RADIO
  • What does NPR look like? NATIONAL PUBLIC RADIO
  • How might we design to scale? NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO
  • What should we create ? NATIONAL PUBLIC RADIO
  • NPR Re-design Discovery Phase Fri May 23 2008 .2 Personas The insatiable newshound Goals Marty wants to be (and remain) informed in intriguing and complete ways almost all day long. Behaviors Requirements + needs Marty has a daily routine for interacting with Marty requires clear direction towards the most news sites—he cycles through one, two, relevant and timely news items of the day (not Martin E. Davis sometimes even three sites per day. He considers all of them his "favorites". necessarily of the minute). He also needs a clear, visual differentiation I am an insatiable consumer of Marty uses most of his free time (home, work, between the value of NPR’s story coverage versus news and current events—I visit commute) to read about, listen to, or view what is his other sources’ coverage of the same story. a number of news sources happening in the world. Specific to NPR, he needs to easily find photos throughout the day, and NPR.org When he visit a news home page, he views them that augment the stories, including pictures of is one of those. in a distinct way in order to get a quick sense of what is happening in the world. Specifically, he radio personalities and correspondents as well as visuals associated with a radio report/story. scans top stories, major headlines and top photos A Little More About Marty in the Nation/World lists of stories on a news site He appreciates NPR as a trusted news home page. source, but doesn’t dismiss other sources as less meaningful. People like Marty often register for online summaries or newsletters which collect and He tends to visit and enjoy “popular” press collate headlines. These summaries appear in his sources (Newsweek) and sources rooted in email inbox, displaying headlines with short satire or irreverence (Daily Show, Colbert blurbs of information. Report). As with news home pages, the insatiable quickly Is comfortable with technology. scans these headlines and then decides which ones require further review. Even if he is not familiar with a technology (RSS), he isn't afraid to admit his Marty takes the time to scour as many sources as ignorance. they like and then make the decision to continue or not.
  • NPR Re-design Discovery Phase Fri May 23 2008 .3 Personas The consistent NPR listener Goals Judy wants to rely on a trusted (and editorial) source to provide knowledge, insight and efficiency. To some extent, Judy wants let others do some of the heavy lifting when it comes to gathering news and information. Judy wants the whole story delivered in a compelling way, something she has come to expect from NPR over the course of her lifetime as a listener. Behaviors Requirements + needs Judith T. Bellino Judy tends to filter news items by most popular, She needs to easily identify and access her local I see NPR as my most trusted most emailed, etc and visit that content accordingly. or favorite stations (which might often number more than one or be located in other regions). source for news, knowledge, insight and storytelling. I listen to Judy often visits npr.org for more information on Judy needs to recognize new ways to fit NPR into various NPR programs and visit a radio program—no matter the context in which her life and easily access these channels within she listened. Meaning, even if she is in the car, the context of her current habits. npr.org for more information and Judith will remember to go to npr.org for more to catch up on anything I've information about a story the next time she has an opportunity Specific to npr.org, she needs to easily find and complete listening to an interrupted program. missed. Judy reads blogs (at least once) without too harsh She also needs to easily find photos that a critical lens and, over time, makes a decision to augment the stories, including pictures of radio A Little More About Judy continue reading or not. personalities and correspondents as well as She is amenable to the new and visuals associated with a radio report/story. unfamiliar, particularly in a place as In thinking about NPR programs, Judy is more familiar as NPR. likely to make an appointment to listen to Wait, Further, Judy needs to easily find the name of an Wait, Don’t Tell Me than On the Media artist or song heard on NPR—or any public radio For instance, a site like NPR music (with program for that matter. its different look and feel) doesn’t scare People like Judy may use podcasts to supplement her, it intrigues and delights her, but only or shift their NPR radio listening, but certainly if she can find it. not to replace it. NPR’s content and offerings is often a better match for Judith's tastes/habits than she may even realize.
  • NPR Re-design Discovery Phase Fri May 23 2008 .4 Personas The purist NPR listener Goals Sabrina lives in a completely information-saturated world and wants to make the most of her time. She relies on mechanisms that truncate and streamline information (email alerts, RSS readers, trusted editorial lists) to do that for her. She wants to make use of these round the clock. As an NPR listener, Sabrina wants to continue to considers herself part of a very special club. She wants to feel smart, special and perhaps a little more wise than the people around her. This isn't intended in a mean way, just in a “knowing” way. Above all, Sabrina wants to maintain balance and perspective in the amount of information they have to consider each day. Sabrina Breda Behaviors Requirements + needs I often listen to NPR on the radio, but rarely visit npr.org. For Sabrina is skeptical of blogs and will most likely Specific to npr.org—on rare occasions, she needs online news, I go to Yahoo! or not read blogs even embedded within their to easily find and complete listening to an Google News and use those sites trusted sites. interrupted program. to sort through all the news out More likely to make an appointment to listen to there for me. On the Media or the Bryant Park Project than Wait, Wait, Don’t Tell Me. Sabrina likes to think of herself as different from A Little More About Sabrina others, considering herself more educated and She is solely interested in NPR for its not as interested (or barely interested) in pop radio content. Other NPR properties (.org, culture. She is also not as into “consuming” stuff music section) will rarely interest or as she believes others to be. intrigue her. A good deal of her identity is wrapped up in these More than Judy or Marty, Sabrina has a beliefs. stronger connection to NPR programs than news for news sake. Given that, she is still not likely to read more about the programs online. Purists can often be misconstrued as humorless. They’re not, they’re just very confident in what they like or don’t like.
  • NPR Re-design Discovery Phase Fri May 23 2008 .5 Personas The lapsed NPR listener Goals Ultimately, James wouldn't mind rekindling his lapsed relationship with NPR, it just needs to be on his terms and his schedule. James D. Emmanuel Behaviors Requirements + needs My busy lifestyle makes it difficult for me to listen to radio James often references the local independent James needs painless ways in which NPR can be programs or watch TV. I recall newspaper for interesting articles and re-incorporated into his life without changing it and appreciate that NPR has suggestions for things to do, particularly when it comes to local and live music. This is instead of radically. great content, but I often don't going to NPR.org or their local station. When life allows, he'd like to quickly enjoy NPR the time or the ability to listen. without reorientation—just jump in and go. He actively shares information online. James needs easily identifiable and navigable A Little More About James He is a music fan and influencer—“I don’t ask content areas (that are NOT program-centric). Unlike Judith and Sabrina, James doesn't friends about music, friends ask me about These areas expose him to relevant content he have deep connection to NPR. He music.” may care about. appreciates NPR as a service provider. He has been an NPR listener in the past, but a He acknowledges its value but doesn't change in lifestyle has resulted in a change in consider it an appointment event. her listening/consuming behavior. As a past listener, he regrets not His lifestyle has, perhaps, cut radio out of the consuming it anymore but it’s not part of mix. Consequently, NPR falls out of the mix as his routine and, therefore, not as well. accessible. Every once in a while, he misses the place NPR filled in his life when he was a listener.
  • NPR Re-design Discovery Phase Fri May 23 2008 .6 Personas Outside the world of NPR Goals Even though she may not realize it, Lenny discovers content serendipitously. Most often, she'll expect an inbound link to complete a one-time task or fulfill an "in the moment" desire. And once she follows the link, she wants to understand where she is and who is responsible for the content. Behaviors Requirements + needs Lenny will most likely consume news, Lenny needs to easily identify the primary value Lenny M. Barth entertainment, or content online via links rather than deliberate visits to home pages. of a landing page (slideshow? audio piece? podcast directory?) and sense no barrier to I browse news and accessing that value. Lenny will scan landing pages for content entertainment headlines on sites relevant to the task at hand. Lenny needs to easily identify where it is that like Yahoo!, Google and the Lenny is less likely to anticipate audio content, they’ve landed and where they can go to learn more about NPR and what makes it unique. Drudge Report. Those headlines as it is not typical of sites they visit nor is it an often lead me to all sorts of expectation. She needs to feel compelled to explore the site different sites. I am aware of beyond achieving their one-time goal, or to re- Lenny may recommend the site to friends or visit the site at a later date. NPR, but don't listen to it or visit family even if they don’t match with the site. npr.org. A Little More About Lenny Up until a few years ago, Lenny was unaware of NPR. Now, she simply believes it is “not really for her.” Lenny is open to being exposed to new sources of information, but within the framework of NPR, she lacks familiarity with program names, hosts, system structure, etc.
  • What does NPR look like? NATIONAL PUBLIC RADIO
  • How might we design to scale? NATIONAL PUBLIC RADIO
  • INFORMATION SPECTRUM NEWS ORGANIZATIONS SWEET! TECH COMPANIES
  • creative commons photo by flickr user binkley27
  • creative commons photo by flickr user kenmccown
  • AGILE? Do what it takes to get stuff done. NATIONAL PUBLIC RADIO
  • New visual design Flexible presentation Editorial efficiency
  • Flexible presentation? NATIONAL PUBLIC RADIO
  • “ Develop a layer between the database and the CMS that allows easy creation of new display views: primarily web, but could really be anything.” NATIONAL PUBLIC RADIO
  • Days not weeks. NATIONAL PUBLIC RADIO
  • DEV DESIGN DEV DESIGN NATIONAL PUBLIC RADIO
  • DEV: Simplify IA: Manage DESIGNER: Invent NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO
  • Support the designs? Manage groups of pages? Simplify code base? NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO
  • Developer Designer IA NATIONAL PUBLIC RADIO
  • Sometimes we fight NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO
  • Web design is a blue collar job. NATIONAL PUBLIC RADIO
  • Giving a PSD to someone who codes does not make you a web designer. NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO
  • </soapbox> NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO
  • NATIONAL PUBLIC RADIO
  • We democratized page design. NATIONAL PUBLIC RADIO
  • EVERYONE IS A PAGE DESIGNER NATIONAL PUBLIC RADIO
  • Working with images in Seamus 1 Obtain photo 2 Crop to aspect ratio 3 Place on story 4 Promo assignments are shared Promo images will automatically appear on home page, agg credit/caption pages, home page square rectangle (1:1) + API (4:3) + E-mail newsletters + iPhone In the new system, you crop to an aspect ratio, not a + more specific size. Seamus now does the resizing so you original photo don't have to create multiple sizes of the same crop. You can obtain photos the same way For a typical story, you'll make a rectangle crop (4:3). you're used to -- by yourself or with If you need a square promo, you'll make 1:1 crop. You help from the photo editors. also have the option for a unique enlargement crop. All three crops belong to the same image resource, so they share the same credit and caption information. You only have to enter it once. aggregation pages In seamus, you decide how big you want your photo to appear. Most images will be 2-col in size. Photoshop actions workflow Good Crop. Bad Crop. Images are even more important in our newest site design. Good crops are essential to great page design. Rectangle images Square images 1 Open your image. 1 Open your image. Original image Story page/featured area image Square promo image Decide what kind of photo you need and crop your Decide what kind of photo you need and crop your 2 2 image using the appropriate Photoshop Action. image using the appropriate Photoshop Action. Click "front image" in the photoshop toolbar. If the Click "front image" in the photoshop toolbar. If the 3 3 width is larger than 1,000 pixels, use the Reduce width is larger than 200 pixels, use the Reduce to to 1000px Photoshop Action. If it is less than 1,000 200px Photoshop Action. If it is less than 200 px, px, proceed to the next step. proceed to the next step. good crop bad crop 4 If needed, adjust levels and apply the Unsharp 4 If needed, adjust levels and apply the Unsharp uncropped good crop bad crop When cropping promo Mask Photoshop Action. Mask Photoshop Action. images, it is important to For images used on the story page or in featured make a tight crop. At a small Save the image useing the Save as JPEG Save the image useing the Save as JPEG areas, it is better to include more detail. The bad crop size, you can see how the 5 5 Photoshop Action. Photoshop Action. is too tight and doesn't give enough sense of place. bad crop becomes tough to understand. 6 Revert using the Revert Photoshop Action 6 Revert using the Revert Photoshop Action
  • Good Crop. Bad Crop. Images are even more important in our newest site design. Good crops are essential to great page design. Original image Story page/featured area image Square promo image good crop bad crop uncropped good crop bad crop When cropping promo images, it is important to For images used on the story page or in featured make a tight crop. At a small areas, it is better to include more detail. The bad crop size, you can see how the is too tight and doesn't give enough sense of place. bad crop becomes tough to understand.
  • The last redesign? NATIONAL PUBLIC RADIO
  • Thanks. NATIONAL PUBLIC RADIO