Pet Adoption - Responsive Website

The Overarching Challenge

I wanted to create an inviting digital space for people to form an initial connection with an animal and build trust in an organization.

Understanding the Problem

I conducted both secondary and primary research in order to reach the following goals:

• Learn about the animal shelter non-profit world and comparable non-profits.
• Learn about COVID-19’s impact on pet adoption.  
• Identify Adopt Spot’s potential user demographic.
• Identify pain points and positive experiences users have when adopting pets.
• Learn more about users’ experience living with pets.

Secondary Research

I learned about national and local animal shelters and associations. As non-profits, many are focused on education and collecting donations. In terms of their sites, they all seemed focused on curating a personal connection between the user and the pets.

Challenges and takeaways: Many comparable animal shelter and adoption sites exist. However, I found that UX and UI experiences on many of the sites were confusing and not the most engaging. I had to look to other sites for inspiration in terms of design patterns, which taught me a lot about how patterns can be used across industries.

‍Primary Research

I conducted one-on-one user interviews over Zoom with five participants with the following characteristics: 29-33 years old, female, pet owners. I asked questions based on the process of getting their pets as well as their experiences as owners. I created an empathy map in order to synthesize my findings.

Challenges and takeaways: In terms of primary research, many participants didn’t utilize websites very much during the pet adoption process, so I didn’t get a lot of insight into that particular experience. However, I was able to focus on the emotional experiences that were important to them in order to define the central user experience of my site. I also found that some of my questions were a bit repetitive, so going forward I want to fine turn these to make sure each elicits new information.

Empathy Map

I gained the following insights:

• People want to fulfill the emotional needs of their pets.
• People crave emotional support.
• People love having physical contact with their pets.
• People fear the unknown when it comes to their pets’ wellbeing.
• People want pets with unique, enjoyable personalities.

Defining the Problem

I created a persona and problem statement to begin defining next steps.

Challenges and takeaways: As I mentioned above, I didn't get a lot of info about pet owners interacting with digital products. As a result, my persona is more focused on users' emotional needs. This was an important lesson because it showed me that research won't always yield what I expect, and I have to learn how to adapt and move forward. In future projects, this might be a point at which I decide to conduct more interviews and make sure my interviewees have actually used adoption websites.

Persona

Problem statements

Users need to interact with a site that allows them to make, or begin to make, an emotional connection with their pet.

Users need to interact with a site that generates a sense of trust and long-term support.

‍

Creating Solutions

Site Map and Flows

I created a feature roadmap focused on what I would need for the site. I also created task flows and user flows. The below user flows show the paths of a first time and second time user of the site.

Challenges and takeaways: Prior to this project, I had only created a singular user flow for just one user. It was helpful to think about what would be different with a second time user. I found this exercise very helpful in creating a logic for my site.

Wireframes

I created responsive wireframes for my home page, detail page, and upload page to better visualize my designs.

Challenges and takeaways: I learned a lot about responsiveness during this stage. I thought a lot about breakpoints and what can be sacrificed on smaller devices. This made me think about what information is truly crucial.

Branding

Based on research, I wanted to create a brand that felt personalized, intuitive, trustworthy, and caring. I chose a bold color palette and typefaces that were both warm and professional. When dealing with images, I wanted it to feel as if the pet was reaching past the boundaries of the individual frames as well as the screen to create a very personalized experience.

Challenges and takeaways: My experience with logo design was interesting at this stage. I created multiple  versions, some that were more abstract and others that were more literal. I decided to ultimately go with the logo that is the most easily identifiable as a dog.

Logo Iterations

UI Kit

UI Pages

After solidifying my branding, I moved onto my UI pages. My designs changed from my wireframes, especially when it came to images. My cards became more open, and I altered my photo carousel on the detail page.

Challenges and takeaways: This was my first time using images without backgrounds, and I had to think a lot about how they interact with the page and operate within smaller elements. This process encouraged me to think about the harmony of the page and how images can be manipulated to be as engaging as possible.

Prototype

Test

I conducted usability testing with five users in my key demographic to understand if there was any friction in the process of searching for a pet and getting pre-approved to adopt it.

Results summary

• 5/5 of participants completed both parts of the task.
• 5/5 of participants reported that the task was straightforward.  
• 4/5 participants utilized the search bar on the landing page
• 4/5 participants utilized filters on the search results page.  
• 3/5 participants encountered issues of low severity when utilizing the initial search bar.  
• The time to complete the task ranged from 1:10 to 3 minutes.

Priority Edits: as there were some low-severity issues surrounding the initial search bar, I made the labels clearer.

‍

Final Thoughts

I really enjoyed this project as it allowed me freedom in branding choices. I wanted to maintain a very personalized, intuitive feel while also infusing an edge of professionalism and trustworthiness. This project challenged me from a visual design perspective, and it made me realize how much I love this process.

This was also my first time building a product that was similar to many on the market. In a way, it was helpful to see how other organizations have approached building this sort of site. I was also able to use my UX knowledge to pinpoint some of the ways in which the existing sites didn't always embrace usability principles. This helped solidify my knowledge and challenge me to improve upon existing models.