top of page

Cat Collab

Creating a coordination hub for groups that help homeless cats

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

Discover

Researching the problem space and finding user needs

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?

Methods

  • Secondary research

  • Competitor analysis

  • User interviews

  • Field Study

Secondary Research

I found several sites related to TNR, 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.

Key Insights

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

  • Only 2% of community cats are spayed/neutered

  • Cats account for about 50% of total shelter intake

  • About 71% of cats in animal shelters are euthanized

  • Cats are the least claimed animals at shelters

  • Killing or removing cats from a territory is ineffective

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. I was designing a process that doesn’t exist prevalently, but still needed 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 went to a live trapping to see things first-hand. Due to scheduling and timing, this happened after research. I still wanted to try out this research method and see what insights might come through. I learned what goes into setting up traps, and did some impromptu mini-interviews. I came away with much more empathy for the volunteers and the cats.

Affinity Diagram

After taking notes from the interview recordings, I clustered common themes from user comments. This gives a top level visualization of the main problems that need to be solved.

Affinity Cluster_Image.png

Research Insights

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

Needs

  • Streamlined communication methods

  • More clinics over a wider geographical area

  • Educational outreach to make things smoother

  • Mobile phone coordination for in the field

Pains

  • Planning is hard due to scheduling

  • Overwhelmed with multiple channels of communication

  • Ignorance and miscommunication hurts coordination

Define

Define

Setting our goals and priorities to solve the problem

Persona

I synthesized the persona based on the interviewees’ demographic data, and common themes discovered in the affinity diagram. The persona is a volunteer since most coordination is done by them, and most of my participants were volunteers.

Cat Collab_Persona.png

Emotional Journey

Informed by the interviews and persona, I created the emotional journey to visualize the user's feelings at each step of their current process. This helped me to empathize further, and to explore opportunities to improve the pains in the experience.

Cat Collab_Emotional Map.png

Business Model Canvas

I made this to consider all the building blocks for starting a business or non-profit, laying out the overall value proposition and logistical needs. It was an interesting and  challenging experience, 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

Feature Roadmap

The research into existing animal related organizations showed there are many potential tasks for users, but I needed to map out what was essential for the phase 1 MVP. The hypothesis for the need of streamlined coordination for TNR efforts was validated with research, so I focused on designing the product as a project management tool, while also listing out what would in later phases.

Design

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

Card Sort

In addition to looking at other website patterns, I tried a card sort to guide the information architecture of the pages. Unfortunately, I had a very low turnout of only 6 participant, 2 of which abandoned the sort. It was a hybrid sort, so that I could test my assumptions of what categories would mean while also allowing the participants to create their own categories. Overall, there wasn't enough consensus for it to be very useful, especially with such a small sample set. I standardized the cards based on what little insight I gained from the card sort, along with my own intuition based on research.

Sort Details

  • Remote via Optimal Sort

  • 6 participants

  • 4 completed, 2 abandoned

  • 30 cards

  • Hybrid card sort

    • participants could create their own categories​

    • 5 pre-made categories

Sitemap

With slight help from the card sort, I moved on to creating a sitemap to plan the page structure and keep tabs on the pages to design for the main task flow.

Cat Collab_Sitemap_V2.png

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 covers the primary purpose of the site, a hub for planning and communication.

Cat Collab_Task Flow.png

Sketches

With my task flow as a reference, I started designing and screens with Crazy 8s sketches.This rapid ideation exercise was pretty challenging, as it was my first time doing it. I didn’t always succeed at making all 8 ideas in 8 minutes, but I still did do more exploration than I normally would have. I learned that I need to improve my rapid ideation skills. It would be fun to do this exercise with a team!

Wireframes

After sketches were completed, I used them as a guide for the lo-fi wireframes. I had to choose or combine aspects of the various sketch ideas to go forward with. I went with what seemed most comfortable to do with one hand and didn't feel too overwhelming.

Mobile Wireframes

Research showed most volunteers use their phones for communication during coordination and while in the field, so the main task flow was done in this format.

Mobile_WF_All.png

Desktop Wireframes

These are responsive designs for the desktop home page.

Desktop_WF_All.png

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 they are more fun and it worked better with the brand. These are stock illustrations of the cats.

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

The components I created while making the UI designs were organized and  put into this kit and library.

Cat Collab_UI KIT_Horizontal.png
Cat Collab_Components.png
Test

Test

Building a prototype, usability testing, and revisions

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 didn'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.

Usability Tests

With the prototype done, I started drafting a plan and recruiting for usability testing. This was my first time using doing a remote, unmoderated test. It was easy to set up and analyze the data, but I do wish "success" criteria could be more strict.

Participants

  • 10 tests

  • Activists

  • Non-activists

  • No age captured

Interviews

  • Remote and unmoderated

  • 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 observations and insights taken from the usability test.

Gains

  • Brand felt friendly and helpful

  • This idea could actually help organizations

  • Tasks for most users were easy

Pains

  • Users struggled most with sign in

  • Inconsistent user behavior with the calendars

  • Checkboxes were too small

  • Some instructions were not followed or were misunderstood

  • Volunteer recruiting should be in one step

Priority Revisions

After analyzing the Maze data, along with the feedback given, I fixed the most common issues.

  • Added instruction text on login page

  • Moved instructions for map to top of canvas

  • Made keyboard elements clickable when searching

  • Added instructions for calendar interactions

  • Removed tabs and made recruitment one screen

  • Increased the size of the check boxes

  • Added additional checkbox disabled state

  • Made filters functional on map screen

Revisions.png

Final Prototype

After testing and prioritizing revisions, I updated the prototype.

Reflection

Reflection

Thinking back on lessons learned and future plans

What I Learned

The subject matter was new to me, so the research phase was engaging and I understand its value even more now. I was surprised to see so many of my assumptions and hypotheses proven wrong, which just shows the importance of usability testing! 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 setting up Figma files and design systems, as well as learning interactive components.

Next Steps

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

Other projects

bottom of page