Operation 111 Campaign Website

Read Time: < 1 minute

Operation 111 Project Overview

Creative Contributions

Web Layout & Content Design . HTML & SASS NationBuilder Integration

Year Completed: August 2013

Campaign Overview & Goal

Operation 111 was an initiative launched in 2013 to promote conservation and restoration of the natural habitats and waters, within the five Gulf Coast states impacted by the 2010 oil spill. The campaign goal was to ensure meaningful conversation about the significant impact the oil spill had on Gulf Coast economics. How each state spends its settlement money is crucial to the restoration of personal life and economic health.

Video Credit: The Victory Group, Tampa FL


The NationBuilder community platform was the tool chosen to develop the web component to the campaign. Having never used the NationBuilder platform before, there was a huge learning curve in understanding how to integrate the designs into the platform. The Nation Builder team was graceful in sharing documentation that allowed me to take my HTML & CSS knowledge and work within the platforms’ parameters. With only 4 weeks to launch a full-color prototype, all designs and web functionality had to be integrated into NationBuilder and ready for group testing.

Design Approach

In order to publish content efficiently while maintaining some sort of design cohesion, the content structure for two main templates were designed: the homepage and the interior page template. Both the homepage and internal page designs have strong hierarchy that help to establish good content structure. Once the designs were finalized they were developed into HTML and SASS templates, that were integrated into the NationBuilder platform.

a. The home page offers an interactive map which highlights the 5 key states impacted by the BP oil spill. The goal of the interactive map is to provide an opportunity for users to have clear points of entry to learn about the oil spill devastation and initiatives that are state specific.

b. The interior page template utilizes a two column layout that organizes supporting content on right and primary content on the left.

Social media & sharing icons powered by UltimatelySocial