This project was created as part of the Google UX design bootcamp.

Timeline

May - June 2022

Role

Solo UI/UX Designer & UX Researcher

Responsibilities

  • Survey

  • Wireframes

  • Prototype

  • Usability Study

Tools

Goal

The goal was to design a responsive pet adoption website like PAW ("Pet Adoption Website") to support animal shelters in making the pet adoption flow intuitive and easy, so that people tend to adopt more shelter animals in the future.

Why?

With roughly 6.5 million animals entering animal shelters in the US each year (source), animal shelters need help and support to manage the therefore increasing pet adoption processes.

The Problem

People are confused with the process of adopting a shelter animal and are overwhelmed with the complex adoption application paperwork.

When people want to adopt a pet from the animal shelter, they must complete the adoption process and paperwork to take their new animal home.

The Solution

A responsive website that supports people with a search tool to find available pets for adoption easily and intuitively, supports them in showing the exact steps of the adoption process and providing a clear adoption application form to fill out beforehand to make adopting a pet from an animal shelter less complicated.

Design Thinking Process

For this project, I utilized the following design thinking process steps to take my website from idea to reality:

1) Empathize

Understanding the user

2) Define

Figuring out the problem

3) Ideate

Brainstorm solutions

4) Prototype

Creation and experimentation

5) Test

Refining the product

Survey



To start this project, I conducted a survey via GoogleForms with 8 potential users (ages: 23 - 38 years old) who have adopted a pet before or want to adopt a pet in the future.

My main goal here was to gain insight into how users would react with my product and what features they would expect my product should have.

Insights




With the survey results, I found 3 main user pain points that I definitely wanted to address with my website:

Quotes

"I think professional pictures help them get adopted with their story."

"Can I just come and adopt the animal? Or do I need to undergo a specific check up first?"

Personas




To think from a user perspective and understand user behavior as well as user needs, I created two personas. With these two specific personas in mind, I better understood how my user would potentially interact with a pet adoption interface and what pain points I need to have in mind to have my website address these and make it fully usable.

User Flow




Next, I drew the main user flow for my website involving the user task "Finding and applying to adopt a shelter animal (e.g., dog)".
This was to understand how a potential user will go through my website and how the user would interact.

Sitemap




This created sitemap helped me figure out how many screens I would need to design in order to have a fully functional main user flow of my website. It also helped me improve the overall website navigation.

Paper Wireframes




Then, I sketched out paper wireframes for each screen for my website.

The following shows my iteration of the home screen.
My focus was on implementing the search tool to find available shelter animals for adoption, as well as navigation bars and an overview of the adoption steps.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Screen Size Variation




At this point I did a quick research and it turned out that Gen Zers and millennials are more likely to adopt pets (source). Since Gen Zers and millennials primarily use and rely on their mobile phones (source), it was critical for me that I make my website responsive and I started to work on designs for the additional mobile screen size.

Digital Wireframes




Moving from paper to digital wireframes in Adobe XD made it easy to understand how the redesign could help address user pain points and improve the user experience.

Lo-Fi Prototype




Furthermore, I connected all of the screens involved in the primary user flow to create a low-fidelity prototype. The main user flow involved the screens of searching for available shelter animals and filling out the pet adoption application form.

You can also view the PAW low-fidelity prototype here.

PAW Lo-Fi Prototype.mov

Usability Testing




I conducted 2 rounds of usability studies with potential users and tested the lo-fi prototype first and then the hi-fi prototype in the second study.


For each usability study, users were given a scenario and asked to do the following tasks:

  • Find dogs near you to adopt

  • Select a dog profile and add the profile to your favorite pet list

  • Apply to adopt the dog "Kayla" and complete the application process

Findings

1st usability study:

  • Users were distracted by the big navigation bar and want a smaller one.

  • Users were confused that they couldn't adopt more than one animal at a time.

2nd usability study:

  • Users had a difficult time using the search tool because they didn't know how it worked.

  • Users wished for a way to contact the animal shelter.

Design Changes





Based on these insights, I changed to the following things.

1. Made the navigation bar much smaller so users aren't distracted by it anymore.

2. Improved the filter options so that users can adopt more than one animal.

3. Added a contact field on each dog profile to let users get in touch with the animal shelter when they have questions.

4. Created an introduction for the search tool so that users can fully understand how it works.

Visual System





The following visual system I created in Adobe XD allowed me to have a better overview over my components, typography, buttons and illustrations that I included in my website.

Hi-Fi Prototype




My high-fidelity prototype followed the same user flow as the low-fidelity prototype.

You can also view the finished PAW high-fidelity prototype here.

PAW Hi-Fi Prototype.mov

Accessibility Considerations




To make my website besides being responsive also accessible, I used:

  • Headings with different sized text for clear visual hierarchy

  • Landmarks to help users navigate the site, including users who rely on assistive technologies

Values




PAW would be definitely valuable to users and potential businesses by being:

  • a tool to accompany animal shelters in finding shelter animals the best suitable forever home

  • useful in providing necessary adoption steps and an online application form to make the adoption process less complicated for both the animal shelter and the people who want to adopt

  • overall clear, understandable and easy to use which makes this website more accessible to more people and hence, more shelter animals can be adopted

Future Steps

What I learned:

  • I learned how to create fully functional image carousels

  • I created an interactive search tool within a prototype

  • I learned that the feedback from the usability studies are really important and have a huge impact on how to perceive the final product which I found very interesting

What I could have done better:

  • More iterating! I believe that UX is never done and I guess that I could still find more user pain points and make my website even more usable

  • I think that I could have done even more research in the beginning and plan to do more thourough research in the next project

Next Steps:

  • Conduct a follow-up usability testing to validate whether all pain points have been addressed and wheather new ones arise

  • Conduct more user research to determine new user needs

Thank you for reviewing my work
on the PAW website!