Happy Hearts Animal Rescue

About the Project

In 2021, I enrolled in the Google UX Design Certificate program, which walks beginners and advanced designers alike through the process of UX design, all the way from initial user research down to usability tests and hand-off to developers. As part of the coursework, I chose a random website design prompt from Sharpen, which ended up being design a pet adoption flow for an animal shelter. I used to actively volunteer with an animal shelter - taking pictures of animals, adding them to the website, and writing descriptions for each animal - so it seemed like a very good match. With my knowledge about the adoption process, I knew these common shelter occurrences would need to be replicated online somehow:

1. People loved to see the animal happy or curious, but were reluctant to get to know an animal that appears scared
2. Information cards on each cage or kennel usually state how well the animal gets along with other animals and with children
3. Other information such as animal weight, grooming considerations, or pre-existing conditions were kept on file and could be provided upon request
4. People interested in adopting an animal could ask to spend time with them outside their cage, either in a large cage or a separate room, and shelter staff would often have to sign off on a match between person and pet prior to adoption

The prompt I chose concerned me a bit, simply because I know you can't simply adopt a pet online without ever meeting them or seeing them - as far as an established animal shelter or rescue environment goes, that is. But after taking the time to get to know the business, the competitors, and the users, I felt like the goal could be accomplished, with the caveat that the process would be completed in person.

Research

Because of my familiarity with animal shelters and their websites, I was fairly confident about tackling the problem at hand. However, I still wanted to do some research, just to make sure things hadn't changed too much over the years. For this website, I did user research by speaking with people about looking for pets online and what might make them more or less likely to choose an online process over an in-person process, and also looked at several other animal shelter websites to get a baseline about what processes are available.

After speaking with potential users, I discovered that they tended to like to stay local for animal adoption, and so would be used the website of whichever animal shelter was closest to them if they went online. However, many preferred to look in person for a few reasons:

1. It is difficult to get a real feel for the animal's personality online, as most animals are not given a description and only has one picture, taken when they first get there, in which they are often terrified
2. They would strongly prefer to visit with a pet for a while before bringing them into their household, especially if they have other animals or younger children that they need to make sure would all get along

From the considerations above, it's easy to tell that the people who we would want to target with the website; that is, the in-person adopters, were looking for family pets or companions that would be a fit in their household. In comparison, the people who preferred to look online first tended to have a more specific animal in mind, such as looking for a certain breed, or were looking to adopt something more unusual that shelters don't always have. So while being able to see an animal is important to both people, the website really needed to help potential pet parents make decisions based more on personality.

Lauren is a mother of two young children, the older of which has expressed interest in caring for a pet. Lauren grew up with both a cat and a dog, so is not opposed to the idea, but she knows not all animals are suited to handle younger children that are more likely to pull on their tails or dress them up. She is also all too aware of how frightened animals can become in a shelter, and knows that a frightened animal will lash out unexpectedly before an angry animal will. Because of this, she would be willing to look at an animal online before setting up a meeting in person with them.

"As a responsible mother of a 2-year-old and a 7-year-old, I want to see a general description of a pet's personality profile online before meeting them in person so that I know the pet I meet will have a better potential to get along with my children."

From this, we can determine that Lauren would benefit from a website featuring pet profiles with some information about their personality because she wants to make sure the animal would get along with her children before going down in person. One of the design goals is to ensure that if Lauren looks at a pet profile, she will be able to see details about their personality that would tell her if it is safe to bring her children to meet them.

View Lauren's Persona


Though I was already familiar with animal shelters, and also am aware that many shelters prefer to promote their pets either through social media or a third party service such as PetFinder rather than through a website, I still wanted to perform a competitive audit before I got started on the design. I chose the following animal rescue facilities to research:

