Redesign the video experience on

Right from the beginning, I have decided to keep the general feeling of the CNN website.

In my opinion, nothing should distract the viewer from watching the video content; therefore I have simplified the video tab. At the same time, there are three interface types for different users. And each type of interface aimed for different user scenarios.

Majority of these ideas came to me from my friends’ feedback.

In 2011, I have attempted to redesign the video section of the CNN website, the major news media outlet. (CNN did not sponsor and was not interested in my work). Initially I was not able to implement all of my ideas, but I kept thinking about this project for the rest of the year.


Most news media websites have their weather forecast and news block on the same page. This way of presentation, however, is deficient for people who want to learn about weather forecast in more details.

Events map

I have developed a new way of presenting news by implementing interactive maps with markers indicating the places from where the current news have originated.

Most popular

There are copies amounts of information on the website. I have found the way to present this information concisely without making it look too busy.


Users don’t want to see interface elements when they are watching videos.

Quick vote

Website is a good polling place. I propose a better way attract more attention to this portion of the website.


Weather forecast is usually presented with the numerical interpretation of the temperature outside and an icon or a text showing precipitation levels.

Sometimes the users want to know detailed weather information for the whole day. To get this information consumers usually have to go to a different section of the website. Instead they should be able to open extended weather information in a new tab.

Color reflects the temperature of the air

Events map

The map will show the geographical origin of the news.

If user zooms out on the map, the news is automatically sorted by its significance and internationally importance.

The mark on a map is the place where the story came from. Hovering the cursor of the mouse over the mark shows the news header and ‘news type’ pictogram. To get the full article one has to drill down by clicking on the mark.

Map advanced view

While zooming in or out on the map users can calibrate the map and see events that have happened on any particular continent, country, region or city.

If an event mentions multiple places, these places will be linked together with the light lines.

Video experience

The video player options are hidden until user need to adjust them. The news consumers who are less tech-savvy won’t care about customizing video-player interface options. They only want to receive the information (the news).

Those who are interested to find out more about any news events, can choose suggestions offered by the video player. (see below)

Video-pleayer hover

Image is taken
from the movie "The Avengers"

Player without interaction.

Only the news. No interface.

More videos

By default the video player will play the list that is not visible to a user. By using «more videos» button, one can see the play-list and skip to any other video on this list.


The user will be able share his/her favorite news content on any social networks.


The video player has two interface options that depend on the content.

The first option: The name and the description of the news event.

The second option: When the cursor is hovered over the name the timeline appears as well as some other options (i.e. option to save the article to be able to read later, video decrypting

Youngest Guantanamo detainee transferred

Canadian Omar Khadr has been moved from Guantanamo Naval Base to a Canadian prison. CNN's Paula Newton reports.

Progress bar

Dark red - already watched part of the video.

End time

Completion time depends on the view you time. That is, the scanning will not end in just two minutes, but at 12:00.

Watch later

You can save video to watch it later.


View news text.

Video text transcription

This option can be used by hearing-impaired persons or anybody who want to have transcribed version of the news event.

How does it work

The text will be highlighted to indicate the tempo of speech of the news presenter.

View more news

When this option is activated the user sees the news line-up and what is currently playing.

You can see timeset and header of every video by simply hovering on it.

UI elements

Appears on hover.

Grid view

Grid view allows the user to see even more news videos. In gird view the user can quickly find what he/she is looking for or to sort the group the content by different criteria.

UI elements

Appears on hover.

Smart filter

This option allows the user to customize the newscast depending on their own needs.

The integration of the grid view option and the smart filter allows the user to choose specific time for any specific news group to be delivered.

Smart filter bar

Smart Filter bar lets you see the schedule. It is very simple to change it.

Most popular

The most popular news are displayed in the most popular section.



In this mode the name of the the news event, its rubric, description, and photos are displayed.



While the cursor is hovered over the news name, the stack of the 5 most popular news photos are displayed. Each photo is positioned in such a way that it could be easily clicked on.


Expanded view

By choosing expanded view option the user can see news sorted by rubrics.

Just keep scrolling.

Quick vote

Example of the unusual block presentation. This way more traffic can be attracted to the polling.



When the page is scrolled all the way down to the bottom, the icon is getting shifted to the side creating some space for polling.


Answer, please

The yes/no question. Here one can also check the results of the polling.



The simple info graphic displays the results and the total number of votes real time.



This footer is simpler than current footer on CNN website. Articles stands out much more than sub articles.


Using «zoom» icon the user can open the search field.