Pets with Pluck

UX/UI design and research - Responsive Website
Project Overview
Create a responsive website with designs for desktop and mobile. Prompt: a user flow for an animal shelter to put a new pet's information in the shelter register so they can be put up for adoption.
My Contributions
I did all of it. Research, competitive analysis, interviews, persona, problem statement, journey map, paper and digital wireframes, low-fidelity prototype, usability study, design system, high-fidelity mock-ups and prototype. I wasn't a participant in the usability study, but that would be rather difficult to pull off. I'm flexible, but not that flexible.

Understanding the User

User Research

Persona

Problems Statements

Journey Maps

Summary of User Research
I interviewed three animal shelter volunteers. The biggest theme was that they gather information on the animals over the period of a couple of days or even weeks, as they come out of their shells and especially if they have evolving medical conditions. A couple of the interviewees stressed that it takes a while to get to know animals so "you don't always have the information up front and what you do have can be inaccurate." One said, "you know, we're always up and interacting with the animals and there's a lot of them. It's hard to remember what you learned about every animal until you get back in front of a computer."

Then the animals have to be examined and groomed. "If they have any health problems, we have to address those before they are eligible for adoption." Animals recovering from medical conditions are placed in foster care until they're ready to be adopted.

There's a whole process before they're ready for adoption and staff and volunteers aren't right beside the computer the whole time to document information digitally so they have to come back and type up notes.
Persona
Annalisa Childers is a volunteer at the local animal shelter

As a volunteer at the animal shelter I want to put up the most relevant and helpful information so that all of our furry (or feathered) friends can get adopted.

User Journey Map
user journey map of steps to put animal into shelter register

Starting the Design

Paper Wireframes

Digital Wireframes

Low-Fidelity Prototype

Usability Study

Paper Wireframes
desktop paper wireframe homepagedesktop paper wireframe adoption pagedesktop paper wireframe homepage 2desktop paper wireframe home page 3desktop paper wireframe home page 4mobile paper wireframe, home page and adoption page
Digital Wireframes
desktop digital wireframe homepagemobile digital wireframe homepagedesktop digital wireframe adoption pagemobile digital wireframe adoption page
desktop digital wireframe volunteer sign in pagedesktop digital wireframe shelter volunteer homepagedesktop digital wireframe add new animal page for shelter volunteer
View Prototype
tree map of site page information structure
Usability Study
I tested the digital wireframe prototype with five participants, both male and female, and ranging from ages 28 to 69. Each participant was provided with the following context: "You're a volunteer at the animal shelter and a new animal has been brought in to the shelter. Please add the animal to the shelter register."

Two of the five participants were confused about not being able to input information into the low-fidelity prototype, but after some explanation, each participant navigated successfully through the user flow. No significant problems were brought up or noted, so refining the design mostly came down to aesthetics.

Refining the Design

Mock-ups

High-Fidelity Prototype

Responsive Website Mock-ups
Desktop
pets with pluck home page on desktopscrolled down pets with pluck home page on desktoppets with pluck volunteer homepage on desktop
add new animal page on desktopanimal profile page for winter the german shepherd husky on desktop
View Prototype
Mobile
pets with pluck homepage on mobilepets with pluck volunteer homepage on mobilepets with pluck add animal page on mobilepets with pluck animal profile page for winter the german shepherd husky mix on mobile on mobile
View Prototype