Catcalls Animal Rescue

Efficiently match stray cats with caring foster parents in an easy-to-use dashboard database.


A simple spreadsheet doesn’t give enough structure to organize matching cats with carers. The stakeholders have ADHD and find them overwhelming.

The Catcalls organizers are short on time, as they have day jobs, so they tend to reach out to potential carers in alphabetical order, instead of by fostering priorities. This current process is inefficient, and some carers are underutilized.

View Prototype

What I Did

  1. Interviewed stakeholders and users to identify needs and frustrations in organizing volunteers.
  2. Synthesized findings with a competitive analysis, persona, affinity map, and insights.
  3. Ideated features and brought possible solutions to life in low and high fidelity designs.
  4. Prototyped, tested, and iterated based on a prioritization matrix.


Research and UX/UI Design


2 weeks (April 17 - 30, 2023)


Responsive Website


Figma, Zoom, Google Suite



  1. ✍🏽 Explore the information management processes and priorities of Catcalls Rescue's current employees.
  2. 🔎 Discover how animal rescues organize and store operating information.
  3. 🖥️ Assess existing digital products for stray animal documentation.

I started by meeting with Jackie, the co-founder of Catcalls, to establish expected parameters and stakeholder priorities.

To make sure all of the current information her team collected would be included, she shared her Google Sheet and intake forms.

We decided to maintain the existing Catcalls' logo and color scheme from their forward facing website.

Assessing existing products

ADHD inclusive UX practices

  • Reduce visual clutter.
  • Information should be noticeable, distinguishable, and interpretable.
  • Gamify elements for a sense of novelty.
  • Maintain clear design patterns.
  • Provide reminders and tooltips for limited short term memory.
  • Fonts and symbols should be clearly defined and differentiated, so their meaning is clear at a glance.


I conducted half hour conversations with people experienced in organizing volunteers, caring for cats, and/or running Catcalls. I asked them about the following:

  • Experiences and feelings around organizing volunteers.
  • Processes of recording and accessing  volunteer information.
  • Systems and tools they use to organize information.



After reviewing the exploratory interview notes, I affinity mapped the comments in FigJam. This helped establish overlapping themes.

A frustration from a Catcalls organizer.


Referring back to the affinity map, I established a persona to focus the scope of the project.

No items found.



  • How might we streamline the documentation process in one place, so all of the workers can reference the same material?
  • How might we make editing and updating information in the database easier, so quick changes can be made to improve accuracy?
  • How might we present carer and cat information in a visual and digestible format, so workers aren’t overwhelmed by data?
  • How might we automate matching cats in need with foster carers, so resources are efficiently utilized?


After brainstorming, I focused on three features that would keep the site simple and straight-forward.


I next designed three separate user flows:

  1. Add a new cat to the database.
  2. Complete a priority task from the To Do List
  3. Find a specific cat in the database and match it with a foster carer.

In order to view the product's logical page connections and user input screens, I then combined everything into one main user flow.



The homepage need to have high priority actions and at-a-glance statistics. This includes the To Do List widget, "Add a Cat" button, "Newest Cats" cards, a calendar for scheduling things like meetings with foster carers, and a Petfinder feed (they offer an API) to show Catcall's latest postings.

Search Results

The cat and carer search results can be presented as cards with pictures, so it's very visual and reminds users of everyone's identities. This appeals to the ADHD considerations, and also clarifies things if, for example, more than one cat is named Snowball.

Cat Profile

I came up with a few different options for this page. I tried out visualizing some of the cat's data with some scales of options, and played around with putting the "potential carer" section at the bottom, to the side in a drawer that could slide out, and at the top.

I created both a blank cat profile, that would serve as the form to fill in when adding a cat, and kept the similar structure for the completed cat page. That way, when the user goes into the page's edit mode, it's the same familiar pattern.

Add a Carer Popups

When the user decides to assign a carer to a cat, it goes through a series of popups, so they don't need to leave the page and can exit easily at any time. They also get confirmation along the way of completed actions.



