This particular project was more than just about learning and showcasing my design skills. I was inspired to create an animal shelter website because I was experiencing a personal journey of searching for my missing cat Oddy who had slipped out the front door on the evening of June 6th while I was distracted.
Found
I finally found her a month later on July 9th after searching every day and looking through images of cats that were at local shelters. I have learned that many people in the community love animals and are willing to help.
Challenge: Animal shelters are community resources that provide care, resources, and also as a place where distressed pet owners can search for their missing pets.
Solution: This animal shelter website was designed to help people easily navigate to the services they need. Missing a pet is a very distressing situation for many people and if they can have a positive experience with an animal shelter website, it is a good step forward in their search.
Research
I conducted interviews with pet owners who would likely go to an animal shelter or would use an animal shelter’s website if their pets were missing. I got some valuable information from these interviews which I then used to create personas. I was thinking about what I can make that could offer them additional help during this stressful time and created a user journey map to think about how they would interact with an animal shelter website. I also created a competitive audit to have an understanding of what other animal shelter websites are doing and what opportunities exist to create something new.
Site Map
I created a site map to plan out the animal shelter website’s information hierarchy.
Paper Wireframes
I started sketching paper wireframes of how the important elements of the animal shelter website would fit on different devices.
Wireframes (Early concepts)
After my paper wireframes helped me conceptualize the home page, I started making digital wireframes in Adobe XD for different screen sizes which would lead to creating a low-fidelity prototype.
Wireframes
Round 1: I created vector illustrations for the pet portraits and started using them in wireframes. In this first round of wireframes I created repeating grids and populated them with the portraits which I linked to profile overlays so when the user clicked on a portrait they could see the animal’s profile. There are 3 search categories: cat, dog, and other but I had not gotten around to creating the portraits for the “other” category yet which encompasses any animal that is not a cat or a dog. I also designed a feature to create a missing pet report and have highlighted indicators to guide a user to upload a photo, add information, and submit.
Usability Study
I conducted a usability study to gain insights from how users interact with the low fidelity prototype. The first thing I noticed were that some users still expect to use a scroll bar to scroll up and down on a page. Due to Adobe’s decision not to include functioning scroll bars in Adobe XD, I tried a workaround by creating my own scroll bar following tutorial videos. Another issue I ran into is that when I included these custom made scroll bars, the functionality of the middle mouse button is lost so ultimately I made the decision to just tell users who are testing the prototype to use the middle mouse button to scroll. This is a concern I have for accessibility and I know Adobe is aware of this because it was mentioned in forums and there are signed petitions to get Adobe to bring scroll bars back to Adobe XD.
I got feedback from a user that suggested I add male and female to the form in the missing pet report which I added soon after.
I also got a suggestion from a user to have separate areas of the website for animals in the shelter that are up for adoption and pets reported missing. So I went to work in Round 2 to create a section dedicated to missing pet reports.
Round 2: Users felt the need to know the difference between looking at animals that are in the shelter that can also be potentially adopted, and also animals that were reported missing in a missing pet report. So I expanded the wireframes to include a section dedicated to pets reported missing. In their profiles I include a clickable address that brings up a map to show the user where the missing pet was last seen.
Icons
For early testing I had created the icon of the cat silhouette with the question mark on it to symbolize missing. At this design stage, I created the other icons that link to important areas of the website. I also included these areas in a hamburger menu so that users have more than one way to navigate the website from any page.
After I created the icon for Adopt, I expanded the website by creating another section titled “Adoption” to give users a specific place they can view profiles of animals in the shelter that are available for adoption.
From left to right: Donate, Missing Pets, Adoption, and Veterinarian
Home Page Mockup
I created a mockup of the home page with an example for web and mobile formats. The black cat is a vector illustration I created to honor my cat Oddy.
Portraits
I made two sets of 12 portraits for cats, dogs, and other animals. I created the portraits in Adobe Illustrator and made several variations of the same animal by changing the color variations. A technique similar to what is used in video games. I also gave them fun names. The repeatable grid feature in Adobe XD makes populating a page with many portraits and names a smooth process.
Donation
I included different methods of donating including the use of cryptocurrencies. I used the Basic Attention Token as an example. You can earn BAT by using a web browser called Brave. I find it is important to keep up with the latest technology and the future of currency transactions.
High Fidelity Prototype created with Adobe XD
You can hover your mouse over the prototype and scroll through the project while interacting with the buttons. The interactive prototype is designed to work on computers and tablets.