1. Petfinder, a dedicated animal searching service that most shelters partner with. It is a popular choice for online adopters because Petfinder will show them animals at all shelters in their area, not just one
   
   
2. The Animal Foundation, a large local animal shelter that performs a lot of different services in the community related to pet care, including helping to find lost pets and providing veterinary care and services
   
   
3. Las Vegas Valley Humane Society, a local animal rescue service that does not have a dedicated building and rather relies on a community of foster parents and partnerships with local pet stores to adopt out animals
   
   
4. Mohawk Hudson River Humane Society, the animal shelter I used to volunteer at, which I fully admit I was mainly just curious to look at their website now that I'm no longer the one maintaining it

View Competitive Audit


Overall, my takeaways from the competitive audit were that bright, colorful designs and fun fonts really helped to make the pets seem more friendly and likeable, even in instances where it was difficult to take a photo of the animal. However, because shelters seem so focused on getting volunteers and donations, they leave less dedicated space on their website to showcase their pets, and do not make it easy to an interested person to learn more in any other way than going in person.

Branding

When I think about animal rescue, for some reason the first thing that comes to mind for me is the phrase "pets leave paw prints on our hearts." Anyone who has spent time with the animal rescue community or has a pet of their own is probably familiar with it. To me, it really speaks true, because pets just have a way of becoming special in our lives. So when I was faced with coming up with a fictional animal rescue facility for this project, I knew immediately I wanted to go with the name Happy Hearts.

I love working with colors, and am always thrilled when I can first start putting them into a project. I find them to be very inspiring, and relaxing to work with. This time though, I knew I wanted to break out of my comfort zone and use a color I don't often use: pink. Pink is a color that is associated with love and hearts, which I felt would go very well with the name. I also knew I wanted at least one other color that could be used in conjunction with pink, but that was still a warm color to hopefully evoke feelings of happiness.

In the end, I picked orange as my secondary color. Orange is still a warm color, and could be combined with pink to create a comforting coral tone, but was not as harsh or bright as a red would be. I also wanted to stay away from red because it can be an angry color, and anger doesn't have any place at an animal shelter. In addition to these colors, I also wanted to pick lighter and darker accents for each that could be used in various states.



However, I also wanted to select a set of neutrals that could be used throughout the website. While there can be a danger in picking too many colors, when you're working on softer designs it's important to have a wide variety of neutrals. This way, you can float between readable smaller text in dark colors, but soften the tone when the text is larger so you avoid "yelling" at the user. For these neutrals, I selected the following colors, of which I also adjusted the opacity on as needed:




It might be easy to guess that for the logo, I felt like a paw print in the shape of a heart would be perfect. While I did look around at some images online for inspiration, I finally decided that I wanted to make this one entirely from scratch. After all, a paw print is just a set of shapes, and it would be easier to adjust in the future if it was saved out as a PSD file (I do realize this should be a vector, but Illustrator does not always cooperate with me as far as exact colors).

Using the built-in shapes tool in Photoshop, I created a heart and a set of circles, which I adjusted until they reached roughly the size and shape I was looking for. Then, I applied outlines and the colors from above, to create two different versions of the logo to be used on the website. While I intended the outlined version to be the main logo, I also wanted a filled in version to match any other icons I would be using on the website, as well as to use in the footer. This way, I could use the logo to send a message that when you first arrive, your heart might be empty, but it will be full by the time you look at an animal to bring home with you.

           


I knew that at the very least, I wanted the name Happy Hearts to be in a light, happy style font - preferably a rather bubbly one, so it would match the shape of the logo. I actually ran through several different possibilities, typing with each one and seeing if it would work in headlines as well as part of the logo. While it took me a long time to decide - six different fonts matched the idea I was thinking of - I ended up with Bellota as my final choice.

happy hearts

I love how light the font is, and how it has fairly even kerning. It manages to convey a message and tone, and was perfect when paired with the logo. But while I planned to use the font in a couple other places, I knew it would not work for every headline or every emphasized text area I was planning on the website. I was going to need a main style of font for the body, as well as a secondary headline font. Since I figured it was best to keep these in the same family, after looking at recommended pairings with not only Bellota but the other fonts that had been on my short list, I decided on Roboto as my main font, with any emphasized areas and headlines Bellota would not work in being Roboto Condensed.

Design

