I’m a cat person. I’d like nothing more than to surround myself with felines all day every day, although I’m not sure my office mates would be as happy as me with that situation.
When we started Studio Cotton, we knew we needed to build our portfolio with some passion projects to show our prospective clients what we can do. So when Bristol & Wales Cat Rescue said they’d let us rebrand their charity and create a new website, we couldn’t wait to get started.
This blog post does include a little technical information, but hopefully should be helpful to anyone looking to do a similar project.
The background
Bristol & Wales Cat Rescue (BWCR) have been succesfully rehoming cats in South Wales and the South West for nearly a decade. The charity has long relied on the generosity or their supporters, volunteers and talented vets, but this year found themselves with a long waiting list of cats needing foster homes and a growing vet bill of over £5,000.
We realised quickly that we need to focus on two specific areas: reducing the amount of time a cat spends in foster care to free up more space, and increasing donations – specifically looking at recurring donations to help for future planning.
The website shopping list for Bristol & Wales Cat Rescue
As with all of our websites, we started the process with an in-depth session with the main stakeholder at the charity. We then took all of this information away and created a brief that included a list of all the things we need the website to do.
- Ability to create beautiful layout that works with the new brand identity
- Individual pages for each foster cat
- Ability to filter the cats and display in tidy feeds
- Ability to create forms for different purposes (e.g adoption application)
- Simple content management system with multiple users
- A blog
- Facility for Happy Tails, the charity’s success stories
- Donation facility
- Multiple menus (so that we can keep the focus on key pages)
Adapting proven technology
We love working from themes and templates for the base of our websites. Unfortunately, animal rehoming is such a niche website purpose that there simply wasn’t a theme available that did everything we needed, so we had to improvise.
Cue WooCommerce. WooCommerce is a free plugin that creates online shops on websites that use WordPress. It’s insanely popular and in 2014, was said to power 17.77% of all website shops in the world. This world domination did not happen by chance, WooCommerce constantly wins accolades for its user experience and search engine friendliness.
WooCommerce includes the functionality to give different products ‘attributes’, these are features of the product, such as colour, size or weight – and then allows website users to search and filter using these qualities.
This searching and filtering is essentially what we needed to power the main feature of the new BWCR website, and with a few development tweaks we realised we could make it work.
Choosing a WordPress theme
We used a multi-purpose WordPress theme called Atelier by Swift Ideas. This was already our favourite theme and we’ve used it on a couple of websites previously – including our own – and it has WooCommerce built in.
As we already knew we had to adapt the functionality, we made sure we had a theme that was technically robust and could perform as much of the rest of our brief’s shopping list as possible.
We also love themes by Swift Ideas as they have just the right level of flexibility. We can customise everything we need to (colours, fonts, page layouts and more) but the options are still limited in a way that makes it manageable for anyone with a little understanding of how a content management system works.
Turning an online shop into a rehoming gallery
Adapting WooCommerce to create our cat profiles and gallery was surprisingly easy. First, we had to remove the ability to make a purchase – this setting was built into our theme so all we needed to do was find the right button and turn the checkout off.
We had to leave some information blank at the product level – the long product description, price and tags were all left blank so as not to show on the front end.
We then needed to tidy up the page that was left behind. There was a little padding that needed to be tightened up in areas where we’d removed information, and we needed to hide features like the review section.
This was done by our developer Alex with some basic CSS, although the support team at Swift Ideas are often happy to provide this too. CSS is a development language that controls the style of a website. For a project like this one you don’t need to learn how to write the code, just to get it from your friendly developer or support team, and paste it into your website settings (most WordPress themes have this option available).
The last part is the bit I hate because it involves the theme files. We’d made all the aesthetic changes to our shop, but the wording was still referring to ecommerce – specifically the word ‘products’ appeared in the filters and in search results.
We had to get Alex on the case again, who took a look at our child theme. A child theme is basically a copy of the WordPress theme where you can make changes that stops you from accidentally breaking your website completely.
By changing a tiny bit of code into the child theme’s WooCommerce templates, Alex manually changed the text from ‘products’ to ‘cats’ throughout. I am not a developer, and personally do not feel uncomfortable editing theme files so would probably recommend anyone non-technical to do get a developer or WordPress expert to help.
We then set up the product attributes to be those that are helpful for prospective adopters, such as location, age, and whether or not they need outside space.
A new suite of forms
As we’d turned off the WooCommerce check out, we needed to manually add back in a call to action to each cat’s profile to make sure there was always a way to progress an adoption. We did this by creating a simple button linked to a new adoption application form.
The theme Atelier comes with Contact Form 7 built in. This WordPress plugin allows you to create an manage forms that match the style of your website. They do require a working knowledge of HTML and sometimes CSS to style perfectly, but most people can manage the basics without this.
We combined Contact Form 7 with another plugin called Contact Form 7 MailChimp Extension (a very catchy name) that let us add a data capture point to each email linked directly to the charities MailChimp list. If you’re using this in the UK, make sure you add a statement with a checkbox (unchecked as default) to get people to opt it as this is a legal requirement.
I also added the plugins Flamingo which keeps a copy of all contact forms on your site, and SendGrid, which allows you to send all website emails through a dedicated email service, drastically reducing the chance of an email not reaching the user.
Choosing a donations plugin
We needed a donations plug in that worked in GBP, included a Gift Aid declaration and could manage recurring donations. After much searching we could only find one solution that met our criteria and was within budget. We chose Seamless Donations by David Gewirtz and so far it is working out perfectly well.
We haven’t yet worked out how to record donation values in Google Analytics, but if we do will we add this to a future blog post.
The blog, Happy Tails and vet finder
The remainder of the site used very straightforward features of the theme. We used the blog functionality to power both the Advice & Care and Happy Tails – by filtering the information and using different preview elements on different pages we are able to keep these two page types distinct.
Atelier has a very handy directory function built in. We used this to create a simple map of all the BWCR vets that not only provide the charity with treatment and medicine for their foster felines, but offer discounts to adopters too.
Conclusion
As of writing, the new Bristol & Wales Cat Rescue website has been live for a little under 4 days. We’re still yet to promote the website as we wanted to make sure everything was working as best as possible.
However, in the short time the site has been live, the charity has received over 15 adoption applications and a large donation from an anonymous supporter. This is much better than the average week for the charity, and so we’re all very hopeful for the future.
If you have any questions about this website or would like to know more, let us know in the comments below or you can email Aime directly using [email protected].
