top of page

Code Animal Shelter

A fictional case study, where I was the lead UI/UX Designer and Researcher. In this case study I designed at adoption flow for an animal shelter. 

Image by Karsten Winegeart

About the Business

Code Animal shelter is a non-profit, non-kill, animal shelter that mission is to give every animal a forever home. This animal shelter handle cats, dogs, and many more. If the animal can’t not find a home due to aggressive behavior or is a large exotic animal (i.e a dragon), then our mission is to find a sanctuary for them to live the rest of their lives.

UnderStanding the Users

To begin I started with researching people who would use an animal shelter for adopting animal. Then compare the different animal shelter website, which I found the user flow very from site to site. Based on the research their was four pain points. The frist one was time as it took time to navigate the website, then the second one was user's flow was not simple and a user can get lost in. Thirdly was finding the infomation, their was either a lot, or hard to find. Then lastly it was having a choice to book an appointment with a particular pet. Base on that research I created a persona, that highlight the users needs.

Screen Shot 2021-12-25 at 2.27.37 PM.png

For this case study I made a persona name "Tom Hamm". He is a busy professional, who wants to view which animals are available to adopt, because he went find to new best friend forever, BFF, or pet.

With in mind I created a journey map with the goal is to adopt an animal, or a least make an appointment to meet with animal. As the organization wanted to make sure any new pet owners is prepare and get long with their possible new BFF. Along the way noted what the user has to do, what they would be feeling, and then areas for improvements and to making sure the app is accessible for as many people as possible.

Screen Shot 2022-01-19 at 9.20.00 PM.png

Desktop version

Screen Shot 2022-01-19 at 9.21.29 PM.png

Moblie version

Starting the Design

I started out coming up with many ideas on paper and based on the ones I like I created a design digital one, along with a wireframe. The design is responsive, as it look the same small and big(phone or desktop).


The home page design is similar to a lot of pet adoption site but that prove to be an issues during the usability study, as users didn't know how to start the flow. Once the users clicked the 'Adopt' button in the low-fidelity  on the home page the users were able to navigate to view the animals that are available to be adopted. Then the user can click for more details about the animals. If they want they can set an appointment to meet the animals. Once users confirmed it goes to a confirmation page the name of the animal, data and time.

Refining the Design

With the results of the usability study I moved on to create a mock up. In which I changed the lay out of the home page, because users had a hard time knowing where to start. So I changed it to just the logo and a drop down options to view which animals they wanted to see. I also add a drop-down menu  on the page to view different animals.

Next Steps...

The impact of this app is that it address a lot of the users pain point, be keeping it simply, and easy to use. Along with saving time for busy people. The next step would be building out the other pathways users can take will using this website for an example resources for new pet owns. Then conducting more user research, like interviews or surveys, to determine if any areas need improvement. While designing this app I learned how to build on an idea to make it look great. I also learn how to build a better connection for users using empathy, which lead to a better app. 

If you made it this far congrats your at the end! Thank you for time and reviewing my work on the Code Animal Shelter app. If you like get in touch through the link at the footer, or go here and fill out a contact form!

bottom of page