I often feel like I can breathe a sigh of relief when I emerge from the other side of research and into the design. I've got all the information I can collect, and nothing else should be standing in my way to start creating beautiful screens. I especially feel this way when I already have a design idea in mind, and in this case, I definitely did.



I took the inspiration for this header from an older version of the World Wildlife Foundation website. The reason I liked it was because it allowed for a full navigation to be displayed while still showing specific calls to action. It also lent itself very nicely to a mobile version, which lets users get to the important stuff without getting bogged down by other links.



Part of making sure the user can get where they need is ensuring the navigation is laid out in such a way that every area of the website can be reached with minimal difficulty. While the navigation contains one-word links, more links are behind a menu that opens on hover for desktop and on click for mobile. Since the main focus was the adoption flow, "Find a Pet" is the only working navigation link.

          

While often a footer is used to store any random links that may be missed by the main navigation, my goal here was to make it as simple as possible, just reiterating the logo and name, as well as giving the user a way to get in touch.



While the same format is mostly kept on mobile, things are a little more condensed, especially social media. Social media brands are thankfully quite strong, and don't need words by them to get the meaning across, though naturally there would still be tags in the code so they could be understood by a screen reader.



Most animal shelter websites flood their homepage with calls to action for donating, volunteering, learning more about adoption, and any charity events they are involved in. But as someone who likes to see the homepage be more of a landing page than a splash page, this is a little overwhelming - and also might distract the user from looking at the animals. So instead, with this homepage, I wanted to focus more on accomplishments.



The stats along the top show how many animals have been rescued and fostered, how many donations have been received, and what events have been held. These reiterate the top navigation links of Adopt, Donate, Volunteer, and About. Between these and the little blurb about the rescue underneath them, this allows users to choose the path they want to take on the website.

While there is an area to sign up for updates underneath this, the main part of the homepage is dedicated to a social media feed. This is intended to be an Instagram feed, where anyone who has adopted a pet from Happy Hearts can post up the picture of their adopted animal in their new home to have it displayed on the homepage. When people see animals that are happy and that they came from that shelter, hopefully they will be more encouraged to adopt an animal themselves.

This is one of the most important screens that can exist on a shelter website, because this will be the main ways users can interact with the animals available and decide which ones they would like to get to know. This particular page would accommodate 12 pets on the desktop page and 6 on the mobile page, with an option to view more. It is also my intention that pets would be listed in chronological order - those who have been there the longest get featured at the top. I am sadly aware most shelters are forced to take steps to control their population, and the animals who have been there the longest are usually the ones selected. This order will hopefully mean more animals get to go home.



The search at the top offers the ability to search by type, gender, and age of animal, as these are often the factors people have already considered when they are looking for a new companion. However, more filters would be available for those who needed them by clicking on the link next to the search button.

As for the animals, grouping each image with a colorful background, their name, and information helps keep everything contained to a single animal. It also allows users to click on the image or the text, whichever speaks to them more. This is the first place I used the Bellota font again, to give more personality to each of the pets. The only other notable part of the design here is what happens when hovering on each animal picture, where inner shadows are used to make the image pop a bit.

           


The pet profile was definitely one of the more challenging screens to work on, because of how much information needed to be presented. Because this page already had a lot of information, and not good pictures can be taken of every animal, I decided to forego the hero on this page, instead carrying over the texture and font from the adoption search to give a little introduction to the animal in this space.

          

With a little introduction (and a place for optional Special Considerations on each pet), most people only need that and the basic information provided on the main search page to decide if a pet might be worth going to meet. The CTAs are provided directly underneath those, which is above the fold depending on how long the description is. However, other stats need to be provided as well.

It's common to note things such as the animal breed, size and weight, and coat length, as these will determine grooming needs and other aspects of animal care. For cats, it's important to say if they have been declawed, and for dogs most people prefer to know they have been house-trained. The arrival date also will tell people how long the animal has been there, and as it is a stat that would already be in the database to determine sort order, there's no reason to not display it.

