Pet Adoption Responsive Web Flow

Overview 

Opportunity 

Since the COVID-19 pandemic, pet adoptions have been on the rise. Local shelters see over 4.1 million animals find new homes every year. Statistics show that 1 in every 5 American families have chosen to adopt a new pet, as "adopting over shopping" is continuously gaining popularity. Most local animal shelters have limited resources with a lack of funding and support. Nonetheless, adoption levels have doubled since 2011 according to ASPCA. Local animal shelters need pain free sites to encourage effortless adoptions for both the shelter and patron.

Goal

Conceptualize a responsive web design for users to easily search, browse for and adopt their furever friend

Role

UX Designer and Prototyper 

Personas

Persona Creation

Creating the personas was based off of different common user needs when looking for a new pet: 

• New addition to the family

• Security and emotional support 

• Companionship for owner 

Empathy Maps 

Based off of personas, I created empathy maps for each user to better reflect goals, feelings and concerns a user may have during the process. 

Through the journey maps, I was able to identify pain points the user may encounter during the adoption journey. Solutions for potential pain points were imperative to be included in the design. The ultimate goal of the adoption flow concept was to have pets adopted, and making the process simple and helpful for the user.

From the empathy maps, the main pain points I focused on were: 

• Unsure what to expect when adopting pet 

• Apprehensive on what pets are compatible 

• Simplified adoption process 

Ideation

Sketches 

To begin the process, I sketched a variety of screens while keeping in mind the design will be responsive to different device sizes. I typically enjoy starting off with the Crazy Eights exercise, as it relives the pressure of imagining perfect designs, and just gets the creative juices flowing. 

I focused on imagining designs that were oriented around the main actions users would take, such as searching, adopting and volunteering. More specifically, I focused on creating an easy, but versatile search tool to find pets. An action-oriented navigation system made the most sense to give users easy and quick options to choose from. 

Prototype 

High-Fidelity Prototype

Using Adobe XD to create my hi-fi design, I took into account some of the ideas my classmates provided. I implemented a color scheme that felt cheerful and also guided the eye to important actions. The pet filter search tool is the main focus on the homepage, with pet profiles and other actionable items being provided as well. On the mobile version, the hamburger icon is used to house the top navigation bar that is found on the desktop version. The remainder of the page remains nearly the same, while the mobile version stacks elements vertically. 

On other screens, the main focus is the profiles of pets. Pictures, names, genders and ages are shown in the profile thumbnail. However, I imagined the thumbnail information can update depending on what the user is tailoring their search to. The search results for pets will be sorted in most compatible to least. 

Reflection 

I really enjoyed creating a product that could not only support local animal shelters, but also help individuals find their "furever" friend. Discussions with my classmates from the Google UX Design Certificate to revise my designs were beneficial, and I appreciated their feedback. I valued the chance to work with others, and learn new ways to approach tasks. The challenge of creating a functional responsive web design was very rewarding, as I learned how to adjust to possible user needs and device sizes. Overall, the goal was to create an effortless and helpful responsive web adoption flow. I loved the process and appreciate you taking the time to read about the journey! :)