Fi and CNN redefine what it means to watch news 24/7

We are CNN Fans

When CNN approached Fi it was a thrilling moment here at the agency. Since 1999 we saw the world famous news brand pioneer within the digital space especially around news content. Below is our story covering our journey to redefine the channel online.

The Pitch: The future of vide
news

CNN wanted an understanding of how Fi saw the future of video or how consumption could be greatly enhanced for example. Our pitch focused on seamlessly integrating social and interesting contextual content into the actual viewing experience, without complicating the user experience.

Concept Mode:

The key to solving the future of video news really lies within a discovery process. However the pitch process required Fi to conceptually show our thought leadership in the video space.

To the right are examples of some of the early concepts presented to CNN which focused on integrated contextual content and local relevant news.

Strategy - The CNN BIG Picture

For over two decades, CNN has dominated the news market in almost every area. Some of the areas where the site fell short included delivering a consistent integration of features and video integration.

We listened

A strategy was imperative to solving the future of news. As part of the “discovery phase” stakeholder interviews are conducted which absorb an enormous amount of data vital to our plan of attack.

Competitive Feature Analysis

We identified the most successful online news portals and paid special attention to the following factors: core video experience, user flows, integration of video and design, and technical execution. What we learned is that no single news organization had a strong video experience. That became our starting point to create immediate and interactive improvements to CNN’s online video experience.

Cross Platform Strategy and first UX explorations

Each feature should create an experience that translates beautifully across all platforms and set the foundation for the overall user experience. Using this cross-platform strategy, the new CNN.com provides users with curated news, personalized information, profiles and accounts, and social interaction.

"There was little inspiration in the news space, nobody was doing things well. We had to set the bar"

David Martin. Fantasy Interactive CEO

Yummy design details

We are VERY passionate about design at Fi. Beautifully executed details are important to our clients and employees but the design must enhance the user experience and be relevant to users’ needs.

Video Destination

Let’s start with taking a look at a few outputs from the project. The “video destination” was a core feature of the CNN.com experience which aggregated all video content and provided an “On Demand” function.
We designed a light and dark version of the VOD experience. Underneath the player the archive of content had to be easily accessible as did the playlist feature.

Initial Approach

We focused on four specific factors: content, personalization, user experience and portability.

Color Variations

Drag to see different color variations

What's on CNN right now?

Finding TV programs on CNN.com sometimes felt difficult and frustrating. Using a larger video player, users can now browse CNN video content grouped into categories, such as international, U.S. news and iReport. Whether there’s a devastating earthquake in Southeast Asia, or a political scandal in the nation’s capitol, timing is everything with news. For this reason, all of CNN’s web-specific programming is filtered to show real-time news, as users are on the site.

TV Schedule

Content was organized into morning, afternoon and evening playlists allowing users to quickly sweep the programs playing in key parts of their day.

Reminder Component

Sometimes we all can be forgetful. Understanding this user behavior, we created a set of reminder components that issue instant reminders to CNN’s tech savvy, on-the-go users via their mobile devices (text messages) and emails.

Navi States

Every single design choice we make has a clear underlying goal. In this case we chose very specific shading and color themes to differentiate between the different interactive states for users.

Show Templates

CNN.com also features specific shows such as Piers Morgan, AC360 or Morning Express. We designed a consistent user experience for each show which featured their own global navigation and social components.

Example:

Below we have Piers Morgans show and Robin Meades “Morning Express” show. Drag the vertical line below left to right and scroll up and down the page to see the difference between both shows.

Drag to see how a unique template can be changed depending on the TV Show

Side Navigation

We added a horizontal navigational unit together with social hop topics and a following function. Spacing was carefully considered to keep key functions above the fold and avoid a cluttered first impression.

Stylesheet

We believe in designing beautiful components that help users achieve what they need to accomplish in a way that’s easy to use and takes a matter of seconds. To the right is the style sheet for the Morning Express show template.

Player Icon Player Icon

Video Player Variations

CNN required the us to provide users with a wide variety of video player formats depending on the scenario of where the videos would be displayed and the size allotted for the screens. We created a full set of players with scalable functionalities – from full screen mode to one with a minimum of 416 pixels width.

Full Screen VideoPlayer

960 Video Player

This format is used in CNN’s main video destination to give users the greatest amount of flexibility and functionality of use.

960 / Grid View

Watch different videos and playlists of CNN news programs, segments and reporters using the grid view.

960 / Squeeze Back Ads

How many times have you watched an online video, only to have the experience interrupted by a commercial or advertisement? We designed squeeze back ads allowing the user to continue to consume the key content but avoid a frustrating take over.

960 / Info Panels Breakdown

The “Info” button in the video player offers users an extra layer of information, related news, related videos and even Facebook and Twitter RSS feeds.

960 / Info Panels Breakdown

For users who want to dig even deeper into the selection of CNN videos, you can learn about the video’s content, people in the video, related stories and related video topics.

640 Video Player

The 640 pixels width video player is the most commonly used format across article pages and is vital for embedding content in external sites.

640 / Video Finished Screens

Once users finish watching a CNN video, they can reply to video comments from other users, share the story on Facebook and Twitter, and even jump to the next video within the same video player experience.

640 / Video Playlist Browsing

Sometimes we need help finding content that interests us. This makes it easy and informative for users to browse the video playlist.

640 / Sharing Video Screens

What's the value of news if you can't share it with friends? Post comments to Facebook; Tweet it; or email it to your friends.

416 Video Player / Preview Screen

This video player is designed and sized to accommodate smaller screen space on your computer.

Lorem ipsum Lorem ipsum Lorem ipsum
Oldies but goodies!

Video Commenting

News is no longer the passive experience it once was. It’s become heavily dependent on user-generated content. We created a function to allow users the opportunity to participate in the news experience by recording their own video comments on their web cameras.

Browsing Video Comments

Browse through the list of user-generated video comments, agree and even reply back.

Technical difficulties?

Did an error message appear while recording your video comment? This will tell you what’s wrong and how to fix it.

Video Commenting Process

Utility Bar Component

For added simplicity and ease of use, we created this tool bar that is updated as soon as you browse the site. From this bar, you can easily share the content you are browsing at that time, thereby minimizing social clutter that can often occur with this type of content.

Sound off

Use CNN’s built-in commenting service to sound off on a news story.

Facebook

Post your comments onto your Facebook wall.

Twitter

Tweet the article and see what other followers say.

Followed Sources

Check out what your social followers are doing. Find out which CNN reporters are on your followers’ list of active sources. Follow trending topics.

More Case Studies from Fi

Google at cannes
Google at Cannes Mobile App

We teamed up with Google to create a mobile web app that allows users to map their location to the hottest social gatherings, events and parties at Cannes.

60 minutes app
60 Minutes Chrome App HTML5 / Web

Working with CBS Interactive, we created an elegant online news and entertainment experience for Chrome users.

Google at cannes
Civil War 150 Flash / Web

Using colorful info graphics, Civil War 150 informs, educates and entertains users about the American Civil War.