Pet Adoption Flow for an Animal Shelter

, , ,


UX Designer:  Jared S.


Project Overview

Responsibilities:

Researching the needs of the animal shelter, and the users of the website.

Create wireframes, mockups, and prototypes. And conduct user testing.


The product: 

This is a website that the Animal Shelter will use to streamline the adoption process for their pets.


Project duration:

This project duration is from Oct. 3rd to Oct 21st


The problem: 

The animal shelter is too busy and short staffed to meet the walk-in needs of an adoption services.


The goal: 

We are designing a way for folks to adopt animals without bogging down the day to day activities

of the animal shelter.


Understanding the User

My empathy maps helped to clarify the fact that users need a simplified,

step by step process online to flow through the adoption process.

Previously, interactions with the animal shelter could take weeks sometimes through no fault

of their own.

There was a great need for providing information, and guidelines to those willing to adopt.

And the shelter needed a way to also verify if an adoption was a good fit for the pet.


Pain Points:

  1. Animal shelter is short staffed, cannot spend the time needed to educate and walk through adoption process with people.
  2. There was no clear step by step order to the adoption flow.
  3. Previous adoption methods were on paper only.

User Journey Map:

      


    Working with the user journey "Betty" is on, the process for adopting a pet through traditional means is difficult to schedule time for information, and visitation with the pets to be adopted. As well, as gathering pertinent information from one place.



    Sitemap:
    This flow is intentionally simple. Developing a natural and easy flow to adopt with few steps, and distractions.





    Starting the design


    Paper wireframes:
    Here the idea was simple. Keep it simple. Create clear call to action, provide navigational insights for users

    The extra information that is seen on the webpage was not required on the smaller screen. So, I was able to include them in the footer on the android wireframe.
    The extra information that is seen on the webpage was not required on the smaller screen. So, I was able to include them in the footer on the android wireframe.



    Digital wireframes:
    Having border definitions clearly defined is an extra consideration for less tech savvy users.  Also, breaking the page in to section simplifies reading comprehension. Users suggest detailed, and easy to consider information, as it is most important to consider pet adoption from all angels.






    Screen Size Variations:
    With so few steps to complete this adoption flow, it was necessary to exclude some menu information at the top, that is NOT pertinent to adoption flow ( to be included in the hamburger menu)





    Low-fidelity Prototype:
    Here is the link for the Lo-Fi prototype.  The start of the user flow begins when the user chooses ADOPT, either by clicking the top link or the button on the adoption first landing page. Then proceeding step by step to completion of the pet adoption application.




    Usability study: Parameters

    • Study type:

      Unmoderated usability study

    • Location:

      United States, remote

    • Participants:

      5 participants

    • Length:

      20-30 minutes





    Usability study: findings
    1. Two users discovered that there was no way to move backward in the flow, but couldn't access other pages in the flow process
    2. One user mentioned having need of larger images.
    3. Three users shed light on the idea that a ‘meet and greet’ could not be arranged.

    Refining the design


    Mockups:

    The goal here is to keep the color scheme contrasting, and simple. Using color to create a call to action. After the usability study I found that there was an enhanced user experience when Designing pet photos into the banner.



    High Fidelity Prototype:

    Webflow:

    https://www.figma.com/proto/nBs4U4ZwuKzEF4WV8eQf3M/Animal-Adoption-Flow-prototype?node-id=0%3A1&scaling=scale-down&starting-point-node-id=7%3A164&show-proto-sidebar=1


    Appflow: 

    https://www.figma.com/proto/nBs4U4ZwuKzEF4WV8eQf3M/Animal-Adoption-Flow-prototype?node-id=0%3A1&scaling=scale-down&starting-point-node-id=7%3A224&show-proto-sidebar=1






    Accessibility considerations:
    1. There was a user who was tested that had color accessibility requirements. They were able to complete adoption process.
    2. We were able to bring together the animal shelter and the local animal trainer for special need canines unit. Ultimately requiring an inclusion to the website (which was requested in the past.)
    3. Included in the developer notes is an additional software add for screen reader technology.

    Going forward


    Impact:
    Insert one to two sentences summarizing
    the impact of your designs. In the real world, you’d include data like number of downloads or sign ups, but since this is a course project, you can include a positive quote from a peer
    or study participant.


    What I learned:

    On this project, dealing with the responsive web design, it was apparent early on, that the way the animals, and information were displayed had to be more adjustable, and the banner, and call to action. So, I made sure to modify the look and feel of the flow based on the idea that we wanted to keep a strong call to action.

    Next steps:

    1. This was a fictional project, that I will present to our local animal shelter.
    2. Lastly this application would be ready for front end development.
    3. I will test this iteration of the Hi-Fi prototype with users for deeper input.

    Let’s connect!
    Email: jpsonger2@gmail.com
    Phone: 1-618-612-3337
    LinkedIn: https://www.linkedin.com/in/jared-s-b0527b244/

    at
    Labels: , , ,