Modernizing for the News of Now
THIS IS CNN / NEXT
August 20, 2013
ADAPTIVE PATH UX WEEK
@marisagallagher
THE CONTEXT
1.8billion monthly page views
80million total monthly unique visitors
100million monthly video starts
General and TV numbe...
4
Non-Web Kit
Mobile Web
Web Kit
Mobile Web
iPad AppAndroid Tablet App Windows Tablet/PC App
Kindle AppNook App
Nokia S40
...
20 40 60 80 100%
CONTEXT THE LANDSCAPE IS CHANGING
MARKET PENETRATION:
TV penetration = 96% = Nielsen TV Penetration Trend...
20 40 60 80 100%
CONTEXT THE LANDSCAPE IS CHANGING
CNN METRICS:
July 2013 TV Ratings = Source: Nielsen Media Research,NPow...
Fox News
YahooNews
BBC News
ABC News
NBCNews
HuffPost
The Guardian
Washington Post
CBS News
MSNBC 7
Social Media Followers...
8
CONTEXT AND NEED TO CAPITALIZE ON THE OPPORTUNITY
0 540 1,080 1,620 2,160 2,700
Stories with 100+ Retweets
FOXNEWS
MSNBC...
CONTEXT
Source: Adobe SiteCatalyst, Jun ‘13, for CNN.com. Bango, Jun ‘13, for CNN Mobile. Note: CNN.com on mobile phone/ta...
CONTEXT TO REINFORCE OUR STRENGTH ON DESKTOP
Source: comScore Media Metrix, Online News Ranker, July 2013
COMPETITORS AVG ...
0
4
8
12
16
20
24
28
HuffPost Yahoo!ABC CNN Fox News NBC News NYTimes GoogleNews WashPost CBSNews
CONTEXT TO SUPPORT OUR E...
12
CONTEXT TO IMPROVE SEO, SEARCH, and FLOW
Header
Edition
U.S.
International
Mexico
Arabic
TV Network
CNN Programs
CNNi
C...
Sources: Nielsen 9/27/10-12/26/10, Experian Simmons National Consumer Study, ‘09 Full Year,
Mercury 4/26/10-5/23/10, Niels...
CONTEXT WE NEED TO WORK WITH PEOPLE’S LIVES
6 a a 10 a 12 p 2 p 4 p 6 p 8 p 10 p 12 a 2 a 4 a
EVENING LEAN BACK
TVs & iPad...
THE BRAND
There is a reasonwe
choose our companies.
The Washington Post
The New York Times
ESPN
Target
Nike
Starbucks
Based on teachings from
Lynn Upshaw
UC Berkeley Haas
Brand DNA
Brand Values
Brand Personality
Brand Positioning
BRAND THES...
o act upon one’s convictions, while others wait . . .
To create a positive force in a world where cynics abound . . .
To p...
THE PLAN
PLAN THE TRADITIONALNEWS ECONOMY
PLAN BUILT FOR THE NEW NEWS ECONOMY
REFERRAL
CONTEXT
BREAKING
NEWS &
TOP
STORIES
TOPICS,
SHOWS &
TALENT
SOCIAL
ACTIVITY
@K...
1. BEST-SCREEN-AVAILABLE RESPONSIVE DESIGN
2. STREAMLINED CONTENT API
3. ROBUST TAGGING & TAXONOMY SYSTEM
4. UNIFIED, MODU...
29
SECTIONS TV MEDIA TYPES
(video, photography,
multimedia, etc.)
US
WORLD
POLITICS
JUSTICE
TECH
HEALTH
ENTERTAINMENT
LIVI...
PLAN DESIGNED FOR THE BEST-SCREENAVAILABLE
PLAN IT’SALLABOUT SHARINGAND PARTICIPATING
@Keegan_Bradley:
Haha I don't know what to say. This is the
best picture ever. ...
PLAN DRIVEN BYACTIVE, CONTENT-TYPE CARDS
Story Person
Show/
Series Topic
Episode/
Event Assignment
PLAN CARDS THAT CAN FLUIDLYSHIFT & MOVE
PLAN ZONES THAT MORPH BASED ON DEVICE USAGE
PLAN GROUNDED ONACOMMON, FLUID GRID
Badged
Logo
Color
Palette
Typography Icons Photo
Treatments
Graphical
Elements
PLAN WRAPPED INATHOROUGHLYMODERN STYLE GUIDE
THE PAYOFF
38
HOME
SCREENS
TODAY
39
HOME
SCREENS
INTERNAL
BETA
45
desktop webtablet portrait webmobile web
PAYOFF HOME SCREENS: BREAKING NEWS
46
desktop webtablet portrait webmobile web
PAYOFF HOME SCREENS: SPECIALEVENT
47
desktop webtablet portrait webmobile web
PAYOFF HOME SCREENS: NORMALNEWS
48
desktop webtablet portrait webmobile web
PAYOFF STORYSCREENS
49
desktop webtablet portrait webmobile web
PAYOFF PROFILE: CORRESPONDENT
50
desktop webtablet portrait webmobile web
PAYOFF PROFILE: SHOW HOST
51
desktop webtablet portrait webmobile web
PAYOFF TV SHOW HUB: PIERS MORGAN LIVE EXAMPLE
52
desktop webtablet portrait webmobile web
PAYOFF SECTIONS: LIVING
53
PAYOFF ADVANCEDADS: SECTION TAKEOVER
desktop webtablet portrait webmobile web
54
Full View
desktop webtablet portrait webmobile web
Full ViewFull
View
PAYOFF ADVANCEDADS: NATIVE CONTENT
THIS IS CNN / NEXT
THANK YOU
Aug 20, 2013
ADAPTIVE PATH UX WEEK
@marisagallagher
This is CNN / Next
This is CNN / Next
This is CNN / Next
This is CNN / Next
This is CNN / Next
Upcoming SlideShare
Loading in...5
×