The real difficult part of this design though was the two profiles for each animal. The personality profile rates each pet on a scale of traits. I chose to promote their sociability, sensitivity, and rationality as these are not only a good start to getting to know a pet, but are easy enough for staff to judge in a shelter environment. Animals who are more of a social butterfly might come closer to the front of the cage, while sensitive animals might continue to be frightened in the shelter setting.

The paws-itivity profile on the other hand measures how well an animal might get along with other people and pets. It was common practice when I volunteered to bring cats and dogs into the respective rooms of each animal to see their reaction, and give them a rating based on that. They would also take notes from whoever dropped them off on if they preferred a certain gender (some animals do!), and if they got along with children. This information could also be obtained through observation, and is something volunteers would help out with.

Now, typically if one would like to adopt an animal, they would go down in person to do so. But with COVID came the closing of doors to the general public, and scheduled appointments with animals or to walk the shelter. Because of this, it became more common practice to fill out applications online to submit interest in pets, though a visit would still need to be scheduled. Contrary to popular opinion, shelters don't adopt to just anyone - and especially for animals with special considerations (health conditions, personality flaws such as extreme shyness or mild aggression, etc) they will often want to interview the potential pet parent to make sure they're a good match. So, I created a form that would help the shelter get some of those questions out of the way.



Under Owner & Household Information, the user is asked for their name, contact info, and address. They are also asked to describe the current state of their household - how many people and animals live there. Under Pet Care Information, users are asked to state if they are looking for a family pet, who will be taking care of the pet, and where they will be kept and treated. Under General Application Information, users are asked what animals they are interested in and to agree to the terms, which basically state that the shelter does not have to adopt to you just because you filled out paperwork. The form is long, but not as bad as it could be, and by having it all on one page it increases the chance of the whole form being filled out. Multiple pages imply multiple steps, and there's really only one here.

Upon successful submission of the form, the user will be presented with a screen stating their success. The rest is up to the shelter to contact the user. While if the user clicked on Schedule a Visit originally they would have been able to schedule their own time slot with an animal, if they just want to fill out the paperwork the shelter will help them get one scheduled and ask them additional questions over the phone if needed. There are also other links for potential pet parents to check out, such as FAQs, adoption success stories, the chance to donate, and a direct link to contact the shelter if they want to follow up on their application.

In Conclusion

From initial user research including personas and user journeys, over to competitive audits, all the way through the process of low-fidelity designs and testing, onto high-fidelity designs and prototypes, the app for Reel Deal Theater has come together into a project that any designer could be proud of.

Reception from usability study participants has been positive in general, with multiple compliments on the UX, UI, copywriting, and prototype wiring functionality. If brought to fruition, the app would be considered useful by most people, and would help with the initial goal which is to increase snack sales at the theater.

While as a school project, there are no next steps that will be taken, from here I would typically begin the process of building on the front end. I am experienced with HTML and CSS, and could build out the look with the proper responsive functionality - or alternatively, if someone else was in charge of that, I could provide some information on expected breakpoints and behaviors, either through an annotated design or via a phone call and walkthrough.

Though I often just break down elements as needed when coding, if someone else was in charge of that it might be helpful to provide a tablet size for these designs, as I think there will be a couple stages between desktop and mobile for this particular one - though, desktop is good for a 1240px or wider screen size, which covers many tablets these days. I also feel like the navigation behavior might need some different prototyping to properly convey to a developer. For some reason, Figma did not want to play nice with the mobile menu. Did I finally find something it can't handle?

Ideally, there would also be a usability study performed for this prototype, though due to the difficulties with the prototype and how complicated forms can be to fix in pure design, I would move to front end development first as long as internal testing went well. Once something in HTML and CSS was available, then I would recommend pulling in the target audience for the usability study.

While designing this website for Happy Hearts, I learned a lot about different types of transitions in Figma. I taught myself how to properly use hover states and press states as opposed to a normal click, and I also learned how differently a mobile prototype can behave when using on desktop vs actually using on mobile. It's definitely something I'll need to keep in mind when prototyping in the future - as in code, mobile websites and mobile devices behave in almost the same manner - and I'm looking forward to learning even more about the differences between them in software!
# # # # # #