Screen Shot 2019-03-19 at 15.46.44.png

The Problem

The Ellerbe Creek Watershed Association, a North Carolina-based nonprofit, had a website in as much need of tender loving care as the polluted creek it depicted. As well as being outdated and inconsistent, with broken links and PDFs that failed to load, the site did a poor job of articulating the story of ECWA, its work, and impact. However, ECWA did not have budget for a site or brand redesign.

The Solution

Viget’s five apprentices took the project on as a pro bono endeavour. We worked for six weeks to deliver a completely new website built with an off-the-shelf CMS (Weebly) that would be easy for ECWA’s non-technical staff to scale and maintain. My role was UX design and brand strategy. I was also largely responsible for implementing high-fidelity designs in Weebly, and documenting the process so that ECWA could take it over.

 
Untitled design.png

Market Research

Screenshot 2019-03-22 at 11.46.33.png

I carried out a competitive audit of 8-10 other conservation organizations, on a local, state, and national level. I compared their structure, especially navigation and CTAs, and brand details such as imagery, graphics, and voice and tone, and made hypotheses about the goals these were tied to. It was useful to bear their hierarchies in mind as I reworked ECWA’s Information Architecture.

 
Screenshot 2019-03-22 at 11.47.09.png

I also did a comprehensive review of ECWA’s current site, logging all existing pages and their location. This gave me a good grasp of which pages were dead wood, which pages were wrongly categorized, and which pages didn’t exist at all, but needed to.

I came into the Information Architecture part of the process armed with recommendations for creation and consolidation, with the goal of clustering together like content (such as blog posts, which didn’t really exist on the old site), and making new, cohesive spaces for important parts of ECWA’s story: its origins, its nature preserves, its projects and initiatives, its volunteer offerings.

 

Information Architecture

Brainstorming Information Architecture

Brainstorming Information Architecture

Screenshot 2019-03-22 at 12.34.51.png

The new sitemap I created had 5 top level menu items which were category labels rather than landing pages, in order to limit the amount of work ECWA would have to do to create content. From left to right, they were intended to represent a user’s journey through understanding — first, getting to grips with what a watershed is, then discovering ECWA’s crown jewels, its nature preserves, then moving to ECWA’s work, then its staff and history, and then ways to get involved. Last in the navigation came the prominent “DONATE” button, which is the site’s principal CTA. Due to the constraints of Weebly’s UI, I didn’t include any tertiary pages in the dropdown menus that appear when a user hovers over the primary nav.

I gave Our Preserves and Our Work overview pages which pull together a brief synopsis of all its preserves and all its projects. I also created new history pages, and brought together the nonprofit’s many strategic plans and reports under Guiding Documents. I consolidated its mutiple calendars on an Attend an Event page which described its many different types of event clearly and succinctly. And I made Stories from the Watershed a central repository for its collection of articles, videos and photographs.

Extract from ECWA’s redesigned sitemap

Extract from ECWA’s redesigned sitemap

The new footer

The new footer

I used the collaborative “Our” language to connect back to ECWA’s brand strategy goals, which included being more inclusive and accessible. The design direction they had chosen was dubbed “Do the Neighborly Thing”, which focused on connecting to the local community and preserving a common legacy. I echoed this theme through a positive, uplifting brand voice, with taglines such as “We’re in this Creek Together.” Our designer used a palette inspired by the soothing colors of the natural world and typefaces that felt solid, reliable, and friendly.

Wireframing

Screenshot 2019-03-22 at 14.02.52.png

I worked closely with our designer in the production of high fidelity compositions, and was able to support her by wireframing some of the major page designs in Whimsical. I thought about how to display content within the constraints of the Weebly (our chosen CMS) theme. We knew maps, recurrent CTA and newsletter sign up blocks, and image + text content sections were going to be fundamental to the site, so I prototyped some of those. Once we further investigated Weebly’s functionality, we also started to rely on image cards, which were a neat way of linking between pages. We were very cognizant of the fact that ECWA did not have a lot of bandwidth to maintain the site going forward, so we tried to complete as much as we could.

This process of getting from low fidelity to high fidelity to implemented designs was complicated due to a compressed timeline and the fact I was wearing the developer hat, uploading content to Weebly and trying to stay true to the design vision for the site. As our team’s only remote member, I learned a lot about communication and task designation imperatives during the final stage of the project.

As well as handing off a staging site to the client team, we also delivered a very thorough Implementation Guide with advice on everything from content strategy to plug-ins. They were delighted.