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.
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.
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.
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.
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.
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.
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"
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.
We focused on four specific factors: content, personalization, user experience and portability.
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.
Content was organized into morning, afternoon and evening playlists allowing users to quickly sweep the programs playing in key parts of their day.
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.
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.
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.
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.
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.
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.
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.
This format is used in CNN’s main video destination to give users the greatest amount of flexibility and functionality of use.
Watch different videos and playlists of CNN news programs, segments and reporters using the grid view.
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.
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.
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.
The 640 pixels width video player is the most commonly used format across article pages and is vital for embedding content in external sites.
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.
Sometimes we need help finding content that interests us. This makes it easy and informative for users to browse the video playlist.
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.
This video player is designed and sized to accommodate smaller screen space on your computer.
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.
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.
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.
Working with CBS Interactive, we created an elegant online news and entertainment experience for Chrome users.
Using colorful info graphics, Civil War 150 informs, educates and entertains users about the American Civil War.