Keynote talk at the Society for News Design Annual Workshop in Cleveland on October 12, 2012. Discusses responsive design, branding, and UX for news.

1. DESIGNING for DISRUPTION
SOCIETY for NEWS DESIGN ANNUAL WORKSHOP
October 12, 2012
@marisagallagher

2. DIGITAL DEVICE EXPLOSION WE ARE AT THE BEGINNING OF A DISRUPTION
Social Media 6
%
In
55
te
es
rn
%
et
49
on
Mo
bil
79
es
Ph
eP
%
ol
ho
art
ns
ne
6%
co
s8
Sm
8%
e
%
Prin ~25
am
t 90
% ders
G
Rea
ts/e
Table
Penetration Rates
Television 100% Across Media and Connected TVs 21%
Platforms
20 40 60 80 100%
Sources: Jeffries Equity Research, PwC, Barclays - updated Sept 2012

3. BEHAVIORS SOCIAL AND ALERTS DRIVE DIFFERENT
SHIFTING EXPECTATIONS OF ACCESS AND SOURCES
2
71%
of all online
97% users get news
forwarded to them 3
1 through email and
social media
66% 3.7x
engagement with
news content when it’s
recommended
Social Media
Social Media basic engagement
Usage in with news content
Usage for general
online news adult
consumers population

4. Our Digital Footprint Today: Our Digital Footprint Today:
Disconnected & Expensive Disconnected & Expensive CREATED IN A
LEGACY EXISTING EXPERIENCES WERE
MISMATCH Sunday 5:30 PM Sunday
5:30 PM PIECEMEAL FASHION, BASED ON OPPORTUNITY
Web
Our Digital Footprint Today:
ADisconnected & Expensive Today:
Random SundayDigital Footprint
Web
Our at 5:30 PM
iPhone
5:30 PM Sunday & Expensive
Disconnected TV
iPhone
Web 5:30 PM Sunday
TV
Mobile
TV Web iPad
iPhone
Web
Mobile
iPhone
Web
Web
iPad
TV
iPad Mobile
Web
TV

5. USER EXPECTATION SEAMLESS HANDOFF & CONNECTION

6. So, what do we do now?

7. We start with what we know.

8. BRAND
POWER
Knowing Your
EFFICIENT Identity
SYSTEMS
Building the
Future
USER-
CENTERED
DESIGN
Anticipating
Opportunity

9. BRAND
POWER
Knowing Your
EFFICIENT Identity
SYSTEMS
Building the
Future
USER-
CENTERED
DESIGN
Anticipating
Opportunity

10. EFFICIENT
SYSTEMS
Building the
Future

11. SYSTEMS WHAT YOU ALREADY KNOW IS A LOT
Daryl R. Moen - Mizzou School of Journalism
August 2000
Sample topics:
• Working in Modules
• Using Photographs
• Understanding Information Graphics
• Designing Advertising
• The Process of Redesign
• Designing Sections

12. SYSTEMS WE BUILT ON THIS FOR WEB DESIGN
12

13. SYSTEMS AND IT’S DRIVING CROSS-PLATFORM DESIGN
Images from
“A List Apart” and the
Upstatement.com blog

14. SYSTEMS IT’S ABOUT BUILDING QUALITY, FAST
FOR NEWS: SPEED = TIME TO DEADLINE FOR TECH: SPEED = TIME TO MARKET

15. SYSTEMS HOW WE ARE APPLYING IT AT CNN
MAPPING CONTENT TO PLATFORMS

16. SYSTEMS HOW WE ARE APPLYING IT AT CNN
USING A GRID THAT WILL WORK ACROSS THOSE PLATFORMS

17. SYSTEMS HOW WE ARE APPLYING IT AT CNN
LEVERAGING THAT TO MEET ELECTIONS DEMANDS

18. SYSTEMS HOW WE ARE APPLYING IT AT CNN
USING IT FOR BROAD INFORMATION
12-column (web, tablet landscape) 8-column (tablet portrait) 4-column (phone)
NATIONAL
RESULTS

19. SYSTEMS HOW WE ARE APPLYING IT AT CNN
USING IT FOR MORE NUANCED INFORMATION
12-column (web, tablet landscape) 8-column (tablet portrait) 4-column (phone)
STATE
RESULTS

20. BRAND
POWER
Knowing Your
EFFICIENT Identity
SYSTEMS
Building the
Future
USER-
CENTERED
DESIGN
Anticipating
Opportunity

21. BRAND
POWER
Knowing Your
Identity

22. IDENTITY
There was areason
you chose your company.

23. The Washington Post

24. The New York Times

25. ESPN

26. IDENTITY THESE DRIVERS GUIDE BRAND & IDENTITY DESIGN, TOO
Brand Positioning
Brand Personality
Brand Values
Brand DNA
Based on teachings
from
Lynn Upshaw
UC Berkeley Haas

27. Target makes Buying toothpaste a Fashion statement

