+ User Experience Design
+ Flowchart Development
+ Wireframe Development
+ Front-End Design
+ HTML & CSS Front/Back-End Development
The Victory Group, Tampa Florida
Operation 111 was an initiative launched in 2013 to promote conservation and restoration of natural habitats and waters, within the five Gulf Coast states impacted by the 2010 BP oil spill. The goal of the campaign was to inspire meaningful conversation about the significant impact the oil spill had on Gulf Coast economics and local residents.
The NationBuilder community platform was chosen to develop the web presence. Having never used the NationBuilder platform before, there was a huge learning curve in understanding how to build out the front-end of the website. 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 environmental 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 oil spill impact per state; (2) encouraging states to tell their stories about the oil spills’ impact on their regional economy and natural habitat; (3) and encouraging local community and political involvement that would gain attention from Washington D.C.
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 height varies based on the amount of content the user interacts with.