Banner image of the pet adoption mobile app case study. Displays 4 primary mockup screens of the mobile app design.

OVERVIEW

The concept of this mobile app experience is to help people find pets available for adoption. Improving adoption rates may steer organizations towards using our app compared to other competitors. Users can utilize extensive search features and helpful guides and information to determine the right companion for them.
Passion Project
Role: Product Designer
Duration: 3 Weeks
Methods & Tools: Figma, User Research, Empathy Map, User Flow, Sketching, Wireframing, Prototyping, Visual Design
CONTEXT

More Animals Need to be Adopted

As a current dog owner and pet adoption advocate, I wanted to help homeless pets find a loving home. Too many animals are being kept in shelters and rescues and risk the chance of getting euthanized. On the other hand, people who want to adopt could be overwhelmed with all the choices and end up debating whether or not they'll choose the right companion. Therefore, when a person decides to adopt, they should easily find what they want and make the best decision for both them and the pet.

Ultimately, the goal is to make the adoption process easier on users, which will improve adoption rates.

DISCOVERY

How do potential adopters think?

I conducted user interviews with peers who plan to adopt in the future and asked them questions to figure out their thoughts, opinions, and beliefs on the concept. After gathering all of their insights, I found some commonalities among them:
A list of user insights

Digging deeper into the issue

As I looked further into the adoption process and searched online communities for people's experiences in adopting, I noticed another layer of problems that some people have noted.

  • The application process can be long and tedious. Application forms can be as long as five pages with over 50 questions in total, while some organizations require home visits and interviews.
  • Those whose applications are constantly getting rejected have felt unmotivated to adopt, prompting them to switch to buying from breeders instead.

Acknowledging the constraints

You can't change the application process (for now)

I wanted to address the users' pain points by somehow making the process easier on the app. However, given the current scope of how the adoption process operates, this would require the adoption industry to change the entire system.

Understanding the other perspective

Shelters and rescues provide tedious application forms to ensure the person is responsible and willing enough to take good care of the pet. They can also be extremely busy managing other tasks necessary for the upkeep of the adoption center. Therefore, it's understandable that they prefer sticking to one communication method through email and may take a while to respond.

Empathy Mapping

Based on my research findings, I mapped out the potential thoughts, actions, feelings, and sayings of users. This helped provide a deeper understanding of their needs.

An empathy map with an avatar in the middle named Jenna.

How can our app gain an edge over other competitors?

By identifying each competitor's SWOT position, this would provide the edge that the app needs to deliver a different experience and address further user needs.

IDEATE

Defining Solutions

Based on my research analysis, I identified four key solutions that will address users' pain points while keeping in mind the constraints.

  • Informative pet profiles - Help the user make easier and better decisions.
  • Support system - Enable users to give or take advice from each other regarding the shelter, process, or interactions with the pet.
  • Step-by-step guide of the adoption process - Guidance for those new to adopting.
  • Extensive search tools - Enable the user to specify their findings.

Sketching

I started massively brainstorming ideas and solutions through sketching. The sketches helped me identify and visualize what users needed and would want to see. I began to form ideas on the details of each screen design as well.

User Flow

I created a user flow to determine various paths and actions users may take. This method was substantial in visualizing the series of steps that enable users to achieve specific tasks.

User flow of app

Wireframing

Finally, I created wireframes for the basic structure of each screen. However, several iterations were made into the final design to improve usability, accessibility, and efficiency in user flows.

Low fidelity wireframe for each screen

DESIGN

Home screen

The mobile app's home screen mockup is displayed, with text pointing to a component in the mockup. Text says "The search bar is the main priority and goal of the users", and "users can see their last searches and last viewed pets to quickly jump back to their findings"
A GIF of the bottom section of the home screen mockup, demonstrating what happens when you tap on "give advice to others" or "what's this"

Users can see their last inquiries about the pets they asked about, with the option to advise others about the shelter, their adoption process, or interactions with the pet.

Search Results

Providing auto-fill when people start typing in the search bar will result in faster results. I created a horizontal layout for search results instead of the typical vertical format to minimize scanning.

A GIF demonstrating when users tap on the search bar and type out a breed name, then tapping on the breed name, then tapping on "near my location", which brings them to the search results screen.
A GIF demonstrating when users scroll through the search results of a Dachshund breed, then tapping on the filters icon.

Since each individual has preferences on what kind of pet they want, detailed filters and sorting options were a given. People would prefer finding a pet closest to them first, and looking at images would help them make faster decisions.

Pet Profile

When a user taps on a profile, all the necessary information helps with deciding on a pet.

A GIF demonstrating when users tap on a dog's image from the search results, which brings up the dog's profile information.
A GIF demonstrating when users scroll down to the bottom of the dog's profile where an advisory panel is displayed.

The pet profile also includes an advisory panel where they might find helpful answers from others. Lastly, users can then inquire about the pet should they decide to apply for adoption.

Resources

Two mockup screens of the resources tab of the mobile application. It shows a "New to Adopting?" section at the top, a "Guide to pet care" section below that, then a "Breed types" section below that.

For new adopters, a step-by-step guide is included under the Resources tab. Below that, informational blog posts and articles for each category or breed provide additional guidance on taking care of a pet. Providing these enable the adopter to have easier access to helpful resources in the palm of their hands.

USER TESTING

Evaluating success of the design

I had four people who'd choose to adopt in the future to test out the prototype. 100% of users were able to navigate through each screen without difficulty. Each user gave valuable and insightful feedback that verified if my designs provided enough clarity and efficiency in achieving their tasks.
An illustration of user insights from the testing. It displays the different emojis to visualize what users were feeling. There is also text displayed on top of each emoji to demonstrate what users were saying.

REFLECTION

Future iterations

Based on feedback from user testing, I would probably change the 'advice and tips' section to a review section for the shelter instead, as some had suggested. Another method would be to make the advice section more credible. Other possible iterations would be including local pet services (groomers, pet-sitters, and vets), enabling this app to be more of a one-stop-shop. Overall, this was a fun experience making a case study that I'm passionate about!

Thanks for viewing!