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

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

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

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

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

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 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.

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.

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.

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.

Pet adoption low-fidelity prototype

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.

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.