MENU

Anderson Cooper Timeline

2213
1

Goal:

Build an interactive timeline for Anderson Cooper showcasing important and memorable events throughout his life and career. The idea was to build a stronger following of Anderson fans and promote his (then) new daytime TV talk show “Anderson”.


This was my first project at Telepictures and required a skill in both Design and Development. Direction and content for each of the timeline dates, as well as a great deal of image and video assets that could be used through the site, were provided.

The design process started by creating a couple different style guides that accurately represented Anderson as a professional news anchor but also as someone relatable to the audience. After choosing a direction to go with, comps were made for a couple of the events in the timeline to give an idea of how content would be played out throughout each event.

Development started with a standalone prototype using HTML, CSS, and Javascript. There was a lot of movement asked for this project so I needed a solid way to support a transition between events that had multiple animations but didn’t bog down the browser in the process. Javascript animations were written as a module where each element was running the same animation function with different customized settings. Flowplayer was a good solution to handle any of the video content. It was highly customizable and easily integrated throughout the timeline where I could animate it and time when the videos should start.

The biggest purpose of the timeline project was to bring in a captivated audience to the coming show. Because of this, the idea of combining the timeline with social media aspects was crucial. We wanted the audience talking about this. So to accomplish this, I created Facebook comments for each page of the timeline to start a conversation between fans and get them to share the content to their walls to bring in more fans.

Lastly, since the timeline was going to live on the same system as the site for the coming TV show, the last step was to itegrate the project into CrowdFusion. Integration of all these elements ensured the kind of engagement we were looking for before the launch of the show.