Adoptally

A responsive website for a Dog Rescue that matches adopters with their "Canine Counterparts" to ensure that each adoption is successful.
My Role:

UX/UI Designer, UX Researcher, Project Manager

Tools Used:

Adobe XD, Google Suite, Zoom

Scope & Constraints:

Course Assignment to design a Responsive Website. Completed in 1 month.

Users:

Dog Adopters

Overview

"Adoptally" is a project that I began in the Summer of 2022 to develop my skills with responsive web design. While the idea of designing a dog adoption website using UX methodologies might not be entirely ground-breaking, I wanted to approach the task with a fresh take that many adopters likely haven't seen before.

Through my research, I realized that the user experience for pet adoption doesn't necessarily begin when a user first attempts to adopt. Nor does it end when a pet is brought home. An adopter's journey is more wholistic, beginning with stages of exploration & reassurance, and finally concluding when the pet and the owner have fully integrated their lives together.

By building a site design that speaks to all stages of an adopter's journey, while also emphasizing key features that enhance the likelihood of a compatible match, Adoptally is unique in its user experience.

Part 1: Empathize

Responsible Adoption Research

Before I began designing, ideating, or even researching my users, I wanted to ensure that the entire process was rooted in responsible adoption policies. All of Adoptally's design solutions are rooted in the recommendations of the Rescue Group Best Practices Guide published in collaboration with the Humane Society of America and PetSmart Charities.

Competitive Analysis

I chose to conduct a competitive audit to further understand how existing Rescues were utilizing the above techniques from the "Best Practices Guide." I focused on two Rescues in the Pacific Northwest area (where my fictional Rescue is located), as well as a popular adoption aggregator, Petfinder.com.

Competitive Research Notes

User Research

Once I had a grasp on responsible adoption policies, I I identified two groups of users that would be able to provide valuable feedback: those who have recently adopted a dog (having gone through the process from beginning to end), and those who were thinking of adopting a dog (just starting out in the process).

One interesting finding from these interviews is that participants often expressed a desire for more restrictive barriers to adoption, such as lengthy pre-adoption forms or applications. This conveyed to adopters that a Rescue was responsible and took care to find the right home for a pet.​

However, these types of barriers are actually counter to the "Best Practices Guide" mentioned above. Not to mention that restrictive barriers are decidedly not very user friendly.

User Research Interview NotesUser Research Interview Notes

My challenge became to design an experience that conveyed a sense of responsibility and care on the Rescue's part, while removing cumbersome barriers to adoption that served neither pet nor adopter.

Part 2: Define

Problem Statement

With my three Personas in tow, I began crafting problem statements that would summarize the needs of each user.​

These statements address two main problems that I wanted to solve in my designs: 1) Users feeling unprepared or overwhelmed with the adoption process & pet ownership in general, and 2) Users feeling unconfident that a specific pet will meet their household's needs.

Monica

Monica is a mother of two young children who needs to find a dog who's energy will fit within her family dynamic because she doesn't want to disappoint her kids by needing to return the dog.

Avery

Avery is a first time pet adopter who needs to find resources & tips about how to prepare for pet ownership because she feels nervous and unprepared to care for a new pet in the house.

Charles

Charles is a retiree who needs to find the right dog for his family without many barriers from the shelter because he's an experienced pet owner and knows how to handle a new pet.

Part 3: Ideate

Crazy Eights

Now that I had a clear understanding of my users and what their problems are, I wanted to do a quick "Crazy Eights" exercise to see if I could come up with any out of the box ideas. ​The most notable idea to make it into the Adoptally infrastructure is the final one - a quiz to help users determine if they are ready for adoption. This optional quiz could function in place of a lengthy form that would otherwise be a barrier to adoption.

Crazy Eights Exercise

Paper Wireframes

I decided to focus my time and attention on three branches: the Adopter Profile, the dog profiles, and the appointment booking system (for classes or pre-adoption visits).​

Even though pages such as 'Dog Care Tips' & the 'Adoption Quiz' spoke directly to one of my targeted goals (i.e., preparing users for adoption), I determined that the content required for those pages would need to be co-developed with an industry professional. For this reason I left them out of the scope of my initial designs until I could collaborate with someone qualified in the adoption field.

Paper Wireframes

Low Fidelity Prototype

To properly experience the low-fi prototype below, try the following activities:

  1. Create a profile.

  2. Find a dog.

  3. Book a pre-adoption visit with that dog on August 16th at 12pm.

  4. View that booking in your profile.

Part 4: Iterate

Usability Study

My next step was to take my Low-Fi Prototype and test it. Similar to my original research, I contacted both people who had already gone through the dog adoption process, as well as those who do not currently own any pets.​

The video to the right is a screen recording of one such participant moving through the tasks of the study.

Mockups

My Usability Study produced generally positive results among users, however there were a few key things that I determined could be improved upon. The most prevalent was some confusion at the end of the pre-adoption visit booking process, and how to view that information.

However this proved to be a small problem, as only a simple confirmation screen was required to be added. I decided that the best use of my time jump into creating mockups and I could add the additional screen in as part of the mockup process.​Below you'll see mockups of three critical pages: The Homepage, the "Puppy Profile," and the Adopter Profile. You can cycle through the tabs to compare both web and mobile versions of the same page.

Design System

In order to build the above Mockups I also saved my work to a simple design system, including typeface, color patterns, and common components.

​I chose colors that were intended to inspire the user to complete an adoption: Reds and pinks were chosen to evoke compassion for the dogs, and yellow was chosen as a highlight to draw out a perceived happiness with their future pet. However I wanted a more natural color, green, for my Primary to tame those more evocative highlight colors.​

For the typeface I wanted to keep things fun and simple. Arvo's rounded serifs bring a joyful feeling to the user without sacrificing legibility.

Design System

High Fidelity Prototype

Finally, it was time to add the mockups together into a cohesive high-fidelity prototype. Because many of the content-focused pages remained out-of-scope, this prototype follows the same userflow as the Low-Fi prototype:

  1. Create a profile.

  2. Find a dog.

  3. Book a pre-adoption visit with that dog on August 16th at 12pm.

  4. View that booking in your profile.

Accessibility

Finally, I'd like to address the accessibility considerations that I took when designing Adoptally. As should be expected, all color contrasts are rated for WCAG AAA compliance. Additionally, adopter preferences for matching can be set based on if a dog is good with either Physical Disabilities or Cognitive Disabilities.

Reflections on Adoptally

Adoptally was my first foray into Responsive Web Design, and I actually learned a lot while going through the process. First, and perhaps foremost, is that I only learned about the concept of "Mobile-First" design philosophy about halfway through designing my Mockups. Because my web designs were relatively complete at that point, I felt it would be counterproductive to go back and restart. Upon reflection, though, I do see a tremendous value in the mobile-first methodology. ​

That being said, I am quite proud of the work that I've produced with Adoptally. This is neither the first nor last Dog Adoption website that has been designed as a test-case for one reason or another, however I do believe that through my research and designs I have produced something that is largely unique in the field.​

As it sits, the dog adoption user flow is near complete, but there is still lots of room for growth with Adoptally. As mentioned previously, collaboration with an industry professional to advise on the "Adopter Support" content of the site would really help address one of the primary user problems, i.e., not feeling prepared for dog adoption. Additionally, there are a few minor but critical interactions in the adoption flow that need to be finalized (not least of which is the actual "Adopt 'Dog'" action).

​If you're interested in learning more about Adoptally, or potentially converting it into a fully-functioning website, please reach out to me and I'd be happy to discuss my designs further and collaboratively work with you to fully realize this site's potential.