designing for disruption
Post on 18-Sep-2014
598 views
DESCRIPTION
Keynote talk at the Society for News Design Annual Workshop in Cleveland on October 12, 2012. Discusses responsive design, branding, and UX for news.TRANSCRIPT
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