Pet Adoption website

Responsive web design (Case study of UX course by Google)

Project overview

The product: 

Pet adoption is a website that allows you to adopt a pet through our website. The usual user is between the ages of 24 and 38, and the majority of users are in a couple or with family. The goal of pet adoption is to find homes and families for the pets, as well as to help individuals choose the right pet for them based on their personality.

Project duration:

August 2021 to September 2021

The problem:

People want to know more about the pet's history and their story before they were taken into the shelter, as well as their situation and personality. They wish they could find a pet that matches their personality and family through the website.

The goal:

Create a website that allows users to choose a pet based on their personality and match.

My role: 

UX designer leading the pet adoption website design

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.

View the pet-adoption high-fidelity prototype

Pet Adoption
Empathy map

Empathy map

User research:

summary

To better understand the target user and their needs, I conducted user interviews, which I then turned into empathy maps. I noticed that many target users want to adopt a pet for themselves or their families to join them, as well as help those pets have a better life. Many adopting websites, on the other hand, are overwhelming and difficult to browse, which frustrates many potential customers. This made a typically pleasurable experience difficult for them, and they couldn't find what they were looking for.

User research : pain points

User research : pain points

Persona

Persona

Persona

We created a persona after gathering insights from user research and developing a clear image of who our target user would be. A user persona will assist us in making better design decisions that will meet the needs of the user.

Problem statement

Problem statement

Problem statement

I Created a problem statement based on our persona story which is a brief explanation of a problem to be solved or a situation to be improved It identifies the difference between a process's or product's present (problem) and desired (goal) states.

User journey map

User journey map

User journey map

I created a user journey map of Eli's experience using the site to help identify possible pain points and improvement opportunities.

Pet Adoption
Sitemap

Sitemap

Sitemap

Difficulty with website navigation was one of the pain points for users, so I used that knowledge to create a sitemap.

My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

Paper sketch

Paper sketch

Paper wireframes 

Following that, I drew paper wireframes for each screen in my website, keeping in mind the user's pain points about navigation, browsing, and what they wish to flow.

Pet Adoption

Paper wireframe screen size variations


Because Pet adoption customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

Pet Adoption

Digital wireframes 

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.

Pet Adoption

Low-fidelity prototype

I linked all of the screens involved in the core user flow of selecting a pet and filling out the adoption form to build a low-fidelity prototype.

At this point, I had received feedback on my designs about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

View Pet adoption low-fidelity prototype

Pet Adoption
Pet Adoption
Pet Adoption

Mockups

I made changes to the site's Home page and adoption form flow based on the findings of the usability research.

  • One of the adjustments I did was to include an open dropdown underneath the dog icon so that people could understand it better.

  • I changed the form application questionary to multiple questionary forms to make it easy for users.

Pet Adoption

Mockups: Screen size variations

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile so users have the smoothest experience possible.

Pet Adoption

High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.

View the pet-adoption high-fidelity prototype

Pet Adoption

Take away

Impact

The website gives users the impression that it matches their needs for adopting a pet based on their personality.

One quote from peer feedback:

"It is really beneficial because I can filter all of my needs from the dog and just look for those that are fit for me and my family".

What I learned:

I have to set my opinion about design aside and look for what the user needs and what the greatest solution is for them.

Next step

1

Conduct another round of usability testing to confirm that the users' pain points have been properly handled.

2

Conduct further user research to identify any new areas of need, and create mobile, tablet, and desktop responsive websites

Thank you

Khatereh tabebordbar