The Clean Water Action site suffered from a hodge-podge site design and a lack of any coherent information architecture including a navigation structure that often led visitors into dead ends from which the only exit was the browser back button. This was a clear indicator the site had grown entirely organically.
I talked with Program staff, Development staff, and Senior Management to learn about their frustrations with and goals for the site. These discussions revealed an unexpected hurdle: a lack of will to change the site.
To overcome this and create buy-in at all levels of the organization I created a competitive research document illustrating the approach of organizations like American Rivers, Public Citizen’s Water For All campaign, and the Delaware Riverkeeper Network. Once staff realized what I was proposing could be done I was able to surface their goals for the site.
Working with Clean Water’s Database Manager I developed demographic profile of Clean Water’s average supporter. I then developed a persona and a list of needs and tasks for this average supporter based on anecdotal evidence from Clean Water’s Canvass Manager and with various Canvass staff.
This high-level information architecture diagram standardized the structure for the bulk of the Clean Water’s main site. Because the site was flat HTML using server-side includes, there was flexibility for state offices to have unique, manageable secondary navigation structures.[/caption]
From this combined list I created an information architecture designed to meet both sets of needs, a universal navigation schema, and secondary navigation schema.
My next step was to create a visual design that ordered these elements consistently and allowed for a flexible, hierarchical presentation of information. I sketched low-level wireframes for the site’s homepage, a typical state page, and for an article page.
Based on those wireframes I then worked with Development department staff to make sure the site’s visual design aligned with existing logo usage and brand color guidelines as they were implemented in print materials and direct mail campaign materials.
Since there was no budget for this project my approach to implementation needed to be a flat HTML site compatible with Clean Water’s locked-in hosting agreement. The profile of a typical Clean Water supporter also meant the site needed to pay particular attention to accessibility.
There was also the issue of how Clean Water’s 501(c)3 and 501(c4) site related to each other and how the content could, and would, connect. I created mind map to better explain those connections.
While still flat HTML, this design was also W3C standards complaint for both HTML and CSS as well as being WCAG-AA compliant for accessibility. Deliverables for this project included:
- competitive research documentation
- Information Architecture schema
- Navigation schema
- File and directory naming schema
- Visual design compliant with brand and logo use standards
- Standards compliant HTML and CSS
After David Zwick, Clean Water Action founder, retired the newly hired President made redesigning the Clean Water Action and Clean Water Fund site’s an organizational priority. By this time Drupal had become a viable option for smaller organizations. This was the approach we decided to take for a year-long redesign and migration project.
Over the flat HTML site’s life I made incremental improvements to both the visual design and functionality in response to feedback from staff and supporters. With no photo budget my original visual design didn’t include any banner images. Senior Management’s embrace of the website as a tool to achieve organizational goals and recruit supporters increased the resources available to me to investigate third-party functionality, services, and develop a library of assets.
Incremental improvements included the addition of photo banners to the site’s header, implementation of Google search, and the addition of social media sharing tools via an addThis account.
In March 2007 I also established Clean Water Action’s relationship with Democracy In Action (now Salsa Labs) as the organization’s vendor partner for blast e-mail, take action and online donation functionality. As of May 2016 Clean Water was still a Salsa Labs client.
This design was in place from January 2007 through September 2008 when I helped launch a new site featuring a refined Information Architecture, a new visual design, and back-end powered by Drupal 5.