CNN Notes and Highlights

01 CNN NOTES AND HIGHLIGHTS

2024

CNN Notes and Highlights

PROJECT OVERVIEW:

For my intern project during my time as a Product Design Intern on CNN’s Mobile Apps team, I worked on the end-to-end design process for a net-new annotation and sharability tool for CNN’s articles meant to appeal to younger generations of news readers and create new entry points into the mobile app from platforms like social media.

TIMELINE:
October–December 2024
8 Weeks

ROLE:
Product Design Intern

TOOLS:
Figma
UserZoom

TEAM:
Jason Culler, Holly Boston, Kevin Boucher, Grace Ho, Michele Feldman, Robert Hamburger, Chaeeun Park

Problem Discovery

With one of the main pillars the CNN mobile app is working towards with new features and redesigns being human connection, I know that I wanted to kick off the problem discovery phase of my project with a comparative analysis looking at different ways that mobile apps are creating community online. Specifically, ways that mobile apps are using community and moments of human connection to encourage habit-building and engagement.

For this step in my discovery, I wanted to look past our news competitors and the major social media players at more niche products gaining traction with users that fall under the “digital native” distinction, a key user group that CNN is trying to capture. After performing an audit of key social features noted in the graphics below with stickies, I performed a SWOT analysis to gain a more comprehensive understanding of each platform’s strenths and weaknesses, as well as what opportunity each platform’s social functionalities might provide our team at CNN.

Bereal is a photo-sharing social media app with unique social functionalities like customizable photo reactions, time-limited posting, and notification-driven engagement. The platform’s focus on autheticity makes it stand out as a more low-pressure alternative to traditional social media platforms.

LinkedIn is a professional networking social platform that employs reaction and repost interactions to determine what users see on their home feeds. Discoverability of job and networking opportunities is prioritized.

Co-Star is a astrology app that has gained a niche cult following for the social sharability of its horoscopes. Users can view a daily list of do’s and don’t’s and joint readings generated between them and their friends, encouraging habit building.

After completing my comparative analysis, I categorized my findings of the social features that I thought were the most effective into the following buckets based off of their core interactions:

Keeping these key interactions in mind, I started to narrow the scope of the problem I was trying to solve. To guide my work, I created a user persona of a user that falls under CNN’s future target group, a demographic of users currently seen as stretch potential and who we hope to convert into app users in the next five years.

Like many of the other individuals in CNN’s future target group, Jenna is a digital native who gets a lot of her breaking news from social media. She likes being informed and keeping up with news but doesn’t feel tied to any major media outlet, even though she has high trust in these sources. Using this persona, I wrote a user narrative detailing a day in Jenna’s life and imagining how the different social features I had explored in my comparative analysis might fit into Jenna’s news diet.

Problem Definition

Through my discovery work, I identified a few key areas of opportunity.

First, there is a significant opportunity to integrate more community-focused features and spaces where people can share opinions on current events and connect with others over shared—or even opposing—perspectives. Other industries, such as entertainment and gaming, are effectively creating digital communities to foster engagement, yet the news industry has been slower to adopt these strategies. Sharing opinions about news, politics, and current events is already deeply ingrained in our everyday conversations, both in-person and online through social media. However, there isn’t yet a dedicated space within news digital products to facilitate these kinds of meaningful, nuanced interactions directly in the context of the content itself.

Secondly, there is a growing need to appeal to younger generations of news consumers like Jenna. CNN’s current user base skews older, but younger audiences are increasingly becoming the dominant demographic in digital spaces. These users demand more dynamic and intuitive experiences that align with their expectations for technology and social engagement. Meeting these needs is essential to ensuring the longevity of CNN’s digital platforms and relevance to future audiences.

Finally, I uncovered the need for a more targeted and seamless form of social sharing. While there are currently ways for users to share entire articles, referencing specific passages or moments of interest requires a tedious workaround. Users often resort to taking screenshots, manually marking up text using external tools, and pairing these with links to the article—a clunky and time-consuming process. This creates unnecessary friction in what should be an intuitive, integrated feature, ultimately limiting the potential for engagement and discussion around the content.

This diagram shows the most common current solution for this last problem:

I decided to dive deeper into this problem using a current-state journey map below to help identify potential areas for improvement by highlighting emotions and pain points.

Mapping the Feature Set

Drawing upon my research, comparative analysis, and identified areas of opportunity, I came up with a framework for my feature and a supplementary list of sub-features and functionality that would define the user experience.

Design Competitive Analysis

To inform my design direction, I did some research into other mobile apps that employed similar annotation and note-taking tools, anchoring my research around the following points of particular interest:

Notes and highlights libraries

Designing menus to house past annotations
How products tackled storage local to a single piece of content vs. across all content

