Petpals Pet Adoption App

Pet adoption app designed for busy New Yorkers, simplifying the process of finding their new best friend with easy access to shelters and resources at their fingertips.

Role

UX/UI Designer, UX Researcher

Finalized Screens

Prototype

Duration

4 months

Problem

New Yorkers are overwhelmed with the long and tedious process of adopting a pet. Contacting shelters can be difficult when information is not centralized

Solution

Pet Pals simplifies pet adoption by centralizing information from local shelters and resources in one easy-to-use app. Users can connect with shelters, browse pets, and submit a single application for multiple inquiries. With real-time updates and a supportive community, Pet Pals removes the hassle from the adoption process, helping users find their perfect companion.

Problem

New Yorkers are overwhelmed with the long and tedious process of adopting a pet. Contacting shelters can be difficult when information is not centralized

Solution

Stage 1. User Research

Competitive Analysis

We conducted a competitive analysis of several pet adoption apps to identify their key features and assess what worked well and what didn’t. This analysis helped us determine which features we wanted to incorporate into our own

design, ensuring our app would be user-friendly and offer a streamlined experience compared to existing solutions.

Brainstorming & MoSCoW Map

My team and I brainstormed features and used a MoSCoW Map to organize them into Must, Should, Could, and Won’t categories. This helped us prioritize based on importance and feasibility.

Feature Prioritization Chart

We then took the Must, Should, and Could features and placed them on the Feature Prioritization chart, estimating their effort and impact. This helped us focus on high-impact features that were easier to build.

Discussion Guide

My team and I created an interview discussion guide, starting with a clear problem statement to focus our research. We brainstormed user-centered questions, keeping UX research practices in mind to avoid any biases or framing issues, and divided sections among team members. This guide provided us with valuable insights into the behaviors of people who have adopted pets, as well as those who haven't due to issues in the adoption process, helping us better understand user pain points and needs.

Empathy Map

We started by reviewing our interview notes and placing insights on sticky notes on our Miro board. We mapped out what participants see, say, do, and hear, while also noting their pains and goals. This helped us visualize their experiences more clearly.

Persona

Using the Empathy Map as a reference, we created a persona for a typical user. This included their name, role, demographic details, as well as key frustrations and goals, giving us a clear representation of our target user.

Customer Journey Map

We then developed a Customer Journey Map that outlined the steps a user would take, from discovering our app to using it, including their actions and emotions at each stage of the adoption process.

Stage 2. Ideation & Conceptualization

Initial Sketches

We each created sketches using the "Crazy 8" method to develop low-fidelity wireframes focused on the essential task pages that users would need to navigate. These wireframes allowed us to visualize the user interface and ensure that the most important features were easily accessible and intuitive for our users.

Brand & Visual

I developed my own brand using colors typically associated with friendship and companionship, ensuring it resonates with our mission. The name was a collaborative effort among the team, reflecting our shared vision. For typography, I chose the classic Montserrat font to convey a modern yet timeless feel, enhancing the brand's overall appeal.

Stage 2. Ideation & Conceptualization

Initial Sketches

Brand & Visual

Stage 3. Design Execution

User Flow:

I designed a task flow that guides users through the process of selecting a specific pet, in this case, a cat, and directly contacting the shelter for more information. This flow ensures that users can easily inquire about their chosen pet and simplifies communication with the shelter, making the adoption process more efficient and user-friendly.

Low-Wireframing:

With the task flow in mind, I digitalized my sketches to Low-fidelity wireframes using Figma. This helped me visualize the structure and establish the visual hierarchy, ensuring that each screen contains the necessary components for a seamless user experience. These wireframes provided clarity on the layout and design, setting the foundation for the app's interface.

Stage 4. User Testing & Iterations

Conducted final user testing with individuals, leveraging the task flow I created to evaluate navigation and feature usability. These insights revealed areas of user difficulty, particularly within the search section, where certain elements were being overlooked. Using this feedback, I iterated on the design to streamline the experience and incorporated more of the brand identity into the Mid-fidelity prototype, ensuring the app's functionality and aesthetics better aligned with user needs.

Stage 5. Final presentation and handoff

Finally, incorporating the brand identity, visual design, and research insights, I implemented these elements into my finalized screens. These screens focus on the user inquiring directly to the shelter about a specific pet, ensuring a cohesive design that aligns with our brand's values while enhancing the overall user experience.

Reflections & Next Steps

This class project helped me learn how to work alongside a team and see a project from end-to-end.

Adding key features like Chowder's profile page
Refining the search page.
Creating a second interface for shelters to manage the adoption process.
Implement feedback for the second round of user testing for those who struggled with navigation. These insights are helping me improve specific aspects of the app.