ROLE
Product Designer,
Internship
SKILL
UX design, Visual Design, Strategy, Research
TIME
Jan - April 21
TEAM
Vee Susatijo, Sr Manager / Product Design - Breaking News
Nathan Portlock, Design Strategist - Breaking News
Elisabeth Kamor, Product Manager - Breaking News
NDA
OVERVIEW
KEY IMPACT
3 key MVP features that drives CNN registration
Discovered interest (70%) of readers would subscribe to alerts after clicking Follow.
At the beginning of 2021, CNN’s breaking news team undertook an 8 week design sprint to understand and identify how to improve their Dynamic Live Experiences (DLE) pages - a single resource that readers become aware of, track, and engage with breaking news content. Think of Breaking News as high attention, fast-developing, major news such as the Olympics, Wildfires, Election, etc. that each consists of its own collection of sporadic events related to the story.
The ultimate goal of the sprint is to increase engagement and CNN user registration. Therefore, understanding why are readers not engaged? and why are they not registering?
They discovered that while the DLE page enables readers to catch up on Breaking News content and its thread of stories all in one, the experience is not optimized for user needs.
Readers create their own timeline/journey to reading news. They’ll drop off a story thread even if an actual event thread is still active and only return if they are interested, have a question about it, or there is a lot of buzz around the content. And when they do want to return, they are unable to find the story thread without having to search and filter through so much content.
There is no way for readers to follow the story thread the way they want and tell us where they left off and which part of the thread they want to pick up from later on. Readers needs something that meets them where they are at.
PICK UP
DROP OFF
END
Car
Human
NDA
INTRODUCING
CNN’s mobile app experience that allows readers to keep up to date and track the latest Breaking News no matter where they are at in their reading timeline. Through user control, personalization, and awareness, readers can stay in tuned and engaged with Breaking news. This converts casual readers to engaged readers, inspiring them to register a CNN account.
BACKTRACKING ------
There was a lot of work that the design team had done before I had joined, that led to the design of mobile app’s dynamic live experiences pages, including the 8 week sprint. My first task was doing a thorough analysis of those findings from the 8 week sprint. Discussing those insights they’ve gathered is important to understand how I’ve got to the mobile designs.
From the sprint, of interviews with current CNN users of live stories and non-CNN users but native news consumer, they had discovered that
From those insights, they’ve defined these 3 MVP features,
The design team had already designed out a web page iterations of the Dynamic Live Experiences pages with the MVP features. When I joined the internship program, I was tasked to push the work forward by conducting testings & validations on the web designs with our design strategist and further research into the news consumption challenges readers face with the intentions to transition/scale and lead the designs of the mobile version of the Dynamic Live Experiences.
The web design that the team had begun working on.
RESEARCH
We have the web designs of the DLE pages with the MVP features. I conducted user interviews (n = 6 participants) alongside our design strategist/researcher with the goal:
to validate those features and & how users perceive the benefits of these features (mark as read, collapse/expand, follow).
gauge readers’ interests on how access to these free features would impact their views on registering to CNN.
All 3 MVP features were validated to be beneficial. E.g. Mark as Read prevents users from having to read the same thing again.
Cross device continuity (linking desktop, tablet, mobile) is popular especially amongst younger readers, linking to greater satisfaction.
Readers are open and are more likely to register if they are made aware of these free feature benefits of registering.
In addition, they echoed the importance of cross device continuity. They want the alignment between what they do on desktop to be applied to mobile and vice versa, which is what our mark as read feature should be able to do. This is noted for engineering teams as an acceptance criteria. In addition, we discovered a gap that we didn't realize. Not only would they register with these benefits but that they are most likely to register if they are more informed about the free benefits. If it isn't surfaced, they would not know to register even if they would want to.
DESIGN
Since the designs were for desktop, scaling to mobile meant considering more on layout adaptation, thoughtful UI considerations, and how we transition the designs from desktop to mobile in a way that is responsive, enables readers to use the features offered from the mobile app same as desktop, and is mobile friendly.
Text, images, and UI components are appropriately sized so content is legible for readers and they can interact with them. All components are drawn from CNN’s growing design system.
Added an interstitial screen, highlighting 5 benefits of registration before users share their email address so they are aware of the registration and free benefits from registering, encouraging them to register.
EVALUATIONS
I conducted moderated and unmoderated user testings with our design strategist on the mobile app design to further evaluate how users perceive the benefits and functionality of new features and designs on mobile, evaluate the success of the mobile DLE pages, and areas for UI/interaction improvements to keep readers better in track with threads of stories.
Unmoderated testing feedback
Mobile MVP features feedback synthesis from both user testings
Unmoderated and Moderated testing feedback via affinity digramming
Readers loved the Mark as Read functionality. Initially less popular in our Desktop user interviews than the other two features; in mobile testing, however, users found a sense of accomplishment as they scrolled through the lengthy DLEs. Further, validating this feature.
There were also small UI opportunities identified to make the flow even more efficient.
82% of users preferred the Mark as Read button to persist on both expanded and collapsed states. Therefore, I included Mark as Read in both collapse and expanded format.
Read
Typhoon Shanshan
REFLECTIONS
When working on the project, I didn’t think deeply onto why the team decided on desktop first. Reflecting on the project, I wish I dug deeper onto why they landed on using a desktop-first approach and alongside that thought - why the mobile app than mobile page first, given a lot of readers tend to consume news on mobile browser more. My assumption is that since there were a lot of content and complex features, the team preferred desktop first. However, that made the transition to mobile more challenging than the other way around. Looking back, I wish I had challenged and been more curious about our framework and approaches to grow not only the things we design, but as designers and our craft.
Given that a lot of the upfront research and initial designs were done by the time I started, there were still ample contributions to refine the DLE pages. Truly understanding the problem readers face first is critical before jumping into the designs that enabled me to understand - why are we doing this? why do users need this? how is this resolving the problem they face? and overall, just making more informed choices as a designer.
Paying attention to the small UI details matters when transitioning from desktop to mobile. E.g. how can we reformat the IA for mobile, should it be stacked or through a carousel?, is there a better way to visualize this? Though it’s seemingly trivial, it greatly impacts the experience for readers. I couldn’t simply just scale the size of the design down (CTRL K, downsize) and call it done nor simply just rely on responsive plugins (though they are helpful). Giving it a bit more thought enables me to considering how we can reimagine some of these features that may be slightly different but be a more enjoyable experience for CNN readers on mobile.
