To help improve the user experience for visitors to our website, ACE launched a comprehensive redesign in late November in advance of the release of our charity recommendations. We began reorganizing the content structure in April of this year, and we developed a custom WordPress theme built on the Genesis framework.
Research & Planning
From the beginning, we focused on developing a content structure to meet the needs of our audience rather than building something that only made sense internally. Using tools from Optimal Workshop, we developed two small-scale tests to gain preliminary insights from individuals ranging from those familiar with ACE’s work to those with no prior connection to animal advocacy.
The first test was an open Card Sort in which we asked participants to sort cards representing ACE’s core content areas into groups, and then to create labels for each group. Though the group of participants was small, we gained rich insights about what information fit naturally together for them, and from this we created the content groupings that exist in our main navigation.
Our second small test was a Tree Test, in which participants were presented with a tree representing our proposed navigation structure and asked where in the tree they would go to complete three key tasks on the website. This test was particularly useful because it isolated the navigation from any design or layout concerns. It helped us to simplify our structure and identify common missteps on the path to important goals like quickly finding an effective charity, understanding the breadth and depth of reviews available, and locating information about ACE’s track record and methodology.
Additionally, ACE embraced a complete reorganization of the content by an outsider unfamiliar with the inner workings of the organization, offering potential for a fresh perspective.1 Later, after completing our preliminary tests and working closely with ACE’s senior staff, we refined our major project goals and developed the primary and secondary navigation structures currently live on the website.
Some of our key goals for the project:
- Organize the navigation structure to improve user experience.
- Increase traffic to the donation forms for our recommended charities.
- Engage new and existing audiences with a broad range of tools and information.
- Define and document web style guidelines to ensure consistent “look and feel” throughout website.
Design & Implementation
The new design incorporates several new elements, which aim to ease navigation across various types of content. The category pages, for instance, offer a broad overview of each section that highlights the main parent pages with general introductions. Additionally, related content widgets in the sidebar and below blog posts connect pages and posts from across the website. New page layouts with tabbed content allowed us to consolidate several related pages, and ensure that more complex reports have some general introductory content closely associated with them.
Design elements, such as the Proxima Nova webfont, were chosen for clarity and consistency with ACE print materials. Our mostly monochromatic color palette and generous whitespace aim to emphasize the ACE brand and allow content elements like photography, charts, tables, and typography to take visual precedence.
We implemented new sorting functionality for Charity Reviews so that visitors can easily sort reviews based on the type of work undertaken by different organizations or by status and depth of review. An overhauled archive process now also gathers reviews automatically from previous years into a centralized Review Archive, cross-linked with current published reviews.
Our previous website was built in WordPress and we continued with this infrastructure, adding a custom child theme on top of the Genesis framework granting us a solid foundation in SEO, security, and performance. Additional technologies used in the site include Gravity Forms, Advanced Custom Fields, and Paypal, among others. We also put in place a more collaborative coding workflow that is version controlled using GitHub.
Right now we’re working on improvements to the site performance, mobile experience, form processing, and content updates. We also have plans for upcoming usability testing to provide insights on how to improve the structures that we have in place now. Additionally we are working to integrate new software for our Research Library, built by a group at Freie Universität Berlin.
We hope that you are able to easily find what you’re looking for on our new website. If you have any comments or suggestions, please contact our web developer. We’re always looking for ways to improve, and are still in the early stages of making this new website as effective as it can be.