Boosting the adoption rate by highlighting cats' personalities
Overview
The Challenge
Brooklyn Cat Cafe needed a mobile app to help cat adopters find a great match in order to increase the number of adoptions. They also needed to consolidate the many tools they use into one app.
My Role
I worked on all aspects of the design, from research to conception. Throughout most of the project, I worked with a team member; we contributed equally to all steps of the process. I worked on the UI design, prototyping, and testing independently.
Type
Mobile iOS App
Duration
1 month
tools
Figma
METHODS
Research, OOUX, IA, IxD, UI, Prototyping, Testing
Research
Understanding the needs of cat adopters
Wanting to understand the cat adoption landscape and adopters' pain points, we set out to conduct interviews. We interviewed 9 people who had either adopted a cat or worked at a shelter. Our goals were to:
explore the pet adoption and shelter landscape to understand the overall process in more detail.
identify the needs and pain-points of an adopter throughout a typical adoption experience.
Clarifying the problem
Overall, adopters would like information such as status and health conditions to be accurate and updated consistently. They also need to get to know the cat's personality while browsing and for the process to be displayed clearly.
Persona
Who are the main people who will use the app?
Using the findings from research, we determined the main groups of people who will use the app and their needs. For this project, we focused on the cat adopters but kept the employees and volunteers needs in mind.
Who are we designing for?
From these interviews, we defined our target audience as people in their 30's to 40's who have the time and resources to adopt a cat, and live in the Brooklyn area. Meet Lin Yao, a 34-year-old jewelry designer.
Lin is looking to adopt acat because she has fond memories of growing up with a cat and a dog.
She needs a cat who gets along with dogs, doesn’t mind noise, is a young adult, and is house-trained.
She wants to see a cat in action to feel comfortable they are the right match as she doesn't want to get attached too soon.
“I know I shouldn’t have gotten attached to him by just looking online, but it turned out he was already in the adoption process and wasn’t available anymore. I was sad and frustrated with the shelter.”
Creating the persona helped us clarify why a potential adopter is looking to adopt, understand the importance of including personalized filters, such as “house-trained", and the need to prioritize a cat's status.
Object Map
Discovering the objects
Next, we wanted to use people's real-world mental-model to organize the information from research, so we created an object map.
When designing, I like to understand people’s mental model, so I can represent the information in a similar way digitally. This is one way to reduce cognitive load and make sure the system is thought about as a whole. Check out Sophia V Prater's article on Object-Oriented UX and her new podcast for more information.
First, we looked for objects (real-world things an adopter will use to understand the system) by combing through our research and found the following:
Creating the object map
Then, we created an object map using Trello, which helped us understand each object's attributes, think about the relationships between the objects, and organize the information.
The Trello card below represents all of the attributes of a cat that needed to be a part of our design.
Yellow cards (content) - each cat needed pictures, videos, a name, and a description
Red cards (metadata) - we knew that status, age, and gender were top priority metadata from our research
Green cards (calls to action) - adopters can favorite, share, and meet cats
Blue cards (relationships between objects) - a cat can have 0 to many appointments, but an appointment can only be tied to one cat
We went through the same process for all objects in the system while thinking about the attributes for each and how they were related. Check out the complete Object Map to view the system as a whole.
Prioritizing
To wrap up the object map, we prioritized the attributes based on the importance to the adopter and the Brooklyn Cat Cafe. This was very helpful when sketching and wireframing because we knew what information to include and prioritize.
App Map
Defining the navigation
We explored the app's navigation, focusing on how adopters search for cats, ask the community questions, learn about Brooklyn Cat Cafe's adoption process, and find information about where they are in the adoption process with a specific cat. Adopters can click:
Explore to search for cats
Saved to find cats, content, or events they saved
Connect to search for or ask the community questions
Learn to learn more about the adoption process, breeds, etc.
Me to access their account, meetings, messages, application status, etc.
It was clear from the research that transparency surrounding the process was important, so we included a Learn tab where adopters can learn about the adoption process, and a My Applications page under the Me tab where adopters can see where they are in the adoption process.
We knew that adopters would like to save their favorite cats for later consideration, so we placed Saved in the main navigation for easy access instead of nesting it in the Me tab.
Task Flow
Understanding the steps
We needed to map out all of the steps adopters would take when finding a potential match, favoriting, and booking a meeting, so we created a task flow. This is the flow we focused on in our final design.
The happy path Lin takes when finding a match:
searches or filters and then browse cats
clicks on a cat detail page, reviews information, and saves cats
continues browsing and saving cats along the way
finishes browsing and heads to the Saved tab to find her favorite cat
books a meeting to ask questions and meet the cat
Creating the task flow helped us understand the steps an adopter would take and helped us design sequentially. For example, we decided to let adopters explore cats without creating an account, but they must create an account to book a meeting.
We also created a user flow, to help us understand Lin's possible decisions throughout the process.
Sketching
Turning the object map into sketches
Using the object map, we identified the repeatable card modules and started sketching. By previously collecting and prioritizing the attributes on the object map, we knew what content to include and which information to prioritize. This also insured that our designs were grounded in research. For example, with the cat cards, we knew that:
status was important to adopters, so we made sure to display it visually on the card.
including videos would help adopters get a feel for the cat's personality (instead of just using pictures).
Afterward, we sketched card modules for posts, adopters, and meetings.
Sketching solutions
Using the object map, app map, and flows, we identified the key pages to sketch. Then, using our insights from research, we sketched solutions to the problems. For example, in order to help adopters get to know cats' personalities they can click on three tabs on the cat detail page:
Overview Tab - the cat's personality and health status will be highlighted under characteristics, followed by a brief description
Posts Tab -employees can post content about a cat to help adopters get to know it's personality
Q&A Tab - adopters can view posted questions and ask questions related to a specific cat
Wireframing
Designing and iterating
After thinking about how to solve the problems through sketching, we turned the sketches into wireframes. We kept iterating to explore ideas that popped up and made sure our designs were in-line with the research. For example, we created variations of the wireframes for the cat overview tab:
Variation 1 - the description is prioritized and the adopter scrolls horizontally through the characteristics
Variation 2 - the characteristics are prioritized and are displayed vertically to quickly scan the information
Final Decision - we decided to use the second variation so the adopter can easily scan the information and quickly get to know a cat's personality
Branding
I chose a bright blue as the primary brand color as it's calm and playful, and paired it with pink and yellow to create a fun and energizing feeling.
I created a logo, making sure it was updated to be more modern and playful.
Final Designs
Putting all of the pieces together, I created the designs for the flow of browsing for cats and booking a meeting, as well as the main navigation.
Creating accuracy
Adopters were frustrated when a cat's status wasn't accurate and they wanted to find a better match when searching and filtering.
When exploring, adopters can visually see each cat's status and the number of applications submitted
Filters highlight the cats' personalities such as good with kids and dogs and calm vs high energy
Adopters can search for terms such as house-trained
Helping adopters get to know cats' personalities
Many participants who were interviewed stated that descriptions were inaccurate and they couldn't get a feel for a cat's personality while browsing.
Adopters can quickly scan to see a cat’s personality traits, health status, and special needs
Employees can post text, videos, and pictures, to help adopters get to know the cat’s personality
Videos have been prioritized
Adopters can ask and view questions about a specific cat
How do I meet my favorite cat?
From the cat detail page, adopters can book a meeting with a specific cat.
Click "Meet Pablo"
Create an account
Select time/date and click confirm
Land on the meeting confirmation page
Many external tools to one inclusive app
We helped the cafe consolidate the many tools they were using into one app.
Saved - adopters can save cats, content, and events
Connect - adopters can connect with fellow adopters and view events instead of using Slack
Learn - adopters can learn about the BCC's adoption process and cat adoption in the app
Me - adopters can complete the application form and view their status in the app instead of using multiple programs
Prototyping & Usability Testing
I tested the prototype with four participants and found that everyone got to know the cat's personality while browsing due to the videos, posts tab, and Q&A tab (hooray!). Some usability issues popped up and are detailed below:
Confusion with the "Meet Pablo" CTA
Issue - Participants didn't know what "Meet Pablo" meant and felt like if they clicked the button, they might be committed to the cat somehow.
Result - The CTA became "Book a Meeting" and a short message stating what a meeting entails is now displayed after the CTA is clicked.
Quiz Location
Issue - The quiz link was located on the Explore tab, but adopters would have to scroll down to see it.
Result - The link is now at the top of the Explore page for easy access.
Confusion with Posts
Issue - Participants who logged in through Facebook and then went back to view the posts didn't know if the posts were internal or coming from Facebook.
Result - Now, there is text at the top of the page stating that the posts are internal.
What I Learned & Next Steps
Designing an app was a lot of fun and presented some challenges. Here are some things I learned along the way:
Prototyping Earlier 💡
In the future, I would like to create more simple prototypes that can be tested earlier on. I want to validate ideas quickly, so I know if I am on the right track as I continue through the design process.
Collaborating 🚀
It was so much fun partnering with someone for this project. My team member would ask challenging questions and push me to explain my thinking. Many times, I changed my perspective due to this, which was great.
Next Steps 🐈
As it currently stands, this application would be quite expensive to develop, so it will be important to prioritize the features as soon as possible. At the start of the design phase, it will be essential to understand the adoption process flow in more depth.
This was a student project. I am not affiliated with the Brooklyn Cat Cafe, although they are a real company and we did use their current system as a springboard.
Thanks for reading! Ready for another?
Research / Curriculum Design
Redesigning Curriculum for a Network of Schools
Increasing usability and teacher satisfaction by creating structure
