Summary: ChattaNeuter's old website had usability issues with a difficult to use header and hard to find content. My Make-a-Mark team re-restructed their website, designed a compelling header/homepage, and used beautiful photography to make their site feel warm and inviting.
I worked on the website for ChattaNeuter as a part of Make-a-Mark, an organization that gathers creatives for one 12-hour work day each year to do work for non-profits. Special thanks on this project go to Tim Moses, Scott Hoelsema, Mike Conrad, and Leigh Ann Parrish, the other makers.
Before meeting with Executive Director, I carefully audited the existing site. I discovered a few issues that a new website could address:
- The homepage header didn't offer a clear message about what ChattaNeuter did. It 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. Since new users spend 80% of their visit on the homepage header, this was a significant issue.
- 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 "book online" feature wasn't emphasized enough. It was on the website, but the donate call-to-action (CTA) was far more prominent. Since bookings are the clinic's main source of revenue, it was important to make the book online feature the most prominent CTA an the donate CTA secondary.
- A pop-up modal, asking users to subscribe to a newsletter, was frustrating users. It's clear from research that users consider these modals are the most hated form of advertising. Not only that, but the clinic doesn't send e-mail campaigns very often. So, a large mailing list isn't necessary.
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:
- I 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.
- I 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.
- I 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, I got rid of the pop-up modal and moved the newsletter subscribe to the footer section of the website.
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.
But, with so many variables, I was concerned the pricing would get confusing. To keep things simple, I 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.
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.