BUDDY-Pet Adoption Website

BUDDY-Pet Adoption Website

UI/UX CASE STUDY
Volunteer Project

Projects Highlights


Rescuing one animal may not change the world, but for that animal, their world is changed forever.

Context

The rising trend of pet adoption in India, driven by urbanization and emotional support needs, has led to a demand for a comprehensive adoption platform. While over 600,000 dogs are adopted annually, most platforms focus primarily on cats and dogs. A platform that includes all petable animals would address this gap, offering support and guidance for adopting a broader range of species. This would ensure that all animals receive the care and attention they need.


Role

End-to-End UX Designer


Tools

Figma, Photoshop, Miro

Research


What Stakeholders want?

I had an in-depth meeting with the stakeholders to understand their exact needs. I asked numerous questions about the rescue process and the challenges they face.
they expressed the following concerns and goals:

  • "We don’t have a proper platform, and that makes our customer service suffer a lot."
  • "We want to offer our customers a personalized experience."
  • "The adoption process should be easier and more intuitive for users."

  • Competitive Analysis

    The app's competitive analysis aims not to compete but to understand the market, evaluate existing solutions' successes and challenges, and uncover opportunities to address unmet needs effectively.


    User Insights: What Matters Most

    I conducted 15 interviews to explore user needs and pain points with existing pet adoption platforms, uncovering key gaps and opportunities for 'Buddy.'


    User Persona

    To understand the user better, I developed a user persona to represent our target audience.


    Empathy Map

    I created an empathy map to categorize and better understand how users hear, see, say, do, think, and feel about the pet adoption platform. This approach allowed me to tap into their frustrations, hopes, needs, and desires, helping me gain a deeper emotional understanding of their experiences and creating a more empathetic, user-centered design.


    Goal

    After the user interviews, competitive analysis and talking to Stakeholders I came up with following goal


    User Journey diagram/sitemap

    Design Principles

    To create a seamless and efficient user experience on the pet adoption platform, I applied the following UX principles:

  • Aesthetics-Usability Effect: Attractive designs enhance perceived usability, making the interface friendlier and more engaging.
  • Fitts’s Law: Clearly accessible primary tasks (like pet searching) improve efficiency and reduce user frustration
  • Hick’s Law: Fewer choices lead to quicker decisions; simplifying categories helps users make informed choices easily.
  • Law of Proximity: Group related information (pet profiles, services) together to facilitate quick understanding and navigation.
  • Miller’s Law: Organizing content into smaller chunks (e.g., pet info cards) helps users process and remember details better.

  • These principles were specifically chosen to address user needs and create a more intuitive, user-friendly experience for potential pet adopters.

    Wireframe


    Using this flow, I created my first ideas of the main screens and how they would be connected. After a couple of iterations, I ended up with the following version.

    These are one-fourth of the wireframes

    Testing


    After carefully testing the wireframes with users and Stakeholders, I made two significant changes to improve the overall experience:

  • Popups for Signup and Questionnaire: Instead of using separate pages, I integrated popups for the signup and questionnaire processes. This change allows users to complete tasks without leaving the current page, reducing navigation steps and streamlining the workflow. This leads to quicker task completion and a more seamless interaction, keeping users engaged and focused.
  • Loading Animation for Personalized Results: After completing the questionnaire, I decided to display a brief loading animation lasting a few seconds before showing personalized results. Without this delay, instant results may give users the impression that the system isn’t thoroughly processing their inputs. The animation creates a perception that the platform is carefully curating personalized suggestions, enhancing the overall experience.
  • High-Fidelity Prototype


    Home Screen

    Few added features

    Pet Selection

    After completing the questionnaire, users will be redirected to their personalized list of pets

    This is the pet information page, which includes details about the pet's age and behavior, as well as a scheduling feature for walks, helping users to better understand each pet.

    Prototype

    For responsiveness, here are some of the pages designed specifically for mobile devices.

    Validate


    After testing my clickable prototype with five users, the feedback was overwhelmingly positive. The personalized questionnaire, smooth user flow, detailed pet profiles, and essential chatbot were all highly praised 🙌, confirming the design’s success 🎉 in meeting user needs.

    Takeaway


    Here are my takeaways from designing the Buddy pet adoption website:

  • Responsive Design for Accessibility: Designing for both desktop and mobile helped me understand how crucial it is to create responsive layouts and optimize breakpoints, ensuring accessibility for all users across different devices.
  • User-Centered Design: Personalization, intuitive user flows, and real-time customer support through a chatbot emphasized the need to meet individual user preferences and offer seamless assistance.
  • Visual Hierarchy:Organizing content effectively through design elements guided user attention, improving overall engagement and usability.
  • Importance of Iteration and Research: Regular user feedback and research informed key design decisions, allowing me to refine the platform and address user pain points efficiently.
  • Iterate as much as you can: Continuous iteration is key to refining designs. By testing and gathering feedback at each stage, I was able to make informed decisions and improve the user experience, ensuring that the final product truly meets the needs and expectations of users.
  • Next Project
    Project Image

    Remedi

    Interested! Know more