Happy Paws Animal Shelter

Phone | Desktop | Website | Design

This project was inspired by a local rescue shelter, which has an outdated website. The shelter’s updates are posted on their Facebook page, but not everyone has access to that. The project was created in order to provide more comprehensive information and presentation of the animals available for adoption and includes a registration form to help find suitable new owners.

Project goals

  • Create a prospective owner-oriented, easy-to-understand responsive website that will provide a good user experience

Duration

  • Start in March 2022
  • End in April 2022

Responsibilities

  • Research and usability studies
  • Wireframes and prototypes
  • Mockups

Deliverables

  • Website design
  • Created in Adobe XD

Challenges & Solutions

The shelter’s existing website has very little traffic and zero conversions, mainly because it is not being updated and looks outdated. Shelter owners are focused on placing animals, but they also have to deal with the administrative burden of phone calls and emails with questions about animals and adoption. Most of the information requested could easily be answered on the website.

The goal of the new solution is to create a prospective owner-oriented, easy-to-understand responsive website that will provide a good user experience. A solution that differs from other similar websites, helps the owners optimize their time and make the adoption process easy and transparent.

Understanding the user

For this project, interviews and empathy maps were created to understand the user that the product was being designed for and their needs. Through research, a primary group identified was middle-aged people who intend to adopt a pet from an animal shelter, rather than getting a puppy or kitten. The users want a place to check the availability of animals and learn more about each of them to see if the pet is suitable for them and their families.

This group confirmed initial assumptions about Happy Paws, which is  difficult to use and lacks information. Research also revealed that the group would welcome a more comprehensive website with relevant information and a quicker adoption application process. Other issues reported by users included rather unfriendly and unwelcoming communication by animal shelters when looking to adopt a new pet.

Persona Thomas

User journey Thomas

Sitemap for the website

Before I started working on wireframes, I created a sitemap so I could visualize the distribute of information on the site.

Visual style

I chose font faces and colors in accordance with accessibility standards. Before deciding on a color scheme, I checked each color for contrast ratio to make sure the combination will work across devices a and for all users.

Georgia for headings

Segoe UI for texts

Starting the design

Digital wireframes were created for this project to ensure that the website has the required functionalities:

  • a list of available animals, including pictures and details,
  • registration form with additional information about the process,
  • all in responsive mobile view

Using drafted digital screens, a low-fidelity prototype was created. The primary user flow was connected in order to be tested in a usability study.

Usability study findings

1. When displaying the animals, some users prefer 3 column grid instead of 4 column grid, so they see the pictures better.

2. Users want to know specific information about the pets.

3. Users want to know how the adoption process continues after they have filled out the registration form.

Mockups

Before I started to work on hi-fi mockups, I changed the design according to the users‘ feedback. I added the page that appears after submitting the registration form in order to provide further details about the adoption process. In the individual pet page I added a part for more specific information. After I finished making changes I created mockups. 

High-fidelity prototype

A final high-fidelity prototype reflected insights from the usability study (fewer animals in a row, more information on the pet page, added page about next steps in the adoption process and added information for direct contact). Hi-fi prototype also met user needs for an easy-to-use flow, updated information, and friendly, welcoming communication.

Accessibility considerations

For me personally, it is very important to adhere to accessibility standards, which I think is a fairly neglected area. Not only for users with disabilities but to improve the user experience of all users. It was also very relevant for this project due to the primary user group identified.

Contrast

Colors were chosen in accordance with contrast ratio standards.

Font faces and size

Fonts Georgia and Segoe UI are easy to read, and their sizes are big enough to be comfortable to read for most users.

Icons and imagery

The prototype includes icons and pictures to help make navigation easier.

Logical structure

The prototype provides good technical background for screen readers.

Responsive views

I optimized the responsive designs to fit on desktops and mobile phones.

Going forward

Takeaways

Impact

The website lets user view the animals available for adoption and learn more about them, including details like friendliness to kids, gender and age. Perspective owners can register for adoption online which makes the process faster.

What I learned

While designing Animal Shelter Happy Paws responsive website, I learned how to effectively transfer information in a way that is comfortable for users. I had to make a few changes in order to make the flow and especially the registration process accessible and possibly easier to use for people with disabilities.

Next steps

Usability study

Conduct another usability study in a few months time to validate whether the pain points users experienced have been effectively addressed.

Keep the website up to date

Keep the website updated, especially the animals available for adoption.

Thanks for Reading!

Did you like this case study and are you interested in cooperation? Let me know and we can discuss how I can help you.