Client

CNN Digital

Role

Product Designer

Date

2022

Team

Jayesh Srivastava

Lindsay Abrams

Stephanie Garret

Jayee Dhawan

Vaidehi Vartak

Prachi Garg

Head of Design Strategy

Design Strategist

Product Manager

Designer

Designer

Designer

Team

Jayesh Srivastava

Lindsay Abrams

Stephanie Garret

Jayee Dhawan

Vaidehi Vartak

Prachi Garg

Head of Design Strategy

Design Strategist

Product Manager

Designer

Designer

Designer

Context

CNN is a 24-hour American news channel that covers everything from global politics to entertainment.


At the start of our collaboration with CNN's Digital Team, the mobile app lacked robust audio functionality. We worked closely with them to enhance the in-app mobile audio experience, focusing on implementing text-to-speech (TTS) feature functionality. We aimed to design a strategy that would improve user engagement and content consumption while additionally catering to new audiences at a low cost, leveraging their existing written material and surfacing potential partnerships through the utilization of text-to-speech.


The introduction of text-to-speech offered CNN significant opportunities, as competitors reported experiencing up to three times more completed stories, increased engagement, and longer time spent in their apps after implementing this feature.


This initiative set in place a concept timeline for the release of various text-to-speech features in their mobile app, following an impact/feasibility hierarchy for release.

Feature discovery

To ensure ease of use and nudge adoption of the text-to-speech features, we made sure to put them in expected and easily discoverable locations.

Home Page:
The "Catch Me Up" banner is a collection of the top news of the week


Story Cards:
We surfaced TTS icons on each story card on the home page


Story Pages:
We added a TTS icon at the top of each story page and within each story


Saved Stories:
You'll also see the icon on the bookmarks page for listening to your saved articles.

Catch up on this week’s Top Stories

Listen now

Catch up on this week’s Top Stories

Listen now

Catch up on this week’s Top Stories

Listen now

Catch up on this week’s Top Stories

Listen now

Catch up on this week’s Top Stories

Listen now

Text-to-speech "Catch me up" banner feature on the home page

Text-to-speech "Catch me up" banner feature on the home page

Text-to-speech icons surfaced on each story card on the home page

Text-to-speech icons surfaced on each story card on the home page

Listen to article

Listen to article

Listen to article

Listen to article

Listen to article

Text-to-speech icon atop each article with a "Listen" CTA on the page

Text-to-speech icon atop each article with a "Listen" CTA on the page

Text-to-speech "Catch me up" banner feature on the home page

Text-to-speech icon at the top of each article, and a text-to-speech button within the article

Text-to-speech icons surfaced on each story card on the home page

Text-to-speech "Catch me up" banner feature on the home page

Text-to-speech icon at the top of each article, and a text-to-speech button within the article

Text-to-speech icons surfaced on each story card on the home page

Autoplay playlists

Text-to-speech enabled the use of autoplay playlists, offering a new way to promote recirculation and provide users with flexible news consumption options.

Autoplay playlists allow CNN to deliver news conveniently, meeting users where they are.


This approach reduces friction in content consumption, encouraging passive engagement and recirculation within the app. Moreover, it creates new advertising opportunities, leveraging the effectiveness of audio ads. With more completed content, more ads can be served. There's also potential to enhance ad effectiveness by using writers or personalities as the voices for the ads.

Text-to-speech enabled the use of autoplay playlists, offering a new way to promote recirculation and provide users with flexible news consumption options.

Autoplay playlists allow CNN to deliver news conveniently, meeting users where they are.


This approach reduces friction in content consumption, encouraging passive engagement and recirculation within the app. Moreover, it creates new advertising opportunities, leveraging the effectiveness of audio ads. With more completed content, more ads can be served. There's also potential to enhance ad effectiveness by using writers or personalities as the voices for the ads.

Text-to-speech enabled the use of autoplay playlists, offering a new way to promote recirculation and provide users with flexible news consumption options.

Autoplay playlists allow CNN to deliver news conveniently, meeting users where they are.


This approach reduces friction in content consumption, encouraging passive engagement and recirculation within the app. Moreover, it creates new advertising opportunities, leveraging the effectiveness of audio ads. With more completed content, more ads can be served. There's also potential to enhance ad effectiveness by using writers or personalities as the voices for the ads.

Text-to-speech enabled the use of autoplay playlists, offering a new way to promote recirculation and provide users with flexible news consumption options.

Autoplay playlists allow CNN to deliver news conveniently, meeting users where they are.


This approach reduces friction in content consumption, encouraging passive engagement and recirculation within the app. Moreover, it creates new advertising opportunities, leveraging the effectiveness of audio ads. With more completed content, more ads can be served. There's also potential to enhance ad effectiveness by using writers or personalities as the voices for the ads.

Catch me up

This feature proposal is a pop-up banner on the front page to allow folks to "catch-up on the week's top unread stories.


This promotes the behavior change to adopt TTS and provides flexibility users are looking for in regards to their news intake.

This feature proposal is a pop-up banner on the front page to allow folks to "catch-up on the week's top unread stories.


This promotes the behavior change to adopt TTS and provides flexibility users are looking for in regards to their news intake.

Customization + inclusivity

Given CNN's global audience, we wanted to ensure the launch of text-to-speech would cater to this audience in an inclusive way.


By including voice fonts, we create a customizable experience that feels more personal to each reader - making their news delivery that much stronger.

Because of our timeline and position within the organization, we focused on designing a strategy and foundation for implementing a feature set that could realistically be launched and deliver value for CNN's audience and business. Text-to-speech functionality was chosen as the ideal high-impact, highly-desirable feature for this project. We're excited to see how the CNN digital team will build upon this foundational work in the future.


To learn more about our research and process behind this project, feel free to reach out