1. OVERVIEW
  2. Problem Definition
  3. Solution
  4. My CONTRIBUTION
  5. Generative Research
  6. Journey Mapping
  7. Personas
  8. Storyboarding
  9. Wireframes
  10. Experience Prototyping
  11. Design Decisions
  12. Brand Identity
  13. PRESENTATION
  14. REFLECTION

Cat Vitae

User Research | UX DESIGN
An app where users create and maintain profiles for specific cat(s), alleviating pain-points for those who foster or adopt cats.
Team: Bidisha Roy
October 2019 — December 2019

MY ROLE

  • User Researcher
  • Project Manager
  • Strategist
  • Client Presentation

CONTEXT

In Partnership with Metro 21 and the Heinz College, Arts Management at Carnegie Mellon University

METHODS

  • Observe & Intercept
  • Affinity Clustering
  • Think Aloud Protocol
  • Storyboarding
  • Speed Dating
  • Experience Prototyping

Problem Definition

How might we improve a new cat caretaker’s experience by reducing questions and uncertainties about the cat and its needs?
Those involved in the pet adoption process face many barriers, some physical and some psychological, which can prevent successful adoptions. There are pain-points before, during, and after the adoption, and my team explored how technology could help.

SOLUTION

An app built for multiple users throughout the cat adoption process.
• Shelters
• Foster networks
• Adopters
• Eventual cat-sitters
FEATURES
Shelters and foster networks use CV to collaboratively create a record for a new cat off the street
After creating a profile for a cat, users can update individual sections, including Background Story, Care Instructions, Food Preferences and more. CV also has a robust Medical Information section, perfect for keeping track of vet appointments and vaccinations.
At adoption, new pet owners receive a wealth of information unique to their cat.
In one location, adopters can find their cat’s history, food preferences, and temperament, so they feel as prepared as possible embarking on the decision to adopt.
Cat owners can easily share care instructions through their cat’s public profile.
After updating their cat’s profile, it’s easy to share CV as a comprehensive list of anything a cat-sitter would have to know,

My Contribution

Me and my teammate shared UX research and design roles, but I took on the responsibility of branding.

Generative Research

We started by exploring current websites related to Pet Adoption and collecting a list of stakeholders.
We found that many foster organizations and shelters rely on third-party websites such as PetFinder and Adopt-A-Pet to keep track of their available cats.
We then conducted guerrilla research in the field, speaking with a diverse set of pet owners.
We talked to representative ‘adopter’ stakeholders: a worker at a cat cafe, a man who had adopted a cat off the street, a longtime pet-store owner who partnered with local shelters, a man who had unknowingly adopted a dog from a ‘puppy mill’, and a woman bartender who had recently adopted a cat from a nearby shelter.
We scheduled an in-depth interview with a board member of a foster organization, to understand the service-provider perspective.
During this interview, we learned about the pre-adoption process: from trapping and neutering through fostering.
> Interview Insight 1
Unstructured, manual organization
Smaller foster organizations do not have an organized system for medical records or appointments, and instead just rely on one volunteer’s phone’s calendar apps. They do use PetFinder as a database for all their cats, and create a PetFinder page as one of the first steps once they intake a cat.
> Interview Insight 2
Seasoned fosters vs volunteer fosters
There is a discrepancy between ‘seasoned fosters’, who have lots of experience dealing with ill, injured, untrained, and feral cats, and more regular volunteer fosters who aren’t as comfortable with such things. Often times, after a cat is captured, they are kept in the care of a seasoned foster and quarantined until all contagious illnesses are ruled out; then they can be given to a volunteer foster.

Journey Mapping

We combined the wealth of our research into two journey maps, one for “customer” and one for “service provider.”
For each Action, we listed out Devices & Systems, People & Environments, Feelings, and Thoughts (using quotes whenever possible). From there, we mapped the trajectory of their emotional journey with a simple line chart, indicating where the journey was most joy-inducing and where the user struggled most. These troughs helped us identify the most salient pain points, and thus the opportunities for our eventual design.

Personas

We extrapolated those two journeys into three personas, ensuring that the most salient pain-points from the journey maps were present.
These personas would become integral to our design process, and we kept them topof mind throughout our further brainstorming and design. We wanted to ensure ourdesign solution would help ease the burden of all three personas.
AJ, The Potential Adopter. Sam, The Volunteer Foster. Teresa, The President of the Foster Network.

