&
Together with the History Channel, Fi created the digital experience for the 150th Anniversary of The Civil War
Visit Live Site

A&E TV Networks wanted to create a fresh, exciting and dynamic interactive experience in recognition of the 150th anniversary of the American Civil War that detailed all the various aspects of the colossal and monumental event in America’s History.

The idea was very simple; make a richly dynamic and deeply educational experience fun for a variety of audiences - from the hardcore Civil war fanatic to the 7th grader who is learning about the Civil War.

Overall strategy and visual design were very crucial to the success of the project. Fi developed a way to showcase the top 150 Civil War related topics in a highly intuitive way while taking a deeper dive into some of the more engaging and life changing events.

The 150 Topics and bonus six colorful info-graphics guided and aided the user through a wealth of stellar content ranging from statistics on key battles, weapons, cavalry statistics, and technological advances of the time.


Making History cooler than it already is....

This infographic compares side-by-side statistics
of the average Union and Confederate soldiers.
From salary to supplies and rations, the numbers are sure to shock you.

Showcasing the most critical weapons of the Civil War, this infographic puts an educational spin on the leading weaponry of the time and the turning point of impact these weapons had.

Hundreds of thousand lost their lives.
This infographic provides an in-depth look at the events and causes leading to this massive death toll that rocked a nation’s population.

The bloodiest and deadliest battles are depicted here, and include casualty statistics such as people killed, wounded and totals of the armies that were fighting.

Wars are incredibly expensive, and it wasn’t any different 150 years ago. Find out how it was all funded, and be sure to check the informative tool tips!

This infographic gives users an insight in the education of some of the war's greatest leaders with interactive class statistics and much more.

Some infographics that didn't work

Since the beginning of this project we have constantly been refining the design to arrive at the final product of pure excellence. It was essential to have a centralized navigation right at your finger tips. This gave the user an immediate gateway to choose what information they wanted to learn about. We wanted users arriving at the home page to immediately feel like they were apart of the experience.

We utilized sounds and flares which are keyboard activated, this gave our visitors something to play with right from the very first start. In all these key elements of the homepage, footer, and topic page the user can see refine designed elements and intuitive navigation. The correct order and hierarchy was very important as well. With the more important aspects being more readily accessible within the page.

Homepage

FROM SIMPLE TO SPECTACULAR

We started with a metal slate design with tabbed navigation and known imagery
to emphasize authenticity and the historical benchmark of the Civil War. As we progressed, we moved into a more refined illustrative style showcasing signature aspects of the Civil War and incorporating user interactions. Unique rollovers, subtle flares and clean lines helped take the direction from simple to spectacular.

Footer

MORE INFORMATION, LESS CLUTTER

We developed an expanded “Historian’s” footer to provide users easy access to key topics and help promote valuable information. Within this area, we are able to highlight important facts and direct users to popular topics that allow for user votes to be counted towards the most fascinating of content.

Valuable Historian picks are also displayed to help guide users to key data relevant to the Civil War. Various points of navigation are sure to provide a rich browsing experience to all you wanted to and needed to know about the Civil War.

Topic Page

We developed a custom WIKI promoting the 150 most engaging topics of the Civil War. Relevant imagery and information combined with various browsing options resulted in a rich, highly engaging and informative user experience.

Final Designs