Responsive web design for a dog shelter.

Project

Mobile app

Client

Dog shelter

Role

UI/UX Design Visual design

Timeline

Awwwards

Dog shelter website and an app where adopters can find a dog that matches their lifestyle and book a walk.

Problem Statement

Because of the war Ukraine faced an overflow of abandoned pets, and a lack of up-to-date resources to find every pet home, there was a need to create a user-friendly and informative site and app to encourage pet adoption.

Hypothesis

Simple and easy-to-use website and app can make the process of dog adoption much easier. Adopters can save time and get all the necessary information about dogs online. Besides, booking a walk with a dog will make potential adopters feel responsible about the adoption and it will help volunteers to socialize dogs.

Solution

To simplify the journey of adopting. To provide necessary information to the potential adopters so that they could easily find a dog that fits their lifestyle.

Project goals

• To understand the goals and frustrations of the adopters.
• Create a fully responsive design for a dog shelter.
• Support browsing through high-quality imagery and clean IA.
• To provide adopters with all necessary information about the character, dog’s health, and care.
• To match adopters with a dog that fits their lifestyle.

ā€

User Research

Goals

1.

To identify common challenges users face when adopting a dog.

2.

To understand the pain points users have when searching pets online.

Findings from customers’ reviews

After I analyzed the competitor’s feedback I grouped them into two groups:

Adopters need

• filter for hypoallergenic dogs
• add favorites
• exclude breeds that you don’t want to see

Adopters are Annoyed with

• long and detailed application form
•repeated list of search results
ā€

profiles that you know are not a good match for you or your family
it takes SO much time just to scroll through pets you aren’t looking for

ā€

Interview

One of the best ways to solve customer pain points is to ask the customer what solution they are looking for. So I interviewed 4 users to find out their pain points and needs.

The questions I asked users:

1.

Would you use a dog adoption app or site to look for a dog?

2.

Please, choose which filters for the search are most important for you.

Select all you need:

• size
• gender
• age
• breed
• location
• your variant.

3.

What information about dogs should be included in the dog profile?

4.

What can stop you from choosing dog online?

Findings

Several participants wanted to add a filter ā€˜color’. One of the users mentioned that it would be great to add ā€˜features’ in the breed descriptions. All the users wanted to receive as much information about the dog as possible. 2 users mentioned that it would be great to add a video of the dog. One user mentioned that she wants to have health and care tips.

Personas

ā€


User Journey

Competitors research

ā€

ā€

ā€

ā€

ā€

ā€

ā€

ā€

ā€

ā€

Competitors’ weaknesses

• Most pet adoption websites are outdated and need re-design.
• Most apps lacked in key areas: usability and navigation.
• Options for easy navigation are limited.
• Most sites have only 3 filters location, age, breed.
• Petango site has only dog photos and no dog characteristics or breed descriptions.

Competitors’ strengths

• Petfinder has a video of the pet. Includes information about pets’ health and character in its profiles.
• Get Your Pet has more filters than the other competitors. Besides age and size, they have filter compatibility, coat, new, and sort by adoption deadline/location.
• Adopt a pet has a detailed dog description with breed characteristics, dogs character, and a story. They have the ā€˜ask about me’ button.
• Adopt a pet has step by step description of the adoption process.
• Adopt a pet has filters for special needs, color.

Sketches

After analyzing the competitors’ strengths and weaknesses and conducting interviews, I started ideating on how to make the adoption process as easy as possible and how to solve users’ problems effectively.

How might we:

• How might we implement the filtering feature?
• How might we simplify the application form?
• How might we help users to choose the dog that fits their lifestyle?
• How might we tell dogs’ stories and show them?
• How might we add practical health tips to help users take care of their dogs?

Information architecture

Lo-fi desktop wireframes

After sketching out some wireframes and thinking through the preliminary flow, I reviewed what was nessecary and what areas needed improvement.


Lo-fi mobile wireframes

Usability study

I wanted to figure out what specific difficulties users encounter when they try to complete the core tasks of the dog shelter website: dog selection, booking a walk, and in-app navigation.

Research questions

• How long does it take for a user to select a dog and book a walk?
• Are all the necessary filters included?
• What can we learn from the steps users took to book a walk?
• Are there any parts of the booking process where users are getting stuck?
• Is the booking process easy for the customer?

Participants

• Participants are between 12 and 41.
• 3 female and 1 male, participants are between 12 and 41.
• 1 user with bad eyesight, 1 user is a teen.
• 4 users have a dog.

KPIs

• Time on task: all users spend less than 1 min to book a walk with a dog.
• Conversion rates: in general, all tasks were completed by the recepients. Only 1 participant didn’t find adoption steps on the main page.
• User error rates: All 4 recepiens managed to book a walk.
• System Usability Scale: a questionnaire to evaluate customer feedback.

Results

After a usability study with 4 participants, I found out which filters are really helpful and which are useless, and which content I can add to make the site more informative for users.

Affinity map


Iterations

After iterations, I added links to the catalog and the ā€œDogs I loveā€ on the main page. I’ve changed filters — deleted filter ā€œcolorā€, rearranged filters due to importance to the user, changed ā€œdogs forā€ filter to ā€œdog breed groupsā€: sporting, hound, working, terrier, toy, non-sporting, herding. I also added a link to the adoption steps on the dog profile page.

Visual Design

Final design mobile

Ā Ā Ā Ā Ā Let’s work together

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.