cnn
designing dynamic live editorial experiences
THE INTRODUCTION
news up to the minute
MEET THE TEAM
breaking & developing news
focuses on their product: dynamic live experiences (DLE) - a single resource that customers become aware of, track, and engage with breaking and developing news
Design
Vee Susatijo, Product Designer at CNN Breaking News and Manager!
Wyatt Glennon, Product Designer at CNN Follow
Design Strategy
Nathan Portlock, Design Strategist at CNN Breaking News
Product
Liz Kamor, Product Manager at CNN Breaking News
Other lovely designers in our meeting
Karen Van Every, Sr. Design Director at CNN Core
Sabine McLain, Sr. Product Designer at CNN Personalization
Ericka Henderson, Sr. Product Designer at CNN Design Systems and Mobile App
Joel Cox, Sr. Product Designer at CNN Navigation and Mobile App
Jamus Andrest, Designer at CNN
Jason Culler, Product Designer at CNN Mobile Apps
Michael Baker, Product Designer at CNN Politics
BACKGROUND
How this came to be
at the beginning of 2021, the breaking news team undertook an 8 week design sprint to understand and identify how to improve on the Breaking/Developing News experience for our users. this resulted in the identification of top user problems to solve and many core roadmap features detailed in the following slides. here are the identified key design pain points that cnn users face:
01
Large scale breaking news events are stressful and the search and drive to stay updated is time-consuming and anxiety-inducing.
02
Customers had no way to tailor their experience based on their needs and personal preferences.
DLE vNext MVP features
these were the three MVP features identified during the 8 week design sprint to improve CNN engagement that are in need of validation and mobile designs
01 / Follow
enable users to follow topics at the DLE level and offers a user-driven mechanism
02 / Mark as read
offers mechanism for readers to know they’ve already reviewed content, allowing them to “pick up where they left off”
03 / Collapse & Expand
fold post content so headlines/posts are viewable upon DLE entry, optimizing for increased scan-ability
here’s what we’re trying to solve:
how can we increase cnn engagement with new DLE product features? (particularly with a focus on vNext MVP features)
USER RESEARCH
Let’s understand what the problem is and what exists
here’s the current redesigned version
all designs are currently under nda. please contact me or email me!
let’s evaluate the current designs
GOALS
01 / validate features & how users perceive the benefits of these features (mark as read, collapse/expand, follow, registration
02 / gauge user interests or apprehensions in registering to gain access to features
PLATFORM
UserZoom
METHOD
moderated user interviews
all are current readers of CNN live stories (aka the DLE pages)
6 participants
~28 min sessions
5 day span
18 - 65 year olds
FINDINGS
here’s what we found:
01
follow is the #1 feature that users would adopt remains
83% of users would elect to register to use follow.
“
if I click on this .... keep it as a preference .. and there are many ML algorithms to do so.
Participant 09
02
cross device continuity was the most important benefit for registration
67% of users currently read the DLE on both phone and computer
“
i hope that as long as I was logged into my CNN profile on my work computer that it would also follow there, and on my phone.
Participant 09
03
alert preferences and control over timeframe is emphasized
“
it’s a convenience factor for me.
Participant 12
04
cnn registration
100% of unregistered CNN Digital readers interviewed were open to registering when prompted with enumerated benefits of registration
cnn dynamic live experiences design solution
desktop designs were scaled to mobile for the final designs as designs are iterated on
01
FOLLOW
• notification controls
• alert preferences
• tailored feed
“
If I was in a time crunch and the headline caught my attention, I'd probably hit follow to see if I can pull it back up later.
Participant 03
02
MARK AS READ
• pick up where users last read
• a sense of accomplishment after scrolling through a lengthy DLE
“
I would actually love to mark it as read in case I already did, so that way I don't have to reread it again [and] waste time on the same article.
Participant 126
03
COLLAPSE/EXPAND
• reduce scroll length
• personalize and organize DLE based on needs and personal preferences
“
this is beautiful. the way this is organized…awesome.
Participant 20
04
EVENT TRAY
• live story coverage updates
• engaging and interactive medium
“
When I see red, I think recording, I think active, I think currently being broadcast are currently playing and is the article that you’re reading.
Participant 54
05
CNN REGISTRATION
• interstitial screen with 5 registration benefits
“stay updated with alerts” - 7 upvotes
“tailor a personalized experience” - 8 upvotes
EVALUATION
Let’s understand what could be improved
let’s evaluate the mobile designs
GOALS
01 / evaluate how users perceive the benefits and functionality of new features and designs (mark as read, collapse/expand, follow, event tray, registration, posts design and legibility) for the mobile version through tasks & prompts
PLATFORM
UserZoom
METHOD
moderated user testings
n = 10 participants
5 current readers of Live Updates, 5 native news consumers
~ 20 - 30 minute sessions
unmoderated user testings
n = 15 participants
~ 20 - 30 minute sessions
aware of CNN but not necessarily CNN readers, no cable or print newspaper subscriptions, choose what to read based on content, not brand
FINDINGS
here’s what users had to say:
01
Registration
most users would register given the notice of the benefits listed (e.g. stay updated with alerts, tailor a personalized newsfeed)
02
Expand & Collapse
caret is self-explanatory, default state should be expanded</span>
03
Mark as Read
87% of users would like to see the mark as read buttons on posts in both collapsed and expanded states
04
Event Tray
subtle improvements to the event tray will increase recirculation
ADDITIONS