top of page

Cat Collab

Overview

Cat Collab is a hypothetical non-profit focused on utilizing the trap, neuter, release (TNR) method to control the community cat population and keep the cats out of shelters. It strives to be a centralized hub for TNR coordination and activism.

Timeline

4 weeks

Role

UX/UI Design, Branding

Discover

Research to find user needs and frustrations and validate assumptions.

Research Goals

  • What is the data that validates TNR?

  • How do people get started with volunteering?

  • How does coordination currently happen?

  • What are the steps for a TNR process?

  • What are some frustrations and obstacles?

  • How do we reach out and get organizations, groups, and vet clinics involved?

Methodologies

  • Secondary research

  • Competitor analysis

  • User interviews

  • Field Study

Secondary Research

I found several sites related to the subject, looking to understand it and how effective it is. Sources ranged from big organizations like Best Friends, to smaller volunteer sites like TNR Texas, and research articles like this one.

92% of kittens in the U.S. are born to free-roaming cats.

Cats account for approximately 50% of total shelter intake.

Cats are the least claimed animals at shelters.

Only 2% of community cats who are spayed/neutered.

71% of cats that enter animal shelters are euthanized

If cats are removed from a location or killed, it creates a territorial opening that will not remain empty.

Competitor Analysis

All involved in this effort are not really competitors, and they all collaborate with each other to some extent. However they do have variations in procedures.

 

Since I was designing for a process that doesn’t really exist prevalently, I looked at some common tasks to get a sense of navigation patterns.

Competitors.png

User Interviews

I recruited people who were involved in TNR regularly, or who at least had performed it and been part of coordinating with other people, as this was a niche need and it needed specific insights.

Participants

  • Active in TNR

  • All female

  • 2 volunteers with jobs

  • 2 animal rescue employees

Interviews

  • 3 remote via Zoom

  • 1 phone call

  • Recorded for analysis and notes

  • 35 - 45 min duration

The hardest part is the planning and the trapping.

Finding cats, gaining permission, and trapping are the hard and time-consuming parts.

Besides communication issues that arise, transportation is the biggest frustration.

Field Study

I was able to join a trapping and see things first-hand. Due to scheduling and timing, this happened after research. I still wanted to try out this method and see what insights might come through.

 

I learned detailed info on how to trap, and gained more empathy for volunteers and cats.

Affinity Diagram

After taking notes from the interview recordings, I made this to identify common pains and needs of the users. Each color represents a different participant comment. Like items are grouped under a label, which helps to identify related insights.

Affinity Cluster_Image.png

Research Insights

After reflecting on the notes, observations, affinity diagram, I was able to pinpoint the overlaps in the primary research and the user insights to find key needs and pains.

Needs

There is room for streamlined communication methods.

More clinics available in a wider geographical area.

Educational outreach helps the process to be smoother.

Volunteers like to use mobile phones to coordinate, especially in the field.

Pains

Planning is challenging due to different schedules.

Gets overwhelming with communication from multiple channels.

Coordinating with others can be difficult due to ignorance and miscommunication.

Define

Setting our goals and priorities to solve the problem.

Persona

I created this based on the interviewees’ demographic data and common pains and needs discovered in the affinity diagram activity.

 

Since most ground work and coordination involves a lot of individual volunteers, and 1/2 of my candidates match this, I chose to frame the persona this way.

Cat Collab_Persona.png

Emotional Journey

The emotional journey depicts the feeling the user gets at each step of their current process of solving the problem at hand, before any design work is done.

 

It helped to identify qualitative data and discover opportunities to improve the overall experience into a delightful one.

Cat Collab_Emotional Map.png

Business Model Canvas

This method visualized all the building blocks for starting a business or non-profit, laying out the overall value proposition and logistical needs to execute on it.

 

It was an interesting mental exercise to think these problems through, especially with no formal business experience or education. I came away understanding a little more what goes into planning a business strategy.

Cat Collab_Business Model Canvas.png

Design

Ideation and design of structure, user flows, wireframes, and UI elements.

Task Flow

I focused on one critical multi-step task for this project, which was setting up a project and collaborating with others. This flow is at the heart of what Cat Collab is meant to be, a hub for planning and communication.

Cat Collab_Task Flow.png

Wireframes

With my task flow as a reference, I started designing interactions and wireframes, first with Crazy 8s sketches, then digitizing in Figma.

