pages mockup

Take me home

a pet adoption site

Overview

“Take me home” is a website for those who want to adopt a pet and would like to see many shelter’s and rescue’s pets together in one place.

The challenge

There are many shelters and rescues in the country who want to find a home for their pets on their own platform. At the same time, there are many people who want to adopt a pet and find the perfect one. The problem is that people do not know all shelters or do not have the time to browse through all shelters’ page.

The solution

The solution to tthis and also the goal is to create a platform where all registered shelter can upload their pets with their characteristics. Through this site, people can browse through many pets' profile to find the perfect one. A simplified application process would help the applicant and the shelters too.

Time scope

February - 2022

Tools

 xd logoPhotoshop logoadobe illustrator logo

Roles

  • UX research
  • UX Design
  • Wireframing
  • Prototyping
  • Usability testing

The design process

Empathize & understand the customer

User research

I conducted a user research to understand users’ needs, pain points, thoughts and feelings about the pet adoption processes.

I interviewed 5 person and also conducted a survey among people who want to adopt a pet. The goal of the research was to find the users pain points about adoption processes (e.g how to find the pet, procedure etc). and also the features they would like to have when looking for their perfect pet.

Pain points

  1. Platform: Some shelters created a website, some put photos on Facebook, but there is no uniform platform where people can find pets from more shelters
  2. Filters: In most cases, there are not enough filters for people to find their perfect match
  3. Information: Users would like to know as much as possible from the pets, but in many cases there are only a few charateritics about the pet
  4. Education: Soon to be pet owners would like to know everything about the adoption process, the issues that may come up and other relevant issues
Jason - a chef persona - childhood dreams

Creating personas and problem statements

After the research and interviews I got a good picture about the potential users and their diversity. To be able to further empathize, I created several user personas and problem statements. The above photo is one example of the personas.

The problem statement: 

Jason is a young chef, who needs a site where many dogs can be found, because he wants to find the perfect dog to do agility races with it and pursue his childhood dream.

Define the problem and coming up with solutions

Creating user journeys

Creating a user journey map helped me to pinpoint user pain points and come up with solutions to those frustrations. Many opportunities were identified that was helpful during the design phase

Defining the information and the features for the site

Based on the research, competitor analysis and the user journey maps, I collected all the potential information and features the site might be needed and created a content library.

I also created information architecture and a site map that guided me through the wireframing phrase.

Customer journey map with puchpoint and opportunities
Sitemap

Ideation & design

Paper wireframes to digital wireframes to lo-fi prototypes

After creating many-many variations of each screen on paper, I selected those parts that I liked the most and turned them into a digital format.

application success low-fi wireframe
The home page
pet profile page low-fi wireframe
Pet profile page
search page low-fi wireframe
Search page with filters

Usability test, iterations  

After I finished the low-fi wireframes and turned them into a prototype, I conducted a usability study to see how the functions work, what are some frustrations with the page and what can be improved based on the comments, heatmaps and feedbacks I got.

Hi-fi desing & usability testing

Turning low-fidelity protoype into good looking mockups

One of the most creative part is when I can turn low-fi prototypes into hi-fi ones. To do this, I created a design system where I chose all the fonts, colors and created sample buttons, headings, paragraphs and the logo.

Design system - colours, typoghraphy, logo and buttons
Part of the design system

Mockups

Responsiveness - designing for smaller screen sizes

As nowadays many people use their mobile devices to surf on a website, it is inevitable to design for multiple screen sizes.

Responsiveness, the same page on a laptop and on a phone

Results & take-aways

As this was a practice design, I learned a lot, but we all learn all the time. The most challenging part was the research and the usability study because it took some time to find a righ number of customers from the target group. I also learned that this is a part where you cannot be rushing and make up things because that would not represent the consumers.

As for the design process, designing a responsive site was another important aspect of the learing curve in this project. It does require real work and dedicated time to go through different screen sizes and optimize your design for smaller screens too.

Responsiveness, the same page on a laptop and on a phone

thanks for reading this case study!