Style Guide

  • Catcalls wanted to maintain the same color palette and logo as their forward-facing website, so I didn't need to fully rebrand, just add a few neutrals.
  • I changed the font to Work Sans, because it has a clear delineation between the symbols LlIi1, which is better for neuro-divergent text scanning.
  • I needed to create an "add a cat" icon, so I made it match the Google Materials set by replicating their existing patterns.

UI Kit


I developed four use cases to test, based on the non-profit's priorities.

#1:  I just found a new foster cat named Jellybean. How do I record his information?

I want to easily add a new stray cat in the system. How long will it take to enter the data in the right place?

#2: How can I assign Jellybean to a foster carer?

Which foster carers are available and right for this particular cat?

#3:  How do I change a foster cat’s assigned carer?

Edgar is a cat that now has medical issues, and his current carer would like to step back from his care. How can I find him another option?

#4:  How do I quickly make sure the foster carer is appropriate for the job?

Moira is available take Edgar on as a cat. Is the information in her profile useful and easy to scan?


Four adults with animal rescue and/or volunteer management experience tested the prototype in recorded Zoom meetings.

Usability Scorecards

I watched the test recordings, and then filled out detailed spreadsheets for each participant.
Timing the tasks and asking for ratings  added quantitative data points.

A snippet from the scorecards.

Task Completion Rates

  • Task 1 (success < 5 minutes): 5/5
  • Task 2 (success < 3 minutes): 5/5
  • Task 3 (success < 4 minutes): 5/5
No items found.

Impact/Effort Matrix

To determine priority iterations for my narrow timeframe, I mapped out the testers' comments. The gray post-its were given more weight, as they were suggested by more than one person.


New Icon System

  • The users needed help visualizing the match-ability of caregivers to foster cats.
  • The original icons were confusing, so I needed to establish an understandable and recognizable system.
  • The icons went on both cat/carer cards and profiles.
  • The cats show their adoptable status on the card the left and their disposition and cat type to the right.
  • The carers show their availability and the types of cats they would take.

Card Hover State

  • Originally the default thumbnails had each individual’s contact info. I decided to prioritize the symbols instead.
  • In the hover state, the card enlarges to now fit the contact information.

<note_text>NOTE: Theoretically, Jackson Jones would accept all cats of all types, so his symbols are at the maximum. However, in speaking to the Catcalls organizers, this guy would be extremely rare - most people only accept a couple of types of cats.<note_text>

New Cat Form


  • The black header box was removed to increase negative space.
  • The cat paw icon switched to the "add a cat" icon.
  • Separate space and new wording was added for the file upload option, to make it stand out.
  • I reduced all of the margins and padding, so more information fit well in one screen.
  • The "surrendering person" and "location found" options moved to the middle column, because the third column was now full.

Status Details

To reflect the new icon designations, I added a "Cat Status" drop down menu and changed the Adoption Status bar.


An “Adoption Forms” section was added to the navigation rail for easy access.

Carer Profile

  • The “Preferred Cat Types” dropdown changed to a static “Willing to Take” section and moved to a more prominent position.
  • I also took out the map under her address, to reduce the information overload.

Cat Profile

  • To feature the cat info icons more, they were enlarged and moved under sex/age line with added spacing.
  • Removed the colons from sections. This was more consistent with the layout on the other pages.

Mobile Views

As the last step, the three main screens easily went into fully responsive mobile layouts, since they were built on a grid.



Development and Further Testing

Jackie's partner is a software developer, and he was enthusiastic to make this a real product. It would useful to develop the site and then test the usability with actual data and real-life situations. From there, we could tweak the product with iterations to fit the specific needs of the organization.

What I Learned

Simplifying and visualizing cat and carer information was the biggest challenge. Since the whole idea of a backend system is organizing and accessing detailed data needed to run the organization, I couldn't just edit a lot out. It had to be sorted and separated into bite-sized pieces, in a logical order, so my users were able to scan the pages and quickly find what they needed.

I also didn't come into this project knowing anything about cats or animal rescue programs. (I'm very allergic and usually keep my distance.) In order for the product to make sense, I had to learn a lot about tracking a cat's health, appealing to cat adopters, and structuring foster programs.