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.
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.
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:
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.
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.
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.
“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.
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:
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.
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.
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.
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:
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.
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:
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.
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:
Afterward, we sketched card modules for posts, adopters, and meetings.
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:
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:
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.
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.
Adopters were frustrated when a cat's status wasn't accurate and they wanted to find a better match when searching and filtering.
Many participants who were interviewed stated that descriptions were inaccurate and they couldn't get a feel for a cat's personality while browsing.
From the cat detail page, adopters can book a meeting with a specific cat.
We helped the cafe consolidate the many tools they were using into one app.
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:
Designing an app was a lot of fun and presented some challenges. Here are some things I learned along the way:
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.
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.
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.