DESIGNING for DISRUPTIONSOCIETY for NEWS DESIGN ANNUAL WORKSHOP

October 12, 2012@marisagallagher

20 40 60 80 100%

WE ARE AT THE BEGINNING OF A DISRUPTION DIGITAL DEVICE EXPLOSION

Connected TVs 21%

Print 90%

Television 100%

Smar

t Ph

ones

55%

Tablets/eReaders ~25%

Mobile Phones 88%

Game

cons

oles

49%

Sources: Jeffries Equity Research, PwC, Barclays - updated Sept 2012

Internet 79%

So

cial Med

ia 66

%

Penetration Rates Across Media and

Platforms

SOCIAL AND ALERTS DRIVE DIFFERENT EXPECTATIONS OF ACCESS AND SOURCES

BEHAVIORS SHIFTING

Social Media Usage in general adult population

Social Media Usage for

online news consumers

97%

66%

71%of all online users get news forwarded to them through email and social media

basic engagement with news content

engagement with news content when it’s

recommended

3.7x

1

2

3

EXISTING EXPERIENCES WERE CREATED IN A PIECEMEAL FASHION, BASED ON OPPORTUNITY

LEGACY MISMATCH

Our Digital Footprint Today: Disconnected & Expensive

5:30 PM Sunday

Web

TV

iPhone

iPad

Mobile Web

Our Digital Footprint Today: Disconnected & Expensive

5:30 PM Sunday

Web

TV

iPhone

iPad

Mobile Web

Our Digital Footprint Today: Disconnected & Expensive

5:30 PM Sunday

Web

TV

iPhone

iPad

Mobile Web

Our Digital Footprint Today: Disconnected & Expensive

5:30 PM Sunday

Web

TV

iPhone

iPad

Mobile Web

Our Digital Footprint Today: Disconnected & Expensive

5:30 PM Sunday

Web

TV

iPhone

iPad

Mobile Web

A Random Sunday at 5:30 PM

SEAMLESS HANDOFF & CONNECTIONUSER EXPECTATION

So, what do we do now?

We start with what we know.

EFFICIENTSYSTEMSBuilding the

Future

BRAND POWER

Knowing Your Identity

USER-CENTERED

DESIGNAnticipating Opportunity

EFFICIENTSYSTEMS

BRAND POWER

Knowing YourIdentity

USER-CENTERED

DESIGNAnticipating Opportunity

Building the Future

EFFICIENTSYSTEMSBuilding the

Future

SYSTEMS WHAT YOU ALREADY KNOW IS A LOT

Daryl R. Moen - Mizzou School of JournalismAugust 2000

Sample topics:• Working in Modules• Using Photographs• Understanding Information Graphics• Designing Advertising• The Process of Redesign• Designing Sections

SYSTEMS

12

WE BUILT ON THIS FOR WEB DESIGN

SYSTEMS AND IT’S DRIVING CROSS-PLATFORM DESIGN

Images from “A List Apart” and the Upstatement.com blog

SYSTEMS IT’S ABOUT BUILDING QUALITY, FAST

FOR NEWS: SPEED = TIME TO DEADLINE FOR TECH: SPEED = TIME TO MARKET

SYSTEMS HOW WE ARE APPLYING IT AT CNNMAPPING CONTENT TO PLATFORMS

SYSTEMS HOW WE ARE APPLYING IT AT CNNUSING A GRID THAT WILL WORK ACROSS THOSE PLATFORMS

SYSTEMS HOW WE ARE APPLYING IT AT CNNLEVERAGING THAT TO MEET ELECTIONS DEMANDS

12-column (web, tablet landscape) 8-column (tablet portrait) 4-column (phone)

SYSTEMS HOW WE ARE APPLYING IT AT CNNUSING IT FOR BROAD INFORMATION

NATIONALRESULTS

12-column (web, tablet landscape) 8-column (tablet portrait) 4-column (phone)

SYSTEMS HOW WE ARE APPLYING IT AT CNNUSING IT FOR MORE NUANCED INFORMATION

STATERESULTS

EFFICIENTSYSTEMSBuilding the