Out-platform sharing

Creating shareable graphics that are automated, yet accessible

Comment section references

From a visual design standpoint, creating clear enough distinction between cited text and user commentary

MEDIUM

iBOOKS

KINDLE

GENIUS

SPOTIFY

Wireframing

I started off with sketches of a possible “happy path” of a user interacting with the annotation tool.

Then, using CNN’s Vossi Design System and Mobile Design Toolkit, I started mocking up low-fidelity versions of key screens!

Designing and Iterating

TEXT SELECTION

When a user double-taps or taps and holds on a word in an article, yellow text selection lollipops will appear that the user can use to select the desired passage that they wish to highlight or add a note to. This graphic shows the styling and design for the different text states for this step:

TOOL BAR

In the active text selection states, an expandable tool bar pops up that displays the different notetaking options.

‘ADD NOTE’ SHEET

This bottom sheet is triggered by tapping ‘Add note’ in the toolbar. In this screen, users will be able to add their own thoughts and notes to their selected passage. After something is entered in the text field, users will have the choice to either save their note as a private note to reference later or post their note publicly, automatically adding their note (and cited text) to the article’s comment section.

‘CONVERSATION’ (COMMENTS) SHEET

After the user chooses to post a note publicly, the ‘Add note’ sheet closes and the ‘Conversation’ sheet opens, showing their newly created note as a post. Other designers on the Mobile Apps team designed the structure and layout of this sheet, so the task here was just to imagine what a note annotation integration would look like within this designed environment. I decided to use the Serif type utilized in the body text of the article to create a visual distinction between the cited text being referenced and the user-generated note.

SHARE SHEET

This bottom sheet is triggered by the user selecting the ‘Share’ in the toolbar after selecting text. A shareable graphic is automatically generated from the selected text, populating certian elements of this graphic with article metadata and the CNN logo. The background of this graphic is the cover image of the article with a darkened treatment for color contrast accessibility.

Here’s a closer look at the different components of the automated graphic:

iMESSAGE AND INSTAGRAM STORY INTEGRATIONS

These screens demonstrate what integrations with social media platforms like iMessage and Instagram stories would look like. Acquiring the SDK’s (Software Development Kits) for socila media platforms like Instagram would allow users to cross-post to their other social media audiences right from the CNN app, streamlining the sharing experience.

‘NOTES AND HIGHLIGHTS’ WALL

This wall is accessed by tapping the highlighter icon in the top right of the article page and houses all of the user’s notes and highlights for that particular article only. It is separated into two different sections– one for viewing their own personal notes and highlights that they’ve created, and one for viewing popular public notes that other CNN users have created.

User Research

As a part of my design process, I planned, designed, and executed user research to test my designs and prototypes with real current and future CNN users. This graphic gives more detail into the study’s main objectives and target participant demographic.

I started my research process by developing a detailed research plan document outlining the key objectives of my study as well as information regarding the research methods, target segments, and timeline.

Then, I wrote a research study designed to achieve the goals I outlined, including an introduction screen and screener questions. I also wrote in logic to hide and reveal certain questions depending on users’ responses to prompts regarding usability and ease of navigation in order to gain additional insights. Here is an example:

Final Prototype

Team Collaboration

While I took the lead on this project, this work is also a product of all of the help I got along the way. From my manager Jason to the lovely designers on the Mobile Apps team as well as folks in Content Design and User Research areas, it was great to get so many perspectives on my work throughout this process. Outside of the design scope, I also got to collaborate cross-functionally with Product Managers and Engineers to talk implementation and handoff, which was such a great learning experience.

Future Considerations

Building out the ‘Notes and Highlights’ feature for other story formats

Thinking about what this feature would look like for video and audio stories– possibly integrating with an interactive timed transcription
Thinking about what this feature would look like outside of a native mobile experience– what would it look like in a web environment?

Incorporating a customization option for share

Some platforms that I explored in my competitive analysis like Medium and Spotify gave users the option to customize the background colors and images of the automated graphic before cross-posting to social media

Encouraging anchors and journalists (“CNN voices”) to adopt the Notes and Highlights feature

Viewers could follow their favorite journalists and see their activity

Key Takeaways

Collaboration sharpens ideas: Working alongside engineers, researchers, and other stakeholders throughout the process allowed me to refine my design. Their feedback shaped the feature’s scope and ensured that it was both technically feasible and user-centered, underscoring the value of cross-functional teamwork in delivering successful products.

Designing for content-rich environments requires precision: News apps are inherently dense with text and visuals. Designing an annotation feature that felt intuitive without adding cognitive overload taught me to prioritize clarity and focus when creating features for information-heavy platforms.

Hi! I’m Delaney.︎