Responsive design for Furmates

Furmates is an association of cat shelters. They partner with shelters all over the UK to raise awareness and foster the discoverability of cats waiting for a home. They needed a platform to connect people with cats in any shelter close — or not — to them. Awareness and discoverability are the primary things Furmates wanted to address. A responsive website design was created covering this purpose, allowing people to discover animals and learn more about the charities' work.

The research goal was to understand the stigma around cat adoption, the steps taken by cat-adopters and the current situation of cat shelter websites to uncover discoverability problems. For this study, the following methods were used:

To put the cat overpopulation problem into perspective, I investigated existing problems in the competitors websites and cats for sale websites.

I asked people questions about the challenges they face when searching for a cat online, uncovering their concerns about either adopting and buying a cat.

By letting users go through the prototype, this was useful to validate the solution created, identifying obstacles and navigation problems.

The UK is facing a cat overpopulation crisis as there are simply not enough homes for the large number of cats the charities see. In 2018, officers in the RSPCA (Royal Society for the Prevention of Cruelty to Animals) rescued over 22,000 cats and received over 150,000 calls about cats to its national control centre - that's the equivalent of 18 calls about cats every hour*.

Adopters benefit from having a pet that comes neutered, vaccinated and microchipped, which normally costs plus £250 during their initial months of life. Luckily rescue cats don't incur costs apart from small rehoming fees and they also get the chance to support vulnerable animals.

Adopters may need to be a bit more patient when re-homing older and vulnerable cats. Arrangements need to be made for these cats to settle in naturally. During this time, adopters must know what to expect. Common requests from shelters can often be related to their social environments — such as living without children or other cats — or dependent on the existing facilities, like having a cat-flap with outdoor access or living away from bus routes. Shelters need this information beforehand so they can find the best home for these cats to settle in.

I analysed the biggest shelters in the UK, which are the direct competitors. I also analysed a couple of cats for sale websites. It was interesting to see that most websites provide a short story about the pet written in 1st person, making the cat background seem very intimate. This can help to grow empathy in the users.

The Cats Protection website provides a good searching feature for users and the capability of enquiring about pets using an online form. The downside of this website is that details about adopting are presented on many pages, making it hard for users to understand exactly what to expect.

RSPCA, the biggest shelter in the UK, displays cat personality traits intuitively, letting users aware beforehand whether a cat can be shy, live around kids, or if they require outdoor access. However, by having a manual application process, users might steer away from this option because printing, scanning and sending a form email takes considerable time.

The Scottish SPCA Rescue, provides an easy and intuitive search with loads of filtering options, bright images and an online enquiry application, but lacks a more user-friendly mobile version to cover this purpose.

When analysing the indirect competitors, I noticed that Pets 4 Home also lists the breed info so users know what to expect from the cat’s behaviour. Same as Gumtree, they also have a direct message box feature to connect users easily with breeders about questions they might have.

This method was useful to understand some conventions used on pet purchase and adoption websites. Doing the entire adoption process online can make this experience seem more seamless to users. Also, centralising all important info on one page instead of scattering information across different pages, and allowing as many filtering options as possible, can make this experience more positive.

The user interview results were compiled on a whiteboard, then added to an Empathy Map, allowing for the highlights of the interview to be prioritised by recurrence, and serving as a tool to understand their goals and pain points quickly.

Four personas were defined for this project, mapping users backgrounds, habits, tools, traits, ambitions and frustrations. The use of personas helped to communicate the research results into a fictional person with real goals and needs.

The following statements summarise the users’ pain points when adopting, purchasing or deciding between either options. This was helpful to identify opportunities for improvement in the current solution. The sitemap and user flows mapped out interactions within the website and when each content might be accessed, again depending on each of the persona goals. You can view the user flows here.

The proposed solution needed to ease the adopters’ problem of finding a cat that clearly listed the availability and eligibility criteria, but also offers a good search system so they can find the best match. Before making the application, the user can see the cats personality traits and any requirements to make the process of re-homing as smooth as possible. Cat shelters can also benefit from this by having enough information to pair the best matches between prospect adopters and cats.

The brand identity created for this project makes use of warm tones and bold typography to communicate a cheerful look and feel to the website, and also providing good contrast and accessibility for a variety of users. I set the logo in a variable font, allowing the type characters to have different widths and shapes, reinforcing this idea of the diversity of cats.

This project was designed for desktop, tablet and mobile breakpoints, ensuring the content is displayed in their best light and consistently across different devices. The main flow consists of the homepage, search, details, and a 5-step application process.

The homepage was also a platform to showcase the partners and an appeal for donations. The interactive map was a useful addition to convince others about the reliability of Furmates. It comprises banners being displayed highlighting previous cats being paired with owners.

The search page sets the stage for the main website functionality, allowing users to search by location and filtering results as needed, such as gender, breed, shelter and other requirements. Users can also favourite cats in a list for later. In the tablet and mobile versions, the filters are displayed in form of modals, regarding the smaller screen real estate that mobile devices have.

The pet details page lists details about pets using emojis and addresses questions prospective adopters might have about the process of adoption. When applying to adopt a cat, the user then goes through a 4-step process, validating some requirements that come from the different partnered shelters, and gathers additional info that could be useful for shelters to decide on the best match.

The number of components and variations across different screen sizes is huge, so it was useful to have a UI kit as a reference document for developers. It maps button states, input fields, checkboxes in different states such as normal, hover and disabled states. The typography is also set considering the heading hierarchy and device size.

The usability testing was a useful tool to identify problems that could hold users against completing the tasks. Considering the time allotted for this project, I decided to conduct unmoderated usability testing using Maze. Users went through the tasks of browsing and finding a cat, reading more details and making an application. Users also got to share details about their impressions of the overall look and feel.

Applying for a cat is pretty straightforward, so most users could complete the tasks promptly. However, some users struggled with the way the information was presented. I made some fixes especially with the contrast and accessibility, some colours were toned down and white space was increased.

I’ve assumed that users wouldn’t be so interested in knowing the cat’s name when on the search page, but actually this might increase users’ empathy towards these cats. This was fixed in the most recent version, also improving the white space around cards.

This project was a nice challenge for me to explore different creative solutions for the problem of cat overpopulation. It was great being able to gather others input in critiques and usability testings, especially in regards to the look and feel of the website. The biggest takeaway from this was the task of finding the balance between visual styling elements and accessibility is essential. Documenting the visual components choices and reducing the number of variations - depending on the situation - has helped me create a more visually coherent solution.

I'd be excited to continue working on this project by developing the cat shelter's dashboard area. This area was not part of the main flow but would be a nice challenge to have the website set up from end to end. It would be necessary to speak directly with some shelters to get an understanding of their current flow and which sorts of information would be required to be shown on the website.

Also, without asking the shelters to register the pets directly onto the website, Furmates could also add functionality to automatically index content coming from other shelters, keeping the promise to list pets coming from a lot of different cities and shelter sizes, and helping rehoming these cats in need of a new home.