Future

USER-CENTERED

DESIGNAnticipatingOpportunity

BRAND POWER

Knowing YourIdentity

BRAND POWER

Knowing YourIdentity

IDENTITY

There was a reason you chose your company.

The Washington Post

The New York Times

ESPN

IDENTITY THESE DRIVERS GUIDE BRAND & IDENTITY DESIGN, TOO

Brand DNA

Brand Values

Based on teachings fromLynn UpshawUC Berkeley Haas

Brand Personality

Brand Positioning

Target makes Buying toothpaste a Fashion statement

Nike makes Dog Walking a Hard-Core sport

Starbucks makes Fast Food a Community activity

HOW WE ARE APPLYING IT AT CNN

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

IDENTITY

“T

EXPLORING OUR CONTRIBUTION TO THE COMMUNITY

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

IDENTITY

HOW WE ARE APPLYING IT AT CNNIDENTITYCODIFYING THAT INTO A STREAMLINED STYLE GUIDE

HOW WE ARE APPLYING IT AT CNNIDENTITYUSING THAT STYLE GUIDE TO SPEAK MORE CONSISTENTLY

EFFICIENTSYSTEMSBuilding the

Future

BRAND POWER

Knowing YourIdentity

USER-CENTERED

DESIGNAnticipating Opportunity

USER-CENTERED

DESIGNAnticipating Opportunity

USERS

How do you choose to tell a story?

KNOWING WHEN, WHERE, AND WHY TO REACH THEM IS KEYUSERS

Image from Google Study:“The New Multi-screen World:Understanding Cross-platform Consumer Behavior”

6 a a 10 a 12 p 2 p 4 p 6 p 8 p 10 p 12 a 2 a 4 a

ULTIMATELY, BEHAVIORS AND USAGE ARE DRIVEN BY LIFE

EVENING LEAN BACKTVs & iPads Entertain

WORKDAY LEAN FORWARDComputers Drive Action

ANYTIME ON THE GOMobile Alerting and the Glue

USERS

USEROpportunity

USERS METHODS HELP US BETTER UNDERSTAND OUR SPECIFIC USERS

USEROpportunity

USERS

Sketch Ideas, Layout, Comp Refine, Send to Press,

QA, Fix Redlines

Review the Brief, Ask Questions

UX BriefStoryboardSitemap WireframeComp

TestDevelopQAOptimize

Gatherrequirements from User, Edit, Tech, Business

DESIGN

EXPERIENCEDESIGN

RESEARCH CREATE DELIVER

AND, ARISE FROM OUR COMMON DESIGN PROCESS

USEROpportunity

USEROpportunity

HOW WE ARE APPLYING IT AT CNN

HOME SECTION ARTICLE iREPORT SETTINGSTVEVIDEOS SAVED STORIESELECTIONS

WEB VIEW

(read & delete) (promo)

(no image treatment)

(between scroll - snap)

NAV

(video fly-out)

(story branding)-- LANDSCAPE VERSIONS --

REFRESHING PRODUCTS TO BE MORE DYNAMIC

USEROpportunity

USERS HOW WE ARE APPLYING IT AT CNN

YESTERDAY

TODAY

FOCUSING INNOVATION WHERE USERS & BUSINESS BENEFIT

USEROpportunity

USERS HOW WE ARE APPLYING IT AT CNNEXPLORING HOW TO SHARE PASSIONS IN NEW WAYS

USEROpportunity

USERS HOW WE ARE APPLYING IT AT CNNEXPLORING HOW TO TELL STORIES MORE EFFECTIVELY

So, to bring it on HOME

EFFICIENTSYSTEMS

The Pattern Library

BRAND POWER

Knowing WhatTo Emphasize

USER-CENTERED

DESIGNAnticipating Opportunity

SYSTEMS: Know you can do it.

IDENTITY: Know what you stand for.

USERS: Know how to reach people.

SYSTEMS:

IDENTITY:

USERS:

RESOURCES:

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

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/

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/

What opportunities do

you see in the disruption?

THANK YOU

SND Oct 12, 2012@marisagallagher