ACRA Pet Fostering

A responsive mobile and web site to streamline the foster application process.


How might we help organizations rescue more animals using a mobile and web site?

Roles: Interaction Designer, UI Designer, Project Manager
Tools: Figma, Miro

My team designed a responsive web solution for adopting/fostering a pet during the pandemic. I defined our team’s mock client to be the fictitious Allegheny County Rescue Association (ACRA), a collection of all the animal rescues in Allegheny County, Pittsburgh. ACRA and the rescues part of it were stakeholders, and animal foster candidates constitute our direct user.

We created a mobile and web responsive site for foster candidates to peruse available pets and to apply. We integrated micro-interactions for a more meaningful and engaging experience in the form of animations and modular content. Our site puts the user at ease, creates a pleasant experience, and brings forth transparency to the foster application process. All of our site’s benefits lead to the ACRA’s ultimate goal of saving as many animals as possible.

I was responsible for the overall interaction design and prototyping. I created the UI for the pet's profile page and application.

Collaborators: Amanda Piccolini, Kelly Yang, Sarah Chen, Victor Grajski
November – December 2020




Usability tests


Walkthrough with John Jonson, a first time foster candidate:

He fills in his information in the application and then submits.

From there, John is taken to the application timeline. His application is currently in review and he excitedly awaits for the next steps of the interview request. When the application has been reviewed, John is notified via text. The timeline is then updated so he’s able to click to schedule an interview.

John begins by looking through Pepper’s profile. He reads a little bit more about Pepper in the given description and then moves on to check out the Profile Match feature, as well as his other potential matches for apartment friendly dogs. John notices that he only matches 2 of the 4 qualities, which could deter less motivated applicants, but John is invested in Pepper so he still decides to apply.

He chooses a time that works best for him and the shelter. He’s most free on December 5th from 2-3pm.

A few weeks later, he is notified that the other fosterer fell through and he has now been accepted to rescue Pepper. John looks through the page and feels encouraged seeing the note from the rescue. He is excited for the next steps in the process and is grateful for the helpful links and resources that are provided.

Finally, after the interview, the rescue team reviews the application one final time before John receives his application results. He excitedly opens the results. Unfortunately he has been waitlisted since the rescue liked his application but thinks that he wasn’t the ideal fit for Pepper. The rescue suggests some feedback to consider and a few other matches. John looks through the matches but ultimately decides to join the waitlist.


Rapid research insights:

1. The application process is the most stressful part of the foster/adoption process.
2. The decentralized nature of rescue organizations make efficient communication difficult.
3. We must mediate relationships pet owners form.
4. Pet owners are willing to make sacrifices.

I clarified the team’s design vision: to create a site that gives transparency in the application process for users that are fostering pets with the intention to adopt them. (detailed research process)

Paper Prototype

We started simple with a paper prototype to uncover gaps between our intention and usability.

I worked to synthesize each team member’s paper prototype sketch. I focused on creating a mobile experience that was explicit in the application steps.

I led two think aloud sessions where the role of the profile match was brought into question. If an applicant only matches half of the requirements, should this motivate or demotivate them? At first, I wanted to choose between having this information compel or repel an applicant. But considering varying responses, I realized I should capitalize on the user’s individuality to suit their needs. If a user is cautious and halfhearted, only matching half the preferences can deter them and save their time. Meanwhile, if the user really likes Pepper, they can still apply. Subsequently we increase the quality of applicants. The profile match filters for more motivated applicants and also helps users make informed decisions, saving everyone time and as a consequence, money.

Our synthesized paper prototype.

Iteration 1

Optimized searches helped customize a user's experience to compensate for an overwhelming task.

In the first iteration of our digital prototypes, I worked on the application page and pet profile page. Many interviewees expressed frustration in their research process because they are unsure how certain breeds fit their lifestyle and there is no single cheat sheet: the breed research process is extremely overwhelming. As a result, many interviewees even skip the research process and go straight to trial and error.

To ease the search process, on the pet profile I specifically focused on having elements of individualization. We assume the user has already created a profile, so I prototyped having a profile match, where the user’s personal information is compared against the rescue organization’s preferences for a foster pet parent for the particular pet being considered. Some examples of organization preferences include house or apartment size, access to a dog park, number of pets.

First iteration screens.

Iteration 2

We needed a cohesive storyline: what does a user do, feel, and think in every step of our prototype?

Our research showed that many candidates feel really dejected after being rejected, especially if no reason is stated. This uncertainty demotivates them from reapplying to foster. Therefore, it was crucial for our rejection page to have a lot of personalized feedback and also include suggestions for animals that match the user’s profile well.

At this stage we also considered the visual appeal of our site. I suggested that we make the tone of our site very friendly and upbeat, to fit the theme of rescuing animals and because our site is meant to be a happy and welcoming experience. At the same time, the site shouldn't come off as careless or casual because we are trying to establish a more official procedure for applicants. As such, we chose purple, and friendly yet neutral color and used a cartoon style image as ACRA's logo.

From critiques, we decided that we must improve the storyline of our site. What happens if the candidate is not accepted? We decided for our next iteration to include an option where the candidate is “waitlisted” because their profile didn’t match as well as the organization would hope, but they still make a promising candidate.

2nd iteration screens.
Design guidelines for our prototype moving forward.


Visual connections between screens ensured our site had a clear objective.

Wireframing gave us a high level overview and made it clear if any steps in our user's process were missing or extraneous.

Mobile wireframes
Desktop wireframes

Iteration 3

The biggest difference between mobile and web was modular content with horizontal scrolling for mobile.

In our final iteration we polished what distinguishes our mobile from our web solution. Mobile screens are much smaller information hierarchy became a priority in terms of order of content as well as typography.

Rescue Profile Match
In the think aloud, the phrase "7 others have applied" had a mixed emotional effect. Since the application process is already stressful and knowing how many others have applied does not provide great benefit, I decided to get rid of it.

There was additional confusing surrounding if the profile match was how well you fit the rescue's preferences or vice versa. I changed the wording and added a descriptive line to clarity this feature.

Waitlist Function
Our initial results page was too crowded. We decided to place the resources lower on the results screen so the hierarchy emphasized the user's next steps.

Because users often feel dejected after a rejection, we included feedback to get concrete explanations why they weren't picked. In our recommendations section we suggest animals that could better match the user's profile.

Modular Content
We used modular content to allow more salient information to stand out. In this page's "Resources" section, it is not our priority for the user to see every helpful article. It's more important they know they have the option to browse through helpful articles, good vets, and recommended products. We made the design efficient so the user does not have to keep scrolling to find all resource categories available.

Future Work and Takeaways

You need real users for real impact.

Through this project I have learned so much about the differences between mobile and web design, which I had not noticed previously. I was also pleasantly surprised by how meaningful our project turned out to be. It focused on a real problem that affects real people, and could be used by the numerous shelters and rescue organizations that suffer from similar issues in their application process.

In previous projects, because we never interacted with real users, I felt my designs were for myself (even though I know I am not the user!). This time I contributed to a solution that I do not directly benefit from, as I have not and do not plan to foster pets. But more than a solution that helps myself, I feel so gratified to know that our team has the potential to impact the lives of other people, organizations, and animals.

If I were to continue this project it would be imperative to do usability testing or a heuristic test to understand how the site works in practice. A feature I would add is a way to donate to the rescue organizations; this would further incentivize ACRA to adopt the site because it not only saves, but also generates money for them and the rescues. I would also want to design for more screens such as tablet browsers and notifications for apple watch.