Create a mobile-first user flow for a responsive animal shelter website

Client

Utah Animal Shelter (Conceptual)

Role

UX Designer

Timeline

2 Weeks

Tools USed

Adobe XD

The Challenge

2020 saw a spike in pet adoptions. As more people worked from home, many of them sought companionship from animals. I’ve designed a web flow for users to meet and adopt a pet from an animal shelter. Users set up their profile and background information ahead of time for the shelter to approve. Users are able to view extensive information about the dog or cat’s behavior, personality, and health and are even shown a video prior to scheduling a visit. The goal is to match humans to their new best friends.

Project Goals

  • Design a fully responsive website for an animal shelter
  • Design the user flow for a user to meet an animal
  • Figure out what design decisions lead to success in adopting an animal

My Approach

  • Survey people who have adopted in the past to learn what their experience was like.
  • Research and compare current pet adoption websites available.
  • Learn what features and characteristics would compel someone to choose a specific pet and highlight information to make that possible.

01 Research

Ordering app monopolies

Many ordering apps take a commision fee of 20-30% and is not sustainable (source, source). In this day and age of quick and easy ordering and the desire to perform tasks as efficiently as possible, small businesses need a way to compete. I wanted to design an attractive and easy-to-use app that appeals to the typical customer and rewards their loyalty.

Different approaches for reaching customers

I did a competitive analysis with bakeries local to my area. I went to these bakeries in person and quickly observed clientele researched their approach to online ordering and reaching their customer base.

The research

I conducted user research through a small sample survey to discover demographics of pet adopters and their experience in adopting an animal.

  • When asked “What did you like or dislike about the adoption experience?” some respondents mentioned that they enjoyed meeting the animals first and appreciated that animals were vaccinated and spayed/neutered, however the website advertised more animals than were actually available to adopt, the application process took longer than expected, and vague adoption profiles often left out key information about an animal of interest.
  • When asked “What factors helped you decide on which animal to adopt”, several respondents mentioned meeting the animal and seeing their compatibility, a detailed profile on the animal that helped match them, and recommendations from the shelter.
  • When asked “If you were to begin the adoption process on a website first, what features would help the process?”, several respondents mentioned pictures of the animals, descriptions of their age, known history, and whatever is known of their personalities would be helpful, as well as information about the shelter and adoption fees.
“We were able to go into the kitten room and play with the kittens before picking one. However, they didn’t have quite as many kittens as expected. There were lots more advertised on their website that had been already adopted by the time we visited.”

02 Define

Who is using this website?

I created a user persona based on the findings above, encompassing the demographics, frustrations, and goals of the survey respondents I believe this persona could help me focus on who to design for. Having a persona is useful to tie decisions on a real person one can empathize with instead of just creating a website.

03 Ideate

The Site Map

I created a sitemap to create a full overview of usability. It helped to brainstorm which pages led to which, and how these pages would connect to complete the user goal: to adopt an animal they will love.

Paper and digital wireframing

Through user research, creating a persona, and creating a site map, I conducted a 15 minute sketching session to quickly produce design ideas which I then translated to Adobe XD as a digital wireframe.

  • The home page has a hero image of a shelter pet to quickly grab the user’s attention.
  • On the hero image is a headline and two buttons, one to adopt and another to donate, with the assumption that visitors to the website will likely have one of these tasks in mind. Below the hero image is a story of a successful adoption, again to capture the user’s attention and portray hope in the adoption process with an example of a great outcome. Below this will be some featured articles on pet care, and adoption advice.
  • On the adoption page is a filter to choose the type of pet and the criteria the user wants to select. Each pet has a heart button so users can browse and go back to the list at a later time to select the animal they would like to adopt. Each animal has their name, gender, age and some top traits users may find important to them, such as special needs or activity level.
  • Each pet listing opens up to the pet’s profile, here is where users can see a more detailed description of the pet, including background, personality and additional photos/video. The side bar has pet listings with similar criteria.
  • When a user chooses to meet the animal, a pop up appears allowing them to schedule a visit. The headline reminds them to complete their profile and background information and includes a link to their profile. When the user confirms all information, they click confirm, they will then receive an email confirmation that they will need to show during the appointment.

04 Prototype

Refining the design

I added a hero image that would capture the user’s attention and emotion. The adopt and donate buttons are front and center but are also located on the menu. The home page includes a featured success story, articles with tips, and a footer with contact information, their address and hours, a newsletter signup, and social links.

The high fidelity prototype includes a search filter, favorite button. and leads the user through the process of scheduling a meet with the pet. The hope is that the user would have a profile prefilled and approved by the shelter so when a user sees an animal available on the website and schedules to meet with them, application delays would not be the cause the animal to be adopted by another family, which was a common frustration during user research.

Sticker Sheet

I also created a sticker sheet to easily reference my design choices and themes all in one organized space.

05 Testing

Findings

I conducted unmoderated usability studies with five participants. Two men and three women between the ages of 26-40. I gave them several tasks to complete and vocalize any thoughts and frustrations they may have.

Follow-up questions

  • Is there any place where users are getting stuck?
  • Does the user feel motivated to adopt an animal through this website?
  • Is there a feature users would desire to make the experience better for them?
  • How quickly can users get through the tasks?
  • Is the website accessible?

The tasks

  • Prompt 1: View listings of animals and filter to only see cats.
  • Prompt 2: Favorite a cat’s profile.
  • Prompt 3: View a cat’s profile
  • Prompt 4: How would you set up a meeting to meet a cat?
  • Prompt 5: How did you feel about this adoption website overall? What did you like and dislike about it?

[Changes]

Next Steps
& Lessons Learned

Takeaways

Creating a survey on animal adoption opinions and demographics was useful to know problems I would not have thought of on my own. As for the website itself, I have three adopted animals and animal shelters are quite amazing, it’s a place for people to find a new member of their family, and a place for animals to get a second chance at a happy and healthy home life. Were I to continue to work on this case study I would conduct more rigorous user testing and develop the user flow with more detail, including filtering animals by more specific parameters, seeing if users get stuck, and possibly create a user flow of what happens when a user has met the animal and wants to continue with the adoption.

Previous

Next