A pet registration flow for an animal shelter

The Product

I wanted to design a responsive site that helps animal lovers adopt, and register a pet easily from an animal shelter.

Project Duration

2/3 Months to complete

The Problem

When conducting research for registering a pet my insights revealed the following. Most owners felt overwhelmed with the information they had to provide to register a pet.

The Goal

The goal was to make the registration process easier, and less time consuming

My Role

UX Research, UX Design, 

Responsibilities

Some responsibilities that played a key role in my design process were seeking participants to interview, and Conducting Usability Studies. Also making an information architecture, paper wireframes, digital Lo-fi wireframes, mockups, and a High fidelity Prototype. 

Steps I took to understand the user

User research summary

🧳 

To better understand what users struggled with in the registration process I sought out animal lovers that I knew. I wanted to better understand where in the registration process users felt most frustrated. After conducting my interviews I found out most users felt overwhelmed with the information they had to provide to register their pet.

User Research: Pain Points

Answering Questions

User were Uncertain how to answer certain questions

Amount of Questions

Some Users felt overwhelmed with the amount of questions they needed to answer

Time Consuming

Users felt the process takes to much time

Information for registration

Users felt unprepared  and went to seek in person help

Persona: Emily Elizabeth

Problem Statement

Emily Elizabeth is a full time student Who needs an efficient way to adopt a pet Because she needs to get back to her regular routine to prepare for exams. 

User Journey Map

I took notes about the process of registering a pet to better empathize with the user. Mapping the user journey gave me better insight were to improve the process.

Starting the Design

Sitemap

I created a site map to visualize how to structure and design the website. The I.A. helped me focus on the most important screens to craft for my main user flow.

Paper Wire Frames

I designed four different layouts with accessible features I thought the user would like access to. I placed a star next to the features I thought would work best. Then combined the stared items into a polished wireframe.

Screen Size Variations

When considering responsive designs for mobile and tablet devices I adjusted the folowing. I adjusted text and removed topics from the main navigation for the tablet design. I arranged text in a vertical scroll, then included a hamburger menu for navigation in the mobile version.

Digital wireframes

I Made a tab navigation bar so users can navigate directly to what they needed. Then I tried to implement noticeable CTA Buttons to start desired task.

Digital Wire Frame Screen Variations

I considered ways to implement carousels for locations in responsiveness to the designs. Then I replaced two categories in the tab section with “more”. Got rid of text and only left CTA buttons, and titles for mobile responsiveness 

Low-Fidelity Prototype

By creating a low-fidelity prototype I was able to determine if my placement of CTA buttons and navigation of tabs helped users Complete the registration process.

“Link to prototype below”

Registering a pet from an animal shelter.

Usability Study Parameters

Study Type

Unmoderated Usability Study

Location

United States Remote

Participants

5

Length

15-20 min

Usability Study Findings

Adopting Pet

User had trouble finding where to start registration

Buttons

Users had trouble locating buttons

User Flow

Had trouble distinguishing where they were in the process

Refining the design

Navigation

  Users seemed unsure where they were on the page so I implemented the tabs being highlighted for the current page. I tried to implement darker colors for CTA buttons so users can distinguish the action.

Before

After

Quick Fill 

I tried to Include a visual call to action button to scan documents for users to fill  forms out more easily.

Before

After

Mock Ups Original Screen Sizes

Screen Size Variations

By following my paper wireframes and placing the items of topics and Call To Action buttons  in the order my digital wireframes were represented. I was able to create a Responsive site.

High Fidelity Prototype

For my high-fidelity prototype I implemented changes were the user can distinguish were they were in the tabs section, and placed a quick fill button to take photos of documents to make the registration process easier.

“Link Below”

Pet Registration from an animal shelter prototype

Accessibility Considerations

1

Tabs for navigation at the top of the screen.so users can easily navigate website

2

Adopt and register has more than one location on site so users can easily access process.

3

For forms I added an action button that allows you to scan forms. so you can easily fill out forms.

Going Forward

Take aways

Impact

Users felt the action button to take pictures of documents for forums was thoughtful. Users also enjoyed the selection of pets for the adoption page. Hopefully, the structure of the site will keep users engaged to complete the registration process.

What I Learned

While conducting interviews I learned users mostly struggled to provide information to register their pets. I also might have focused to much on registering a pet instead of the adoption process. I feel I lost my focus on the real design problem and focused on empathizing with the users I had interviewed. My design thinking started to think of solutions for the registration process instead. I did my best to design the solutions for the persona and pain points I had identified.

Next Steps

1

Updating the UI elements of the designs I felt they still can be improved

2

Improving the registration process. Usually you adopt animals from animal shelters instead of registering them. Creating another empathy map to correct this pain point.

3

Conduct another usability study with another group of users who had adopted pets