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.
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.
I conducted half hour conversations with people experienced in organizing volunteers, caring for cats, and/or running Catcalls. I asked them about the following:
After reviewing the exploratory interview notes, I affinity mapped the comments in FigJam. This helped establish overlapping themes.
Referring back to the affinity map, I established a persona to focus the scope of the project.
After brainstorming, I focused on three features that would keep the site simple and straight-forward.
I next designed three separate user flows:
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.
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.
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.
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.
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?
Which foster carers are available and right for this particular cat?
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?
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.
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.
%20(1).png)
.png)
.png)
.png)
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.
<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>
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.
As the last step, the three main screens easily went into fully responsive mobile layouts, since they were built on a grid.
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.
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.
