I developed this site to illustrate ways individuals could improve the quality of and reduce the amount of runoff from their property and provide tools, DIY actions, and helpful habits homeowners and others can take. I built the site using Bootstrap framework and Wordpress for the CMS with a custom theme and plugins.

The homepage has a dynamic, flexible grid that displays different actions, news, events, and more. Underneath are featured actions that users can take to improve water quality and a fun 'Did You Know' with interesting tidbits.

The central core of this website are the different "Actions" users can take, such as picking up pet waste, installing rain gardens, planting trees, etc. Each action page has resources, images, and a narrative to help users. They are also claffified with a 'Homeowner Key' that identiies them as DIY, low cost, low maintenance, etc. Commenting on these pages also allows users to ask questions, share new information, and interact with each other.

Because some of the content is fairly technical, we provide a 'Glossary of Terms' which provides definitions and more information. Through a custom plugin, I dynamically hyperlink any term on any page to it's definition page, similar in function to wikipedia's inpage links. And to make sure we don't miss anything, synonyms are incorporataed so that both 'chemical', 'chemical application', and 'chemical applications' all link to 'Chemicals'.

The Media & Downloads page is a repository for all the links and PDFs we display on action pages. Users can see all the resources or filter by key words (eg 'Rain Barrels').

The Search page is powerful and displays results in an organized, easy to understand format with the ability to filter results by 'Images', 'Downloads', 'Actions', and others. Image preview results are displayed at the top, similar to popular search engines and results show detailed information about each page, for instance, it's category, page parent, published date, etc.

I made use of custom page templates to give certain pages extra flare. For instance, this facebook app game 'Stormwater Sentries'. Instead of reusing the 2 column template for the rest of the pages, I utilize a fluid, full width template with big hero images, lazy fade jquery image loading and screenshot mockups.

Initial, flat wireframe design for homepage and inner 'Action' page from Digital Ink.