28. Nike makes Dog Walking a Hard-Core sport

29. Starbucks makes Fast Food a Community activity

30. IDENTITY HOW WE ARE APPLYING IT AT CNN
EXPLORING OUR CONTRIBUTION TO THE COMMUNITY
“T o act upon one’s convictions, while others wait . . .
To create a positive force in a world where cynics abound . . .
To provide information to people when it wasn’t available before . . .
To offer - those who want it — a choice . . .
For the American people, who’s thirst for understanding and a better
life has made this venture possible . . .”

31. IDENTITY HOW WE ARE APPLYING IT AT CNN
IDENTIFYING WHERE WE BEST EMBODY THAT CONTRIBUTION

32. IDENTITY HOW WE ARE APPLYING IT AT CNN
CODIFYING THAT INTO A STREAMLINED STYLE GUIDE

33. IDENTITY HOW WE ARE APPLYING IT AT CNN
USING THAT STYLE GUIDE TO SPEAK MORE CONSISTENTLY

34. BRAND
POWER
Knowing Your
EFFICIENT Identity
SYSTEMS
Building the
Future
USER-
CENTERED
DESIGN
Anticipating
Opportunity

35. USER-
CENTERED
DESIGN
Anticipating
Opportunity

36. USERS
How do you choose
to tell a story?

37. USERS KNOWING WHEN, WHERE, AND WHY TO REACH THEM IS KEY
Image from
Google Study:
“The New Multi-screen World:
Understanding Cross-platform
Consumer Behavior”

38. USERS ULTIMATELY, BEHAVIORS AND USAGE ARE DRIVEN BY LIFE
EVENING LEAN BACK
WORKDAY LEAN FORWARD
TVs & iPads Entertain
Computers Drive Action
ANYTIME ON THE GO
Mobile Alerting and the Glue
6a a 10 a 12 p 2p 4p 6p 8p 10 p 12 a 2a 4a

39. USERS
USER METHODS HELP US BETTER UNDERSTAND OUR SPECIFIC USERS
Opportunity

40. USERS
USER AND, ARISE FROM OUR COMMON DESIGN PROCESS
Opportunity
DESIGN
Review the Brief,
Ask Questions Sketch Ideas,
Refine, Send to Press,
Layout, Comp
QA, Fix Redlines
RESEARCH CREATE
Gather UX Brief
DELIVER
requirements Storyboard Test
from User, Edit, Sitemap Develop
Tech, Business Wireframe QA
EXPERIENCE Comp Optimize
DESIGN

41. USER HOW WE ARE APPLYING IT AT CNN
Opportunity REFRESHING PRODUCTS TO BE MORE DYNAMIC
HOME SECTION VIDEOS NAV ARTICLE TVE ELECTIONS SAVED STORIES iREPORT SETTINGS
(story branding) (read & delete) (promo)
-- LANDSCAPE VERSIONS --
WEB VIEW
(between scroll - snap) (video fly-out)
(no image treatment)

42. USERS
USER HOW WE ARE APPLYING IT AT CNN
Opportunity FOCUSING INNOVATION WHERE USERS & BUSINESS BENEFIT
YESTERDAY
TODAY

43. USERS
USER HOW WE ARE APPLYING IT AT CNN
Opportunity EXPLORING HOW TO SHARE PASSIONS IN NEW WAYS

44. USERS
USER HOW WE ARE APPLYING IT AT CNN
Opportunity EXPLORING HOW TO TELL STORIES MORE EFFECTIVELY

45. So, to bring it on HOME

46. BRAND
POWER
Knowing What
EFFICIENT To Emphasize
SYSTEMS
The Pattern Library
USER-
CENTERED
DESIGN
Anticipating Opportunity

47. SYSTEMS:
Know you can do it.
IDENTITY:
Know what you stand for.
USERS:
Know how to reach people.

48. RESOURCES:
SYSTEMS:
Responsive Design (A Book Apart) http://www.abookapart.com/products/responsive-web-design
Media Queries http://mediaqueri.es/
Responsive Wireframes http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
50 Best Tools Article http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design
IDENTITY:
David Aaker on Brands http://www.prophet.com/blog/aakeronbrands
Interbrand Global Brands http://www.interbrand.com/
Contagious Magazine http://www.contagiousmagazine.com/
Fast Company Design http://www.fastcodesign.com/
USERS:
IDEO Human Centered Design Toolkit http://www.ideo.com/work/human-centered-design-toolkit/
Sociology of News (Michael Schudson) http://amzn.to/Q1BjvA
Pew Internet & American Life Project http://www.pewinternet.org/
Think With Google http://www.thinkwithgoogle.com/
Rosenfeld Media http://rosenfeldmedia.com/uxzeitgeist/
UX Magazine http://uxmag.com/

49. What opportunities do
you see in the disruption?

50. THANK YOU
SND Oct 12, 2012
@marisagallagher