Pet Shelter Website UX Design Case Study

The project is a part of Google UX Design Professional Certification Program

Project Name: Paws & Pals Project Duration: June 2021 - July 2021



Project Overview

The Product:

Paws & Pals Pet Shelter Website allows users to easily browse the adoptable pets, create filters, book an appointment at the adoption center ( Meet & Greet ) and find all the necessary information about the adoption process.

The Problem:

Paws & Pals want to build a product which will make the adoption process easy and enjoyable and improve the overall user experience.

The goal:

The goal of this project was to Ideate solutions and create prototypes of a product which development process and iterations are based on the gained insights from user research studies and usability tests.

imac 1x1 mockup no back.png

 My role and responsibilities

My roles.png

Foundational research

Summary:

As the part of the foundational research, my idea was to find users who are considering adopting a pet, discover their needs and ideate how to address those needs with my product. User research data in the foundational research phase is collected through semi-structured interviews. The goal of these interviews is to explore interviewees expectations and their experience of using similar pet shelter websites. This type of research is a primary research , qualitative and descriptive in nature since it is based on understanding user’s needs and aims to describe users goals and problems. The data provided from the interviews should help defining user problems and help me as the a researcher to empathise with a user, build empathy maps and create personas.

Accessibility was especially considered when creating personas, user stories, and user journey maps.


Target Users

There are a few types of users. Target users are people of all ages looking to adopt or join Paws & Pals’s pet fostering program. Product is also designed for users who are interested in surrendering their pets because they, for whatever reason, can’t keep providing care. People who love animals and want to contribute and help the adoption center in their mission of helping animals, as well as companies who wants to donate or become partner will be also considered as target users


Conducting research and creating personas.

As the result of user research and insights I created 2 personas which I will use to empathise with the product users and refer to in the ideation process and value proposition.

Persona Tobias and Nora-01.jpg
Persona Tobias and Nora-02.jpg

 

Research Findings

Persona Tobias represent users who love the idea of adopting a pet from a shelter but they also do not act irrationally. Tobias is 47 years old graphic designer who lives alone in a house with a garden. He loves being outdoors and he has a pretty active lifestyle. He would love to be able to find a dogs who are use to being active and have a lot of energy. He also often feels lonely and he feels that as much as he could help a dog by providing it a home and care , a dog could help him simply by being somebody Tobias will take care of. Tobias wants to be able to search a pet by gender, age and size and easily book an appointment with a counselor at the adoption center . He would also love to get all the information about the adoption process but also information about the organisation.

Persona Nora represent users who want a pet to join their family but can’t afford to buy one at a breeder. This persona also represent users with visual impairment or any other kind of reading difficulty. Nora is a 35 years old hairdresser and stylist and she promised her daughters that she will get them a kitten. She has a severe dyslexia and she is use to using text to speech software. She wants to understand every details regarding the adoption process and book an appointment at the adoption center. She will let her daughters find a kitten they like the most but she will also consult the shelter counselor.


 

So, what is the problem?

Users want to easily search for ideal pet and quickly book an appointment at the shelter. Similar products are not very inspiring or engaging. They are missing features to search for a pet based on age, gender and size and information about the adoption process is confusing and difficult to understand. Images of pets are often taken by a cell phone camera and there are no videos of pets or the shelter. Some shelter websites do not allow their users to book an appointment and meet a pet before finalising the adoption. Most similar product do not use any kind of assistive technology to help people with reading difficulties.


 

Insights learned

Users want a more simple, streamlined and enjoyable browsing experience. In afford to solve user problems and eliminate user pain points I created an pet adoption flow that looks clean and its easy to understand and navigate through. Pet profile page is written in first person allowing the user to better connect with the pet and make the right decision about adopting. Pet profile page includes, apart from all the information about the pet, list of similar pets a user might be interested in reading more about. On every page of the user flow there are action buttons directing a user to Adoption Process page. All pages with a lot of text are decided in segments og headlines, text and full screen images for easier navigation and reading.

The appointment booking form also includes a feature for users who have difficulty choosing a pet and want to receive a recommendation based on the scheduled interview.

Website secondary purpose is to inspire users who are thinking about adoption with a news blog and adoption stories section.


 

UI Ideation: sketches and digital wireframes

After sketching multiple versions of web site screens and making wireframes I marked the best elements with a star. These element were used in the final design ( top menu bar, menu cards, about us section and action buttons ).

1626039893784.jpg

As a part of foundational research the common impressions were grouped into topics which were used to create themes and value proposition.

1626039986961.jpg
1626040046148.jpg
 

Using the selected design elements sketched on paper I have used Adobe XD to create low fidelity wireframes. Here are the windows for Tobias persona user flow.

Lov fidelity.png
 

Low fidelity prototypes for desktop and mobile devices are created.

Home.png
Home iPhone.png

Usability study and the first design iterations

Before the usability study and iterations based on usability study. Research goals of the usability study is to identify pain point and problems which users are experiencing while using the product. Some participants are feeling uncertain about which pet will be a perfect match to them or their living situation and will love to get a recommendation from a shelter employee. Second iteration was made for users who would love to spend more time with a dog in a different setting outside of the adoption center. They will have an option to book the Meet & Greet appointment and request to take the dog for a walk.

In order to gain a deeper understanding about users opinions and perspectives each participant was asked a set of same questions.

1. How would you rate our website when it comes to easy of use? Why so?

2. Would you consider recommending Paws & Pals page to a friend? For what reasons?

3. What about the website would you change? Why?

4. How easy was to find the pet you feel like he/she would be a great new member to your family?

5. How difficult was the appointment booking process?

6. What about the website did you like the most?

7. Was there anything you find annoying while completing the task?

8. What do you think about the process you just went through?

9. How would you compare the experience of using this product compering to the similar pet shelter web sites?


 
77D10559-EB1E-4A31-86EE-BE7A283BED08.jpeg

After the usability study


 

High fidelity prototyping

Adoption – 1.jpg

 

Screens and Features / User Flow Video


 

Accessibility considerations

The web site is designed with high colour contrast and a reader friendly design for people with visual impairment. In addition, the product uses assistive technology and allows users to use text to speech tool for screens with a lot of text. This feature is added with Nora persona in mind and other users who suffer from severe dyslexia.

Action buttons are clearly indicated with high luminosity contrast.


 

Takeaways and next steps

A suggestion for further research will include using secondary research date provided by different pet shelters and rescue centres. Paws & Paws clean design relies heavily on well made content - images and videos. Next step in updating the product might include adding video file to every pet profile.


 

Limitations and self criticism

The main limitation of the conducted research is found in its setting and number of participants. I had interviews only with participants who have adopted a pet or considering doing so. Due to the pandemic and social distancing a larger number of participants for the user research study as well as for usability study couldn’t be acquired making it difficult to generalise the research results on a bigger population.

Another important consideration is that the information provided from the semi-structured interviews might be affected by researchers (my) presence and personal connection with some of the participants thus disturbing the reliability of the data.

A further disadvantage of this research can be language limitations. With English being the first language for neither the interviewee nor the researcher delicate nuances regarding the user experience and emotions might get “lost in translation”.

Finally, I found it difficult to distance my self emotionally from the problem - pet homelessness. My personal bias might have slightly turned my focus from solving the users problems to designing a page that will be more effective and help animals find new homes and someone to love them.


Next
Next

Bakery Mobile Application / UX Design Case Study