Works          About Me          Resume

PetHome - Website to Adopt a Pet

Finding a suitable pet is daunting for people who have no experience in raising a pet. Looking for pet in online community is hard and most pet lover doesn’t like buying pets. Some online platforms have very less information to help user choose their pets.


Match pet lovers with their suitable pets through an easy & intuitive adoption process. Finding pet would be more convenient and informative.

User Research

To empathize with the users, I virtually interviewed 5 pet lovers who own a pet or planning to own one. With the help of empathy mapping, I understood that the primary user group prefer pet adoption and treat pet as one of their family members. But they are overwhelmed by the adoption process.

Most of them don’t have clear understanding of how to choose a pet that would feel comfortable in their environment. They feel anxious about pet caring as well. And the typical adoption process seemed over complicated to most of the users.

User Pain Points
  1. Difficult to Find: The process of finding the best pet is daunting. Often user needs to rely on others.
  2. Too Little Info: Not enough information is provided about pet which is critical for new pet owners.
  3. Complex Process: Overwhelming adoption process and no to little support on guiding the new pet owners.
User Persona
User Persona
User Journey Map
User Journey Mapping

I tried to organize the website content in a way that ensures easy navigation and smooth adoption process for users. 

I kept the flow accessible from multiple places and laid out the structure that guide users to move forward.

Paper wireframes

I started the ideation process by making paper wireframes. I sketched all the pages of the website and did lots of iterations. On the image you can see multiple iterations of the home page and the parts of the wireframe I liked.

Paper Wireframe
Digital wireframes

The iterations made on paper were further improved on the digital wireframe. I took the best solutions from sketches and put together a refined version of the wireframe. 

User needs, easy navigation and smooth experience were still the high priority.

Digital Wireframes
Usability study
  • Study type: Moderated usability study
  • Location: Bangladesh, remote
  • Participants: 5 participants
  • Length: 25-35 minutes
  1. Location: User tends to look for pet close to their home. So, Location filter is critical.
  2. Pet’s Behavior: Participants are interested in learning more about pet’s characteristics especially the behavioral aspects
  3. Booking Time: Participants want to book a visit before finally adopting the pet.
High-fidelity prototype

Based on the feedback I updated the design but the core flow remain same. You can check the hi-fi prototype from this link.

Desktop Mockups for PetHome
Mobile Mockups for PetHome
Accessibility considerations
  1. I have maintained high contrast in the design to make it more accessible. I used clear hierarchy in heading and maintained high color contrast.
  2. For better navigation with assistive technology I used landmark in the design
  3. I have marked navigation annotations to guide developer to implement the right traversal order.
Next steps
  1. We need to conduct another round of usability study on the updated design.
  2. We need to design the follow up process of the adoption flow.
What I learned

Listening to the users is the key. I learned this lesson from this project. Focusing on what users are doing, feeling, experiencing and seeing can reveal valuable information to guide the design direction.

Want to talk about a project? Say Hi!