Crazy 8s Sketches

This technique has you create 8 distinct design ideas in 8min for each composition needed. It was a challenge because it forced rapid ideation.

 

I didn’t always succeed at making all 8 ideas in that time, but it was a good first experience using this method. It would be fun to do this exercise with a team!

Crazy%25208s%2520Overview_edited_edited.

Desktop Wireframes

These are responsive designs for desktop.

Desktop_WF_All.png

Mobile Wireframes

These pages were created in Figma based on the task flow and Crazy 8s sketches.

Mobile_WF_All.png

Logo & Branding

The brand is meant to be fun, compassionate, cute, and educational. I looked at color psychology charts on Pinterest to guide in color palette choices.

 

For the logo, I went for a more stylized cat to add to the playful feeling. The wordmark was custom lettering to exaggerate feline curves, and the typography was chosen based on similarity.

 

I chose illustrations over images because all rescue sites have a plethora of real photos, and they are more fun.

Cat Collab_Logo Design.png
Cat Collab_Style Guide.png

UI Designs

Wireframes were updated with real content and brand styles. Master components were directly updated with color and any other properties, but some needed slight  adjustments.

Mobile UI Screens

Mobile_UI Screens.png

Desktop UI Screens

Desktop_UI Screens.png
multidevices_Cat Collab_2.png

UI Kit

Once I had done the UI screens, what was left of the design system and components were put into this kit and component library.

Cat Collab_UI KIT_Horizontal.png
Cat Collab_Components.png

Test

Building a prototype, usability testing, and revisions based on results.

Prototype (V1)

Using the task flow and the UI screens, I created the first iteration of a prototype for usability testing.


I learned the basics of Figma's new interactive components feature. It doesn't work fully yet with auto-layout while in beta, but basic micro-interactions work great and allow you to have much fewer screens for prototyping.

Cat Collab_Prototype_1

Usability Tests

With the prototype done, I started recruiting from research participants, Facebook groups, and students who volunteered to help during group critiques. It included a section for open-ended questions and feedback.

This was my first time using Maze, and it was overall pretty nice. I do wish the scaling options for the prototype made more sense, and that success could be more strict and not based on just getting to the next screen by hitting the right button.

Participants

  • 10 tests

  • Activists

  • Non-activists

  • No age captured

Interviews

  • Remote and unmoderated on Maze

  • Analytics report generated

I am an Etsy seller, and one of my biggest frustrations with their seller app is small checkboxes!

At times, some of the tasks, like recruiting volunteers, took a bit longer than expected as it was divided into two tasks. I wish I could have done the request and the dates all in one go.

A bit difficult. First, it was fairly difficult to read the small print on the phone image. Then it was confusing that dates were picked after the tasks were indicated for the volunteers.

Key Takeaways

These are the main points taken from the usability test and feedback grid.

Users struggled most with logging in, with the highest abandonment and missed clicks.

There was inconsistent behavior with the same calendar interaction pattern on a few screens.

The checkboxes were small for many of the users.

Many instructions were not followed, based on the heat maps of clicks.

Users said volunteer recruiting should be on one step and not split into two steps.

Text was small on the phone image for people using small screens.

Priority Revisions

After analyzing the Maze data, along with the feedback given, I prioritized mitigating the most common frustrations.

Added instruction text on login page

Made keyboard elements clickable on map search screens

Removed tabs and made recruitment all in one screen

Added additional checkbox styling for disabled state

Moved instructions for map to the top of canvas

Added instructions for calendar interactions

Increased the size of the check boxes

Made filters functional on map screen

Revisions.png

Final Prototype

After testing and prioritizing revisions, I updated the prototype.

What I Learned

The subject matter was completely new to me, so the research phase was pretty engaging and I understand its value even more now.

 

I really enjoyed the interaction design during the wireframing and prototyping phase. It taught me how to think more at scale.

 

I have a better grasp of how I want to set up Figma files and design systems, as well as learning interactive components.

I was surprised to see so many of my assumptions and hypotheses proven wrong, which just shows how important it is to test with real users.

 

Designing the cat logo was more challenging than expected, to make it to look undeniably like a cat somewhat unique.

 

With more time, I would start with making the entire task flow for desktop. After that, I would add in task flows for donation, volunteer sign up, and registering a group/organization.

bottom of page