Purrfect Cat Adoptions
Increasing the adoption rate by designing a profile information card
Design challenge
Thanks to Freepik.com for the beautiful mockups used in this case study.
Background
Purrfect Cat Adoption wants to increase adoption rates for their cat adoption shelter. They are a small business, with only one brick and mortar shelter.
They have a page showing all of their cats, but no individual pages for each animal. Preliminary research shows that adding information cards might increase adoptions rates for their organization. They’ve asked me to come up with a proposal for how we might design those cards.
My role
This project was spec work, and won't go into production. I led research, built screens and mockups, and designed the cross-selling effort as a one-man shop.
Project overview
This project was a one week sprint aimed at shipping a design proposal. I break the process into four parts:
Tools
Review the requirements
Purrfect Cat Adoption was firm about wanting certain things included in the design.
Must include the animal's:
✅ Name
✅ Age
✅ Weight
✅ Gender
✅ Breed
✅ Photo
✅ Description
Must allow the user to:
✅ Start the adoption process
✅ Send the profile to someone else
✅ Return to the gallery
Provided insights
Purrfect Cat Adoption provided some insights with their brief.
• Informal research suggests that people are reluctant to adopt cats because they’d like more information
• Adopting a cat can be a scary process
• 76% of users access our web site from a mobile device
To make the process less scary, I'll focus my UX Writing on making the solution feel friendly and helpful.
Because most users are using mobile devices, and because time is a significant constraint for this proposal, I'll design for mobile first.
Desk research
According to
research conducted by Maddie’s Fund, there are some key factors that drive adoption behavior.
• Pride / social responsibility / kindness
• A friend recommended this particular shelter
• Knowledgeable staff
• Joining a community of adoptive pet parents
At every turn, I'll try to play up the
altruism angle with the language I choose to use.
I'll include a
live chat option. This should link directly to the adoption agency's live staff, which would be tricky in a larger org, but should be doable with one storefront. I'll also include a
tab with contact info in the navigation bar, in case people prefer to talk on the phone. The goal here is to make potential adopters feel like they can
access the staff easily. This idea was driven by insights from both the Maddie's Fund study and limited, but poignant user interviews (quotes below).
I'll also include a
Community tab in the design. The idea there is to
foster connections between adopters. Designing the whole portal is
outside the scope of this project, but it could take the form of a message board, blog site, or both. There can be a calendar of events, which can help build community and drive adoptions.
Interviews
I talked to 3 cat owners about their cat adoptions. I wish I'd interviewed at least 8-10 people, but time and resources were very limited. Nevertheless, two standout quotes drove features in the design:
“First I picked my kitten by looks, but ultimately I picked my cat by personality.”
“I really liked that the platform included contact info so I could contact the seller directly.”
The first quote ultimately inspired the personality chips feature, and was backed up by further research. The second helped legitimize the contact info tab that I intuitively wanted to include in the navigation bar.
Competitive analysis
I looked at 3 local adoption agencies, 1 selling platform, and 2 adoption agency aggregators to see how they approach the problem. I documented four things about each one:
• Gallery page structure
• Gallery page contents
• Info page structure
• Info page insights
I mostly used these insights to compile a list of commonly included features for the card sort, coming next.
Information architecture
I was curious which parts of these cards were most important, and if any pieces of information were completely unimportant. To figure this out, I did a card sorting exercise.
I loaded every type of "info included" from the purple info card chart above into Optimal Sort, and added some other statistics that I thought of, or that were mentioned in the interviews. I asked people to assume they'd already decided to adopt some cat, and now they're trying to decide which cat to adopt. I asked them to rank each piece of information in order of importance to their decision.
I also included a bucket called "Not important at all," which they were free to put items into.
I collected ten responses to the sorting exercise, and then ranked the averaged scores in a Google Sheet.
The list on the left is sorted by average list position. A lower number is more important to people polled, because they ranked it closer to the position 1 on the list.
The list on the right is sorted by number of "unimportant" votes. A higher number is less important to people, because it has been marked unimportant more times.
This quantitative research data validated the qualitative interview insights. Interviewees said personality was important, and this data showed that personality was the most important trait. I used this info to drive the decision to show personality two ways: the TLDR personality words at the top of each cat's profile, and the longer in-depth description below.
This study also highlighted that a pair bond was the second most important trait when choosing which cat, which clued me in to a possible cross-selling feature to build into the design. After all, the purpose of the product is to get more cats adopted, so anything I can do to increase the adoption rate is added value.
Building the cards
I did two rounds of wireframing, and then composed the final proposal with Material Design components.
Some alternate wordings I considered were:
help save a cat
do the right thing
get this cat off the streets
give this cat a home
save this cat
The second wireframe is already thinking in Material Design components. The biggest difference here is adding word chips below the image, which the adopting agency can use to quickly describe the animal’s personality.
With both wireframes and my research complete, I pulled items off of the Material Design stickersheet to build an image quickly.
Many people I’ve talked to like to scroll pet adoption websites before they go to sleep at night, so I designed this in dark mode. For a build, I recommend building both dark and light mode.
1. Using friendly language to create a bond and imply a relationship
2. Meeting design requirements with name, gender, age, weight, and allowing visitors to share this profile with a friend
3. A save-for-later feature lets visitors collect profiles they like
4. The picture stays on screen as visitors scroll through the text below
5. Pair bonding ranked as the second most important factor in quantitative analysis; the bonded animals' names appear in the same green color
6. These chips give an overview of the animal's personality
7. Meeting design requirements of breed and description; this area scrolls independently of the photo carousel above
8. Meeting design requirements of returning to gallery and starting the adoption process; these button float, inviting visitors to start the adoption process
9. The image card seems to grow out of the gallery page, which is still slightly visible behind it; this implies the information was contained in the gallery all along, and that more is available
10. The nav bar includes tabs suggested by interviews and research, allowing easy access to contact info and building community
Adding value
What is the goal? The goal is to adopt out as many cats as possible. To that end, I added value to this proposal with a cross-selling feature based on animals’ pair bonds.
This language uses the desk research insights from Maddie’s Fund. Since altruism seems to drive adoption behavior, I use language to tug the heartstrings.
Next steps
I front-loaded this project with research and brought it to its first hi-fidelity iteration. Next steps for this project would be testing, iterating, and collecting data to explore which parts of the design truly drive adoption behavior. Some questions to answer are:
• Are there parts of the design that people ignore?
• Can they complete all the needed tasks?
• Is there a part of the design where people drop off?
This is a proposal, not a finished product. I’d also want to:
• Build a light theme
• Explore what all of the menu items lead to
• Create the desktop web experience
• Get a color palette from the agency to move away from default colors
• Restructure the "Welcome to the adoption process!" screen to engage visitors with a friendly illustration
Constraints
The biggest constraint for this project was time; the entire project was a one-week sprint. The time spent collecting research insights up front led directly to features included in the design, and it was time well spent. If I’d had more time, I would have invested it in several rounds of user testing with the hi fidelity mockups, creating a light mode and desktop web interface, and creating a working prototype.
Final results
The screens I created for the Purrfect Cat Adoption proposal were heavily based in research done up front.
They take the user from a gallery view, open a dismissible card with an animal’s information, and they allow the visitor to move into the adoption process flow. I’ve also included an open menu screen for reference, and a cross-selling feature that would populate when two or more animals are pair bonded.
End
