Redesigning NPR.org

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

SUPPORT FOR:

Breaking news
Analysis
Arts & life
Unique audio


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

Traction finally came
from user-centered
design approach.


it’s
ON
Source: Nintendo

Why not just crank
out a news site and
take on CNN?


creative commons photo by flickr user chrisdag

UNUSUAL ROOTS

Audio
Weird news cycle
Grab bag
Need for speed


RADIO ONLINE


What should
we create ?


What does
NPR look like?


How might we
design to scale?


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.


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.

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.


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


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


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.

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.

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.


New visual design

Flexible presentation

Editorial efficiency

Flexible presentation?


“ Develop a layer between the
database and the CMS that
allows easy creation of new
display views: primarily web,
but could really be anything.”


Days not weeks.


DEV DESIGN

DEV DESIGN


DEV: Simplify

IA: Manage

DESIGNER: Invent


Support the designs?

Manage groups of pages?

Simplify code base?


Developer

Designer
IA

Sometimes we fight

Web design is a
blue collar job.


Giving a PSD to
someone who codes
does not make you
a web designer.


</soapbox>


We democratized
page design.


EVERYONE
IS A PAGE DESIGNER


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
speciﬁc 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 workﬂow 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?


Thanks.


Redesigning NPR.org

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to Redesigning NPR.org

Similar to Redesigning NPR.org (20)

Recently uploaded

Recently uploaded (20)

Redesigning NPR.org