When the Xerces Society rebranded with a new logo, I worked to develop a new design system and branding guidelines for the Society’s print and digital media. The most visible piece of this effort came in the form of a website redesign. The website at the time was outdated, suffered from some general usability issues, and no longer really served the needs of staff or of users.
As the lead designer for this project, I needed to quickly and efficiently give the Xerces Society website a fresh design to go along with its new logo, focusing on the navigation and homepage.
This new design would need to:
(Note: this project was not a responsive redesign, given our constraints; we were also unable to address information architecture changes.)
Like any nonprofit, we were operating within both a tight timeline and a tight budget. To maximize the impact of the resources we did have, I chose to re-theme the site, reworking the overall layout and updating colors and typography without changing the structure of most of the site’s sections, the one exception being a completely redesigned homepage.
Before beginning the redesign process, I carefully considered the site’s analytics data to identify key areas for improvement, examining user flows, popular pages, and bounce rates.
Next, I created wireframes for the new site homepage to define its overall structure and decide how to best lay out the homepage’s competing content types. After a review with staff, I created a homepage mockup in Photoshop, then updated the site’s stylesheet to reflect our new design system and imposed a grid system on the homepage to impose some order on the content.
In accordance with best practices for navigational menu design, I separated content into a secondary top bar (with right-aligned content housing search, social media icons, and the site’s “Donate” CTA) and a larger, primary header area containing the logo/homepage link on the left and a right-aligned set of dropdown menu links.
To allow for larger imagery and better readability, I removed the site’s sidebar and moved its content into other areas (the secondary header, for global elements, and the main column for everything else. Meanwhile, allowing the header and footer to fill the browser window gave the site a more modern feel. I then applied a simple CSS grid to the homepage to allow for better content chunking and to lay the scaffolding for a more engaging and usable design.
Finally, to clean up the design and help users differentiate between content types, I developed different layouts for different kinds of content. For example, compare the horizontal “News” section to the “Resources” section; before, these content types looked exactly the same.
The original homepage design suffered from overly long line length, which made its information difficult to parse. Applying the grid system allowed us to shorten the line length. Meanwhile, section headers were difficult to differentiate from copy; I used existing site styles to increase the header size to fix this problem. The new design also enhanced readability by increasing the space between blocks of text and other design elements.
To focus attention on the site’s most important calls to action (for example, the “donate” button), I chose an orange that fit within the site’s new color palette, based on research showing that this particular color is associated with higher conversion rates. To improve the site’s accessibility, I changed the site link colors from a blue that failed AA-level WCAG standards to a subtler -- but still recognizable -- underline style.
Imagery is especially important for a conservation nonprofit. The animals and habitats that Xerces protects are beautiful, so I added new modules to the design to help showcase them. In this instance, adding a carousel to the site’s hero area allowed the Society to showcase a few different aspects of its programs (rather than only one at a time) while directing users to key site areas and incorporating rich imagery. It also provided an opportunity for non-technical staff to easily add content in the site’s Wordpress backend.