Storyboarding

We then began identifying pain points with opportunities and ideating solutions.
We came up with roughly 25 various problems, including the adopter perspective and the foster network perspective. We narrowed these down to 13 problems of which we wanted to explore potential responsive web solutions through scenarios. From the scenarios, we chose 7 to storyboard for speed-dating.
With our 7 storyboards, we conducted Speed Dating sessions to validate the user needs we identified.
We tested our seven storyboards with three participants and gained valuable insights on our designs. The two storyboards that rose to the top were the “cat care card” and the “cat compatibility rating.” We planned to re-test these two storyboards in additional speed dating sessions, but before we did so we made a few key tweaks based on what users liked and disliked in the first sessions results. In the end, the “cat care card” rose to the top as the most impactful solution.

WIREFRAMES

Paper prototyping helped us align on the app’s flow and sitemap.
As we moved into the Paper Prototyping phase, the first step was to align on the overall sitemap for the app. Our first iteration of the organization of screens had four main pages:
● Bio > About | History
● Care Instructions > Food/Water | Play | Medical | Litter
● Preferences > General | Food | Entertainment
● Safety & Tips > Safety | Tips

In the second iteration of low-fidelity wireframes, we ended up moving Safety into Care Instructions, and Tips sprinkled throughout, wherever relevant. The final sitemap organization changed to:

Revised Screen Map
● Bio > About | History
● Care Instructions > Food/Water | Play | Medical | Litter | Safety
● Picks > Interests | Disinterests

Experience Prototyping

Once we had mid-fidelity wireframes, we created an interactive prototype with actual information about my cat, Hipaa.
We tested this with my cat-sitter, when I was out of town for a week. This was a use-case that came up in the speed dating research, on whether the “cat profile” would be useful to update and send to a cat-sitter.
We sent a link to an interactive Figma prototype to the cat-sitter, and asked her to look at it on her phone during her first visit and record her overall impressions on the interface, the experience, and the content.

It was helpful and validating to test the design in a real potential use case. Overall the feedback was positive, with the criticism falling mostly under Heuristic Evaluation usability issues.

Design Decisions

1. Ensure legibility through large fonts and organized information
Accounting for users of all ages and varying levels of vision, we increased all font sizes to 16 pt.
2. Prioritize Safety
We learned from our research that safety was a huge concern for both foster organizations and adopters, and thus we always wanted Safety clearly visible on the Care Instructions page.
3. Segmenting information into “info” pop-ups
This freed up screen real-estate, which was essential for smaller mobile displays.
4. Recognition over Recall
In edit mode, the app provides suggested answers wherever applicable, rather than leaving blank boxes for inputting information. This exemplifies the usability heuristic of ‘Recognition over recall,’ which states that an interface should allow users to ‘recognize’ information rather than being forced to ‘recall’ information.

BRAND IDENTITY

I took on branding our app, creating the name and the logo for Cat Vitae.
We decided on the name “Cat Vitae”, or “CV” for short, so users could ‘hand off their cat’s CV.’ We wanted the logo to be simple, focusing on the catchy acronym of “CV,” positioning the letters to represent an abstract cat. We went through a few options and ultimately ended up with one that added simple cat ears to the “v”, to make the outline of the cat a little more clear.
We used demographic-neutral colors to represent a wide audience base and utilized rounded shapes and zig-zag patterns to add a spark of delight.

Presentation

To pitch our app, we showed how our 3 personas would use CV during the intake and adoption journey of one cat: Soda.

Reflection

With user-generated content, the design’s layout needs to be as scalable possible.
Our first designs had paragraphs of text in the content. We quickly came to realize that our design needed to work for multiple use cases: as much or as little information as the user chose to enter in. Segmenting the content into categories and relegating free-form text to 'info' pop-ups helped us solve this scaling issue.
We are not the users!
Me and my team member, Bidisha, had both just recently adopted cats when we received this assignment. While we were able to start with some knowledge of the domain, we were insistent never to rely on our personal experiences. As such, our designs explored issues of internal foster organization communication and treating ill cats that need consistent medical treatment.