Monadnock Humane Society

Building the Monadnock region’s premiere digital resource for animal welfare.

The Monadnock Humane Society’s website needed an overhaul to better showcase offerings, resources and donation opportunities beyond those related to pet adoption.

Role

UX Lead

Activities

In-depth interviews - competitive analysis - tech stack discovery - information architecture - wireframes

The Challenge

Design and develop a more content-heavy site that not only attracts prospective adopters, but also those in need of animal support services, and those wishing to solve animal-related problems through donating or volunteering.

The Process

Understanding the what

One thing was very clear from the get-go of this project: Monadnock Humane Society was far more than just a place for the community to adopt pets. Instead, it’s offering spans:

6 Emergency Services
7 Pet Help & Ownership Services
8 Ways to Get Involved
9 Ways to Donate

In order to tackle the feat of organizing this content in a way that would align with strategic goals, be intuitive to and not overwhelm users, we first conducted an audit of all existing programs, held multiple in-depth interviews with stakeholders, conducted a crawl of the current site, and did a competitor analysis of similar organizations.

Organizing the new experience through site-mapping

After crawling the site to account of all pages that needed to be carried over to the new site, we thought about the organization’s goals for the redesign:

Give prominence to offerings beyond adoption - dog daycare, spay/neutering, dog boarding, pet microchipping, vaccinations, fostering, etc.
Position the brand as the local resource for everything animal wellness.
Increase donations

This information, reconciled with existing content, brought us to our final sitemap of 157 pages (not including blog, news or event posts!).

Structuring key pages through information architecture & wireframing

Header

Before: The existing header was extremely convoluted, displaying multiple rows of links when “Menu” was selected. There was no clear hierarchy to the 3 main categories of Adopt, Volunteer and Donate, and there was no indication until a user clicked “ menu” of all the other service offerings that exist.

After: With our sitemap containing 9 different main buckets of content, it was crucial we found a way to make the our header digestible and to give hierarchy to the categories that needed it. We opted for an approach that features a horizontal navigation for the 3 primary categories and primary Donate CTA, in addition to a drawer navigation that contains more specific info on the most prominent services, as well as all about-type information and resources. This paradigm communicates hierarchy instantly in a simplified way that also allows the user to explore more in-depth the many offerings outside of just Adopt, Services and Ways to Help.

After: Vertical navigation where users can further explore the most prominent services, as well as About & Resources.

After: Two-column dropdown navigation shows all pets in this case (or in other cases, all services, or all ways to help) on the left, with a flexible ‘Featured’ space on the right.

Homepage

Before: Monadnock’s homepage was extremely limited in terms of information and mostly acted as a secondary navigation.

After: We structured the information on the homepage to match Monadnock Humane Society’s business priorities, including a way to donate at the very top, brand messaging around the organization’s leadership as a resource for animal welfare, adoption opportunities and key services. We brought the brand to life by featuring latest events, and built credibility and social proof through blog posts and testimonials.

Events

Before: Events were a crucial part of Monadnock Humane Society’s positioning as they aren’t only a community resource and donation collection vehicle online, but a major physical presence as well. The old site didn’t do events justice, simply featuring a calendar with small thumbnails calling out when events would be happening. The page was also littered with information unrelated to events, making it difficult to focus on the main objective.

After: We revised the archive so that each event would get its own dedicated post to call out important information such as date and time, a featured image, and a link to learn more. The new archive featured a way to view events as listings, as well as a way to view as a calendar to give users options for how they could browse. Unlike the ‘before’ calendar, there was no other distracting content, keeping the page very focused on the listings themselves.

The Outcome

Since launch, we’ve seen a 116% increase in traffic to the Monadnock Humane Society site. With a site that’s easy-to-navigate and that presents the brand as a credible leader in the space, the Monadnock Humane Society is now seen as a true overarching resource for animal welfare in its community.

Learnings & improvements for next time

During our sitemap phase, the client was adamant about wanting pages for every type of donation. Instead of having them providing content for those pages at the time to validate whether or not the pages would be necessary, we realized much further down the line that there simply wasn’t enough content to justify having all of the pages and had to rework quite a bit (4 rounds of Sitemapping!)