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.
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.
Who Are The Users?
Working with Clean Water’s Database Manager I developed demographic profile of Clean Water’s average supporter.
I developed a persona for 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.
Organizing the Site
From this combined list I created an information architecture designed to meet both sets of needs, a universal navigation schema, and secondary navigation schema.
Because the site was flat HTML using server-side includes, there was flexibility for state offices to have unique, manageable secondary navigation structures.
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.
Designing the Look
My next step was to create a visual design that ordered these elements consistently and allowed for a flexible, hierarchical presentation of information.
Based on the highlevel sketches of the homepage, a state homepage, and an article page, I 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.
Developing the Design
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.
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.
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.