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.
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.
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.
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.
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.
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.
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.
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 ProjectMore Projects
