Connecting rescue animals to more foster homes

Intro

A nonprofit tech company that empowers animal rescues to connect with each other, fosters, and other rescue advocates in order to move animals from overcrowded, high-kill areas to places where they’re more likely to be adopted. 

Problem

Improve site navigation to increase the number of animals matched to a foster.

Process

The section takes a deep dive into understanding the user (John) by forming user stories, conducting usability testing, and understanding the website’s current navigation.

Understanding the Information Architecture

Understanding the different paths users currently take to complete user tasks

Understanding the User

John’s priorities are:
-Get as many fosters matched to his animals.

John’s current pain points:

• Create an account
• Manage animals
• Manage foster applications

John’s journey

1. John adds more animals to his shelter
2. Learns about
3. Browses website
4. Books a call
5. Is guided through organization registration
6. Adds animals via Petfinder
7. Receive foster application via email(?)
8. View foster application
9. Approve application
10. Initiate the fostering process with the applicant
11. Animal is transferred to a foster home

User Stories

User stories helped to understand context, motivations, and the desired outcome:

• When browsing, I want to locate where I can sign up so I can start using their services to foster my animals
• When I have an account, I want to add animals so my animals can quickly get matched to a foster

Find navigation friction through usability testing

Task: How would you sign up your organization?

Task: How would you add an animal your organization has rescued/is sheltering?

Prioritizing fixes based on usability testing, stating assumptions, constraints, and trade-offs.

1. Manage animals: All participants had trouble finding where to add animals
2. Create an account: 2/3 of the participants had difficulty finding where to sign up

Assumptions:

1. John is using the platform for the first time.
2. John will not book a call to be guided through sign-up.
3. John will upload animals immediately after submitting his organization form.
4. John only has one organization to submit.
5. John is not fostering any animals.

Constraints were introduced:

1. Work within the website’s current navigation.

Trade-offs were introduced to focus on John achieving his goals:

1. Usability above aesthetic
2. Use existing components/patterns already found within the platform.

Brainstorm

Suggested edits

1. Prioritizing increasing the # of animals that are matched to a foster”:
   -Clearer language for CTA buttons: “become a foster” and “get foster” in order to entice fosters and AWGs to take action (sign up).
   
   -Placed above the fold, buttons are larger
   
   -In order for animals to get matched, a solution is needed to solve AWG pain points of creating an account. -> Testing showed when not guided, users had SOME difficulty finding where to sign up as an AWG.
2. Moved to 4th row:
   -Segway into “how can you help” row, since there’s a “Donate”
   button in the nav bar and in the footer”, and all 3 direct to
   same page.

1. Show login:
   When AWGs land on “redacted”, they are greeted by “You must be logged in to list your organization” and instructed to log in to create an account. To reduce clicks they are now shown a similar version of the login page.
2. CTA button to register self:
   “Create an account” text link is replaced with a CTA button to encourage users to create an account.

“I feel like I got lost on the way . It much felt like it was designed for people looking for dogs. Not for posting dogs.”

1. Hierarchy:
   -I decided to break up the wall of text according to two different users.
   -Test platform message was moved up as this is an announcement that needs to be seen right away by users.
2. Show AWGs where to find their organizations = Tab bar:
   AWGs need to upload animals and check foster applications. Usability testing shows that they had difficulty finding where to do anything related to their organization, tucked in a drop-down menu. This could be due to the gray color of drop-down menu.
3. Addressing confusion:
   Removed black background due to inconsistencies in live version and largely because it drew attention to browse animals. This resulted in confusion during usability testing to do AWG related tasks.

“I had to go real deep to add animals”

1. “I had to go real deep to add animals”:
   Used a similar table layout that’s seen often in this space. At first glance, you can see what AWGs can do within “my organizations” instead of clicking a newly appeared drop-down menu (manage organization).
2. Breadcrumb navigation:
   New tab bar will not be visible on mobile however secondary navigation aid that improves customer experience by helping users understand their location on a website.

1. “I had to go real deep to add animals”:
   Moved “add animal via form” and “import animal Petfinder” button above table for more visibility. “Add animal” drop-down is less visible on mobile, this could be due to the dark gray color that may look inactive to some users.
2. Consistency:
   Changed “Animals” text to “Manage Animals” for consistency

Retrospective

Usability testing of the website’s current navigation showed confusion on where to sign up as a shelter or rescue. The current website prioritized the “Donate” button and “Why Foster” buttons above the fold. The main goal is to increase the number of shelters and rescues to sign up through the website and thus the suggestion to move the “sign up” button above the fold ensures that those who are looking to match their animals suggest a likelihood of the user to register more with ease. Due to time constraints, I would like to do A/B testing to see which design would increase conversion rates. I would also like to do tree testing to further confirm.