Humane World

Migrating and redesigning two entities into one for a cohesive brand experience.

The Humane World website on multiple devices

100/100 Web accessibility according to a Lighthouse test

92/100 SEO according to a Lighthouse test

Client Overview

Humane World (formerly the Humane Society) is a non-profit organization whose main focus is to end suffering for animals. Striving to end harmful animal practices through rescue, response, sanctuary work, and various hand-on animal care services, Humane World seeks to build a stronger animal protection movement through policy change and passionate activism.

Humane World Mobile Gallery

The challenge

Before the recent brand refresh to Humane World, the organization was split between two entities — Humane Society and Humane Society International — and were maintaining them via two separate websites. To make things more complicated, one site was on Drupal while the other on WordPress, so content editors were navigating content on two completely different systems with no cohesion between them. 

From the user perspective, another main challenge was that they found that both internal and external users had difficulty understanding their message when visiting the original site; rather than being an organization that was focused on animal protection and tackling the root causes of animal cruelty and suffering, they were commonly misconstrued as an animal shelter or a resource for pet owners. Other issues included users having difficulty finding content, a poor mobile experience, an uninspiring design that didn’t help gain new audiences, and no streamlined way to allow users to sign up to volunteer or donate.

It was time to consolidate the two websites and present a unified global brand experience to users worldwide.

The process

1

Updated Designs

The interface was made more beautiful and easier to use, with clear pathways and calls to action. We also replaced the top level images with more positive images of rescued animals and success stories.

The previous Humane Society website next to the redesigned Humane World one.
2

Reworked Site Map

We re-imagined the navigation to allow users to directly address the misconceptions about the organization, as well as provide pathways and micro-site solutions to allow users to visit regions and countries.

Examples of the Human World's revised navigation

The solution

Working in tandem with an outside PR agency who was managing the brand rename and refresh, Kanopi worked in three phases to consolidate the two sites. 

The first phase was to focus on the Humane Society’s Drupal site as well as their blog. We did extensive discovery and research, including content strategy work (including personas and audience research), a technical review, sitemaps, user testing, and wireframes. The second phase was to then repeat the same efforts with Humane Society International’s WordPress site. Both phases 1 and 2 took about six to eight months to complete. 

The final phase was then to amalgamate the two onto one platform and rework the design to accommodate both. The design was improved in several areas: 

  • We created a mega menu that allows for media-rich blocks inside the menu as well as easy management of menu links.  
  • To make form submissions easier, we migrated to a more best-in-class forms module called WebForm. 
  • Accessibility was improved
  • We streamlined their entities, cleaned up the admin experience, and deleted a lot of cruft. Using Kanopi’s Saplings work, we made their content editing experience component-based to make it easier to manage and more flexible.
  • Visual data (numbers, maps and charts) are included throughout to better demonstrate what they do. 
  • The imagery was reconsidered to tell a fuller and more complete story of how animals were being affected in each geographic location.

Because their timeline was aggressive due to the rebrand’s firm launch date, we made the decision to upgrade their existing Drupal site rather than building from scratch. As they were already on Drupal 10, it became a matter of simultaneously migrating the international WordPress site into the Drupal one to bring the entities together into D10. All content and media from past years was kept intact so the end viewer would have access to it in the new website regardless of which initial platform contained that content.

Key features

Domain Access

The documentation of Humane World's site map, demonstration how the domain access would work

By using Domain Access, Humane World can create subsections and landing pages for different regional areas of the site, as well as present block content that’s customized to the different regional audiences. This allows those regions or countries to share and control their own content while not affecting the larger brand.

Translation Capabilities

Human World page for the United Kingdom

To meet the language needs of their global users, the site can be translated into multiple languages (11 languages are currently available), with flexibility to add languages as needed.

Localization

Human World's Italy site

The new website uses geolocation so it can serve up a different sign-up footer block tailored to the location or country of the visitor.

The result

Kanopi provided Humane World with a full fledged digital experience with both desktop and mobile designs tailored towards their demographics, giving a UX experience that focuses on showing users important content and delivering clear messages. Because the two brands were merged into a single entity, content editors gained all the efficiencies of managing only one instance. 

The micro-site functionality allows the separate regional offices the ability to control their own content without giving them the keys to the global umbrella site. Additionally, with the clean up of the extraneous content types, components, unused modules, and technical debt, the site is simply leaner and more streamlined.