Operation 111 Project Overview
Web Layout & Content Design . HTML & SASS NationBuilder Integration
Year Completed: August 2013
Campaign Overview & Goal
Operation 111 was an initiative launched to promote conservation and restoration of natural habitats and waters, within the five Gulf Coast states impacted by the 2010 BP oil spill. The campaign’s goal was to inspire 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 campaign on the web. 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 basic 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.
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 interior page template. Both the homepage and internal page designs have strong bold hierarchy that help to establish good content structure for a user’s reading experience. 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. Since the website focuses on building community around shared issues, the homepage guides users on using the website in three key ways: (1) learning the facts about the overall impact per state; (2) encouraging states to tell their stories about the oil spills impact on their region; (3) encouraging local political involvement and building community around shared issues
b. The interior page template utilizes a two column layout that organizes supporting content on right and primary content on the left. The templates are fixed in their column widths and structure, but the content varies based on what the user interacts with throughout the website.