Project Overview

Paw House is a responsive website designed for a local animal shelter. This website aims to be the one-stop site that allows people to schedule an adoption online, learn about different pets, and even complete the entire pet adoption process online.

Project Type

Self Project

Duration

2 Weeks

Design Role

UI/UX Designer

Prototyping

User Testing

Tools

Adobe XD

Header.png

The Problem

During the world pandemic, millions of people stay in their homes with their families to avoid physical contact with others. During this period, many people have decided to adopt a pet to accompany them through this pandemic. But the usual pet adoption process has to be conducted at an animal shelter in person, where people inevitably have to come to get close contact with other people, which has increased some health risk concerns. 

The Solution

To make pet adoption a contactless process, I have designed a responsive website for a local shelter that will allow users to either complete the pet adoption documentation online before visiting the shelter. Or the user may choose to complete the entire pet adoption process online using the online pet adoption feature. The website will also provide pet care and shelter information.

The solution.jpg

Adoption splash page final design

The Challenge

The usual pet adoption process needs to be done in person at a shelter because most people would like to meet with the pet; first, people need to see if they can build a bond with the pet before adopting them. On the other hand, the shelter would also like to know if the adopter can provide good care to the pet after adopting it. These are the two criteria that need to be met with the design.

How might we allow the user to build a bond with the pet and build trust with the shelter in a contactless process?

User Research

To put my user's experience at the center of the product, I need to empathize with my users. I have sent out users surveys, scheduled multiple user interviews and visited a local shelter. Then I created an empathy map, I used all the information I gathered to identify my user pain points and develop user personas based on the findings.

empathy map.jpg

Empathy map made for Jess, an interviewee.

User Pain Ponts

After my user research and empathizing with my users, I gather and analyzed my research data, and I was able to identify the top three pain points of my target users. 

1

Users need to have a way to adopt a pet without going to the shelter

2

Users need to be able to find and identify the right pet for them online

3

User needs to prove themself to the shelter that they can take care the pet.

User Personas

After identifying the common pain points of my users, I look for the most common themes in my data and group the users who personify those themes together. Then I created user personas to reflect and represent the lifestyle of larger users groups. 

User Personas-01.jpg

User persona 1

User Personas-02.jpg

User persona 2

User Journey

To get a better understanding of my user's journey, I created a user journey map. The goal is to identify the complete user journey of adopting a pet from the shelter online using the online adopting feature.

User Journey.png

User journey map

Information Architecture

After knowing my user, I have organized the content of the website and created my information architecture. By completing the IA, I can make sure that my design is user centred and organized.

IA.jpg

Information architecture for Paw House website

User Flow

Based on the IA, I created a clear and easy user flow that indicates how a users completes the pet adoption process, both online and on site, from start to finish.

User Flow.jpg

User flow map for pet adoption

Ideation

At this phase of the project, I started to generate ideas on paper. I have created multiple versions of the paper wireframe for each screen, and then I picked out the part that I believe is most effective, then combine them into a new wireframe. I repeated this process for all of the screens.

1280606293.jpg

Sketches of paper wireframes

Digital Wireframes

At this point, I transformed my paper wireframes into digital wireframes using Adobe XD. I am still focusing on the layout and usability of the design at this time, and it allows me to identify some usability or screen missing issues.

Lo-Fi Wireframes.jpg

Some of the digital wireframes

Usability Study

As I complete the digital wireframing process, I prototyped all the wireframes into a          low-fidelity prototype and conducted an unmoderated usability study. The study aims to find out that the primary user experience, the online pet adoption process, is easy for users to complete. We also would like to understand the specific challenges that users might face during this process.

Users are confused about how to get started on the website

Insights:

Add guidance about where to start the adoption process.

Users thinks the online pet adoption process is easy to use and effective.

Insights:

The online adoption process is easy to use for most users.

Users wants a way to filter though the adoptable pets more quickly and efffectively.

Insights:

Adds a filter for the users to filter out pets and allow quick browsing.

Usability study findings and insights

Design System

I crafted a design system to use throughout this project. By using a design system, I can reduce the amount of time spent on repeated work and keep the brand's aesthetics.

Design System.jpg

Some of elements from the design system

High-Fidelity Mockup

I iterated the design based on the insights and findings from the usability study. After all the iterations have been created and requirements are met, I transformed my digital wireframes into high-fidelity mockups.

Home Page

The Home Page provides the users with quick access to all adoptable pets, some basic adoption information and why they should adopt, and adoption stories for them to relate to. Users can also navigate and between pages using the navigation bar at the top.

1.1 Home – 2.jpg

Home page final mockup

Adoptable Pets

The Adoptable Pets Page displays all the currently adoptable pets in the shelter. The user can use the filter function to filter through the pets and quickly find a pet attracting them. If they have logged in, they can also save a pet their "Favorite" for future references.

8.1 Adoptable Pets.jpg

Adoptable pets page final mockup

Pet Details Page

The Pet Details Page displays the pet's basic information, such as breed and gender. It features an image carousel of the pet with a short video embedded, which allows the user to see the pet in live-action. Users can also schedule a meetup or start the online adoption process.

The user may also submit a inquire to the shelter if they have any other questions. They can also support this pet by donating.

8.2 Pet Details.jpg

Pet detail page final mockup

Online Adoption Questionnaire

The online adoption questionnaire is a series of questions that gathers the basic information of the user. The shelter will use this information to determine if the user is a suitable owner for the pet. Once the user completes the questionnaire, they will be contacted by the shelter to schedule an online interview.

9.1 Pet Adoption Question 1.jpg
9.2 Pet Adoption Question 2.jpg
9.3 Pet Adoption Question 3.jpg
2.8 Pet Adoption Question 4.jpg
2.9 Pet Adoption Question 5.jpg
2.10 Pet Adoption Question 6.jpg
2.11 Pet Adoption Question 7.jpg

Online adoption questionnaire

Mobile View

After finalizing the desktop website, I started designing the mobile version. My main goal with the mobile site was to provide a unified experience no matter which platform the user is currently on. 

Mobile View.jpg

Mobile view

High-Fidelity Prototype

After completing the mockup, I prototyped the screens into a high-fidelity prototype. 

What I Learned

Designing a website is an exciting process and a bit different from planning for a mobile app. The biggest thing that this project taught me is creating a unified experience across all platforms. The larger screen provided more space for more information and freedom for other structures. I also learned to design under constraints and balanced the design by talking with my interviewees to understand their needs and visiting a local shelter.

The Next Step

Moving forward with this project, I would like to add a feature that can automatically match pets with potential owners. This feature can potentially help people who are having trouble finding the right pet for them and help the animals find their new home. Meanwhile, I would like to conduct moderated usability study on the current design, focusing on the accessibility of the design for this study because I saw many design opportunities in the current design that can make the design more inclusive.

More of my work

Holding Phone.jpg
Case Study
Home copy.jpg
Case Study
Header.jpg
UI Redesign