This is CNN / Next

3,110

Published on

UX Week Presentation of the CNN Digital 2013 replatforming and redesign, with a focus on the mobile and social rationale behind it and the brand design and user experience approach being taken to complete the cross-platform responsive relaunch.

Published in: Technology, Business

Transcript of "This is CNN / Next"

  1. 1. Modernizing for the News of Now THIS IS CNN / NEXT August 20, 2013 ADAPTIVE PATH UX WEEK @marisagallagher
  2. 2. THE CONTEXT
  3. 3. 1.8billion monthly page views 80million total monthly unique visitors 100million monthly video starts General and TV numbers are from the CNN Fact Sheet CNN Digital Network numbers are from Comscore Media Metrix, Feb 2013 CNN Video Numbers and Mobile Numbers are from Nielsen & Nielsen Mobile View, Jan 2013 (latest available) 24broadcast networks worldwide 45editorial bureaus around the world CONTEXT CNN WORKS TO SUPPORT ITS REACH & SCALE
  4. 4. 4 Non-Web Kit Mobile Web Web Kit Mobile Web iPad AppAndroid Tablet App Windows Tablet/PC App Kindle AppNook App Nokia S40 Touch-Type Nokia S40 Full-Touch Nokia Symbian Android Phone Windows Phone 7 Windows Phone 8 iPhone App Google TVDesktop Web 20+platforms + 10 Editions + 5 Languages Tablet Web Blackberry Google Glass iReport OTHER Elections 2010 2012 Hall Pass CONTEXT CNN WORKS TO BE EVERYWHERE
  5. 5. 20 40 60 80 100% CONTEXT THE LANDSCAPE IS CHANGING MARKET PENETRATION: TV penetration = 96% = Nielsen TV Penetration Trends, Feb. ‘13 Cellphone penetration = 92% = Nielsen 2Q13 HTR (Home Technology Monitor) PC owner w/ home internet = 79% = Nielsen Universe Estimates, July 2013 Social media penetration = 78% = comScore social-media users 18+, Jul. ’13, divided into Nielsen total 18+ universe, Jul ‘13 Smartphone penetration = 40% = Nielsen 2Q13 HTR Tablet penetration = 29% = Nielsen 2Q13 HTR 5 MobileUsers Phone Apps Tablet Apps SocialMedia Users Television Viewers D esktop U sers 2013 General US Penetration Rates Across Media and Platforms Industry-wide Penetration Rates Summer 2013
  6. 6. 20 40 60 80 100% CONTEXT THE LANDSCAPE IS CHANGING CNN METRICS: July 2013 TV Ratings = Source: Nielsen Media Research,NPower, 07/01/13-07/28/13. M-Su 6a-6a. P2+. AA(mm). Data based on Live+7 Data Streams. Reach and Frequency Time Period Report. 1-min qualifier, 75% unification. CNN international tv reach from EMS, PAX, TGI-Latina 2012 surveys. June 2013 Desktop = comScore Media Metrix, June ’13 June 2013 Mobile Uniques = Nielsen Mobile MediaView June 2013 July 2013 Social Media Followers = Twitter API and Facebook API for actively managed CNN accounts July 2013 App Downloads = consolidated counts from Apple, Android, Amazon, Barnes & Noble, Nokia, and Microsoft apps All CNN percent changes versus same period year ago. MARKET PENETRATION: TV penetration = 96% = Nielsen TV Penetration Trends, Feb. ‘13 Cellphone penetration = 92% = Nielsen 2Q13 HTR (Home Technology Monitor) PC owner w/ home internet = 79% = Nielsen Universe Estimates, July 2013 Social media penetration = 78% = comScore social-media users 18+, Jul. ’13, divided into Nielsen total 18+ universe, Jul ‘13 Smartphone penetration = 40% = Nielsen 2Q13 HTR Tablet penetration = 29% = Nielsen 2Q13 HTR 6 MobileUsers Television Viewers D esktop U sers CNN Year Over Year Growth Summer 2012 to 2013 areas of mature growth SocialMedia Users Phone Apps Tablet Apps 2013 General US Penetration Rates Across Media and Platforms areas of disruptive growth
  7. 7. Fox News YahooNews BBC News ABC News NBCNews HuffPost The Guardian Washington Post CBS News MSNBC 7 Social Media Followers(Aug 2013 followers/fans on key CNN social accounts) @NYTimes @BBCBreaking @breakingnews @time @bbcworld @huffpost @foxnews @cbsnews @abc @washingtonpost @guardian @nbcnews @yahoonews 8.8M 4.3M 3.3M CNNBRK CNN Source: Twitter API and Facebook API; roll-up numbers are from the Social Leaderboards on 12/18/2012 and from CNET article: http://cnet.co/ZpWbGP CONTEXT WE HAVE INCREDIBLE SOCIALFOLLOWERS CNN NBC NEWS Digital ABC NEWS 6.7M 5.9M 4.7M 4 M 3.2M 2.9M 2.6M 2.5M 1.8M 1.2M 844k 658k 5.2M 1.4M 1.2M 1.2M 1.1M 709k 708k 581k 245k 11Macross all CNN accounts 12.6M Twitter Followers by News Outlet Facebook Fans by News Outlet 9.3M37Macross all CNN accounts
  8. 8. 8 CONTEXT AND NEED TO CAPITALIZE ON THE OPPORTUNITY 0 540 1,080 1,620 2,160 2,700 Stories with 100+ Retweets FOXNEWS MSNBC BBC THE GUARDIAN HUFFINGTON POST 0 540 1,080 1,620 2,160 2,700 Stories with 100+ Facebook Shares CNN CNN FOX NEWS MSNBC BBC THE GUARDIAN HUFFINGTON POST PEREZ HILTON VENTURE BEAT PEOPLE GAWKER Social Media Resharing (2012 Stories that were re-shared across social media) Source: Source: Newswhip [INFOGRAPHIC]: The Most Viral News Sources on Twitter and Facebook; Excludes sites with Paywalls, http://mashable.com/2012/03/01/the-most-viral-news-sources-on-twitter-and-facebook-infographic/
  9. 9. CONTEXT Source: Adobe SiteCatalyst, Jun ‘13, for CNN.com. Bango, Jun ‘13, for CNN Mobile. Note: CNN.com on mobile phone/tablets and iPad are a subset of CNN.com. 3% 6% 15% 2% 7% 6% 61% Desktop Tablet 13% Phone 26% ipad app tablet web (cnn.com on ipad) mobile web iphone app android app desktop on phone (cnn.com on mobile phones and non-iPad tablets) 3% 8% 3% 6% 5% 75% android app iphone app mobile web ipad app tablet web (cnn.com on ipad) Desktop Tablet 11% Phone 14% CNN DIGITAL CONSUMPTION BY PLATFORM June 2013 DOMESTIC VIDEO STARTSPAGE VIEWS WE NEED TO SUPPORT CONSUMPTION SHIFTS 9
  10. 10. CONTEXT TO REINFORCE OUR STRENGTH ON DESKTOP Source: comScore Media Metrix, Online News Ranker, July 2013 COMPETITORS AVG MONTHLY DESKTOP UNIQUES July 2013 News Rankers 10 0 10 20 30 40 50 60 70 80 HuffPost Yahoo! News CNN Fox News NBC News NYTimes USA Today WashPost ABCNews CBSNews 0 10.0 20.0 30.0 40.0 50.0 60.0 70.0 80.0 Yahoo! News HuffPost NBC News Fox News NYTimes ABCNews WashPost BBC CBSNewsCNN 72 45 30 28 25 16 14 HuffPost FoxNewsNBCNews NYTimes WashPostABCNews CBSNews 16 Yahoo!News 42 BBC 40
  11. 11. 0 4 8 12 16 20 24 28 HuffPost Yahoo!ABC CNN Fox News NBC News NYTimes GoogleNews WashPost CBSNews CONTEXT TO SUPPORT OUR EXPLOSIONACROSS MOBILE COMPETITORS AVG MONTHLY MOBILE UNIQUES 2013TD Source: Nielsen Mobile MediaView, May’13 11 0 4 8 12 16 20 24 28 Yahoo!ABC Fox News HuffPost GoogleNews NYTimes NBC News CBSNews WashPostCNN Digital Network +ABCNews HuffPostFoxNews Digital Network MSNBCNewsNYTimesGoogleNews WashPostCBSNews 20 18 10 10 8 7 5 3 Yahoo!News 28
  12. 12. 12 CONTEXT TO IMPROVE SEO, SEARCH, and FLOW Header Edition U.S. International Mexico Arabic TV Network CNN Programs CNNi CNN Espanol HLN CNN.com HOME Navigation TV&Video CNN Trends U.S. World Politics Justice Entertainment Tech Health Living Travel Opinion iReport CNNMoney Sports Make CNN Your Homepage Mobile Web Phone Apps Tablet AppsSocial Special Navigation Just for Mobile Web Special Navigation Just for Phone Apps Special Navigation Just for Tablet Apps Sign Up Login CNN.com HOME End Objects Dead Ends, no where to go next, little recirculation
  13. 13. Sources: Nielsen 9/27/10-12/26/10, Experian Simmons National Consumer Study, ‘09 Full Year, Mercury 4/26/10-5/23/10, Nielsen 9/27/10-12/26/10, Omniture 11/2010, Bango 11/2010, Bango 1/2011. CONTEXT WE NEED TO MEET PEOPLE WHERE THEYARE 24-HR AVG FOR EACH PLATFORM 2X AVERAGE 3X AVERAGE 6 a a 10 a 12 p 2 p 4 p 6 p 8 p 10 p 12 a 2 a 4 a Newspapers Phone App Desktop Web TV Tablet Mobile Web MORNING WORKDAY EVENING LATE NIGHT
  14. 14. CONTEXT WE NEED TO WORK WITH PEOPLE’S LIVES 6 a a 10 a 12 p 2 p 4 p 6 p 8 p 10 p 12 a 2 a 4 a EVENING LEAN BACK TVs & iPads Entertain WORKDAY LEAN FORWARD Computers DriveAction ANYTIME ON THE GO MobileAlerting and the Glue
  15. 15. THE BRAND
  16. 16. There is a reasonwe choose our companies.
  17. 17. The Washington Post
  18. 18. The New York Times
  19. 19. ESPN
  20. 20. Target
  21. 21. Nike
  22. 22. Starbucks
  23. 23. Based on teachings from Lynn Upshaw UC Berkeley Haas Brand DNA Brand Values Brand Personality Brand Positioning BRAND THESE DRIVERSARE THE CORE TO BUILD UPON
  24. 24. 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 . . .” “T BRAND SO, WE WENT BACK TO OUR CORE
  25. 25. THE PLAN
  26. 26. PLAN THE TRADITIONALNEWS ECONOMY
  27. 27. PLAN BUILT FOR THE NEW NEWS ECONOMY REFERRAL CONTEXT BREAKING NEWS & TOP STORIES TOPICS, SHOWS & TALENT SOCIAL ACTIVITY @Keegan_Bradley: Haha I don't know what to TRENDING TOPICS, MOMENTS & MEMES DISCOVERY ENGINES
  28. 28. 1. BEST-SCREEN-AVAILABLE RESPONSIVE DESIGN 2. STREAMLINED CONTENT API 3. ROBUST TAGGING & TAXONOMY SYSTEM 4. UNIFIED, MODULAR AUTHORING TOOLS 5. DYNAMIC CONTENT RENDERING ENGINE PLAN ATECH PLATFORM FOR THE FUTURE
  29. 29. 29 SECTIONS TV MEDIA TYPES (video, photography, multimedia, etc.) US WORLD POLITICS JUSTICE TECH HEALTH ENTERTAINMENT LIVING TRAVEL MONEY SPORTS Watch CNN Schedule CNN Films All Shows All Videos MyCNN (user profile and activity settings with clear benefits) UPLOAD SEARCH SOCiAL 2 ZITE EMAIL ALERTS SOCIAL 3 SOCIAL 5 Siblings & Partners MARKETING & PR TRENDS OPINIONS THIS IS CNNREGIONS SOCIAL 1 SOCIAL 4 SOCIAL 6 OTHER FLEXIBLE “STORIES” DYNAMIC “RELATED” LINKS CONTEXT BRAND. FLOW. SEO:ANEW NAV SYSTEM CNN HOME SCREENS Desktop Mobile Web All Apps
  30. 30. PLAN DESIGNED FOR THE BEST-SCREENAVAILABLE
  31. 31. PLAN IT’SALLABOUT SHARINGAND PARTICIPATING @Keegan_Bradley: Haha I don't know what to say. This is the best picture ever. #duffdaddy pic.twitter.com/ OvJbEouVWJ” #Dufnering hilarious
  32. 32. PLAN DRIVEN BYACTIVE, CONTENT-TYPE CARDS Story Person Show/ Series Topic Episode/ Event Assignment
  33. 33. PLAN CARDS THAT CAN FLUIDLYSHIFT & MOVE
  34. 34. PLAN ZONES THAT MORPH BASED ON DEVICE USAGE
  35. 35. PLAN GROUNDED ONACOMMON, FLUID GRID
  36. 36. Badged Logo Color Palette Typography Icons Photo Treatments Graphical Elements PLAN WRAPPED INATHOROUGHLYMODERN STYLE GUIDE
  37. 37. THE PAYOFF
  38. 38. 38 HOME SCREENS TODAY
  39. 39. 39 HOME SCREENS INTERNAL BETA
  40. 40. 45 desktop webtablet portrait webmobile web PAYOFF HOME SCREENS: BREAKING NEWS
  41. 41. 46 desktop webtablet portrait webmobile web PAYOFF HOME SCREENS: SPECIALEVENT
  42. 42. 47 desktop webtablet portrait webmobile web PAYOFF HOME SCREENS: NORMALNEWS
  43. 43. 48 desktop webtablet portrait webmobile web PAYOFF STORYSCREENS
  44. 44. 49 desktop webtablet portrait webmobile web PAYOFF PROFILE: CORRESPONDENT
  45. 45. 50 desktop webtablet portrait webmobile web PAYOFF PROFILE: SHOW HOST
  46. 46. 51 desktop webtablet portrait webmobile web PAYOFF TV SHOW HUB: PIERS MORGAN LIVE EXAMPLE
  47. 47. 52 desktop webtablet portrait webmobile web PAYOFF SECTIONS: LIVING
  48. 48. 53 PAYOFF ADVANCEDADS: SECTION TAKEOVER desktop webtablet portrait webmobile web
  49. 49. 54 Full View desktop webtablet portrait webmobile web Full ViewFull View PAYOFF ADVANCEDADS: NATIVE CONTENT
  50. 50. THIS IS CNN / NEXT
  51. 51. THANK YOU Aug 20, 2013 ADAPTIVE PATH UX WEEK @marisagallagher

×