Streamlining a non-profit's website to maximize conversion
/
/
ChattaNeuter

Encouraging higher conversions with a thoughtful website structure.

Visit the Site
Launched

October 5, 2018

About the Client

ChattaNeuter is an animal welfare non-profit that offers high volume, high quality spay/neuters for dogs and cats.

With a few other creatives, I volunteered with Make-a-mark, an organization that provides free design resources to non-profits, to gift Chattaneuter a new website that tells their story more effectively.

Strategy
Branding
Web Design
Web Development
Photography
Icon Design
Copywriting
Print Design
Illustration
Social Marketing
01

Maximize the home page

The header consisted of a slider with auto-rotating images. The text displayed over those images lacked sufficient contrast to make them legible. As the slider rotated images, a button animated in from the bottom. The animation was distracting and the button was hard to click on.

02

Make pricing transparent

One of ChattaNeuter's value propositions is the low cost of their services. They use their non-profit status and outside funding from donors and grants to offer inexpensive and sometimes free services. 

03

Make content easily accessible

Helpful content was hidden in hard to find pages. The post-operative instructions, for example, was a blog article you could only find if you happened to see it as one of the rotating images in the homepage header.

04

01 | Maximize the home page

The Homepage Header

Featuring a lovely photo by Leigh Ann, one of the makers, the header now communicates what ChattaNeuter does clearly and makes it easy to find what you need:

  • We wrote the headline by adapting a note I took from our meeting with Anna, the Executive Director. She was explaining how ChattaNeuter began and was making it easy for us to understand. Website copy is best when you take out industry jargon and speak plainly.
  • We re-organized the website structure and the navigation bar. Now, it's easy to get to find the information that's most pertinent to the user.
  • We made ChattaNeuter's online booking the main call-to-action. It's in the top-right position in the navigation bar and it's also below the headline. Scroll further down the page and there's another book online CTA.
  • With the director's permission, we got rid of the pop-up modal and moved the newsletter subscribe to the footer section of the website.

02 | Make pricing transparent

Pricing

But, with so many variables, we were concerned the pricing would get confusing. To keep things simple, we chose to use a card system so that similar services could be grouped together. Plus, any time a new grant goes into effect, they can add a new card that explains the special funding.

03 | Make content easily accessible

Presenting content strategically

On the previous site, the post-operative care instructions were hidden in a blog post that was hard to find. We moved it to an "Instructions" page and added pre-operative care as well as instructions for their Feral Cat program.

Our maker team also created the Instructions page using Rich Text Blocks (RTB). Unlike vanilla text fields, which only let you add un-styled text, RTBs allow limited styling. You can:

  • Create headlines. This is extremely helpful for breaking up long pieces of content.
  • Bold and italicize text. This enables the ChattaNeuter team to give key pieces of content emphasis.
  • Upload media. You can add photos and video. You can also style the images a little bit by making them inline, full-bleed, or changing their alignment.
  • Add lists, like this one. According to user research, most users (79%) skip reading word-for-word. Instead, they quickly scan a site's text. Lists are more scannable and more likely to be ready by a user.

With their instructions page built using RTBs, it will be quite easy for ChattaNeuter to edit the content, keeping it fresh and up-to-date.

04 |

Leigh Ann, a maker volunteer, took beautiful photos of the Chattaneuter staff. Pictured are a couple with their daughter and dog standing in front of the Chattaneuter mural.
Over-the-shoulder shot of the Chattaneuter website displayed on a macbook.
Medium shot of a phone displaying the CTA section on the Chattaneuter site.

All our projects ignite with the same spark.

We ask questions, get to know you, and delve into the challenges you face. Our critical thinking roars to life and we catch fire with creative ideas.

Start a Project