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