A Purrfect Match — UX/UI Design for a Cat Adoption Nonprofit
A full UX/UI concept for Ni Hao Meow Cat Shelter — a tea room inspired cat adoption experience designed to feel calm, welcoming, and supportive for people navigating the emotional process of finding a companion, especially those considering special needs cats.
Overview
A shelter experience designed around the animals — not the interface.
Ni Hao Meow Cat Shelter started with an idea I kept returning to: what if a cat shelter felt less like a transaction and more like a tea room? A space where cats moved freely, where visitors could slow down and observe, and where interactions unfolded on the animals' own terms rather than a checklist. That philosophy became the foundation for every design decision in this project.
The digital experience was designed as an extension of that physical one — a calm, structured environment that supported discovery, reduced cognitive load, and helped people feel confident moving through the adoption process. The concept gave special attention to special needs cats: senior cats, diabetic cats, cats missing eyes or limbs who are often overlooked simply because their profiles aren't presented with enough clarity or warmth.
The Problem
Adopting a cat online can feel confusing and emotionally heavy without clear guidance.
People come to shelter websites carrying mixed emotions — a genuine desire to do the right thing, uncertainty about compatibility, and sometimes the weight of considering an animal with special needs. Most existing shelter websites make this harder, not easier. Dense information blocks, disjointed navigation, and rushed flows create cognitive load at exactly the moment when people need calm and clarity.
Key Decisions
What I decided, and why.
Ground every decision in established UX principles
Rather than designing from instinct alone, I anchored the project in UX laws that directly served the emotional context. Fitts' Law shaped how interaction points were sized and placed — making actions feel predictable and easy to reach. Jakob's Law supported familiar layout patterns so first-time visitors felt oriented immediately. Hick's Law guided the information architecture — fewer choices at a time to keep emotionally invested users grounded rather than overwhelmed. These weren't constraints, they were tools for building a calmer experience.
Design for the hardest use case first
Most shelter sites treat special needs cats as an edge case — a filter option buried in a long list. I made them a design priority from the start. If the experience could clearly, warmly, and confidently present a diabetic senior cat with one eye to a first-time adopter, it would work for every other cat too. This meant dedicated profile space for care notes, consistent labeling, and microcopy that reassured rather than alarmed. Gestalt principles helped organize this information so critical care details were always in predictable, trusted locations.
Design for slow, thoughtful decisions — not quick conversions
Most digital experiences optimize for speed — get the user to a decision as fast as possible. Adoption is the opposite. People need time to browse, compare, revisit, and feel confident. The layout was deliberately paced: clear wayfinding, grid-based browsing, and detail pages that invited reading rather than scanning. The tea room philosophy wasn't just a brand concept — it was a UX direction that shaped every interaction from the first page load to the adoption inquiry form.
Research & Discovery
Understanding what makes adoption feel safe — before designing anything.
Before sketching a single screen, I needed to understand the emotional and practical landscape of online pet adoption. I revisited earlier shelter research, studied existing platforms, and identified the UX principles that would guide every decision. The goal was to build a foundation that was grounded in real user behavior — not assumptions about what adopters needed.
UX Principles & Early Research
Fitts' Law Jakob's Law Hick's LawI began by defining what the shelter experience needed to feel like at its core — slow, calm, and emotionally steady. Revisiting earlier notes on shelter websites gave me a baseline understanding of where existing platforms struggled. From there I outlined the UX principles that would anchor the project: Fitts' Law for predictable interaction points, Jakob's Law for familiar, orienting layouts, and Hick's Law to limit choice overload at emotionally sensitive moments.
Image placeholder — UX research notes
Image placeholder — UX principles reference
Competitive & Pattern Research
Shelter Websites Adoption PlatformsI examined a range of shelter websites, wellness adoption tools, and guided decision-making platforms to understand what worked and where the experience broke down. Strong pattern consistency helped users feel grounded — unpredictable or crowded layouts heightened anxiety. Many platforms relied on dense information blocks that asked users to evaluate animals quickly, which felt rushed and transactional. For people considering special needs cats, this created hesitation rather than confidence. These observations reinforced the decision to prioritize clarity, gentle pacing, and a single focused view over feature-heavy layouts.
Image placeholder — Competitive analysis
Image placeholder — Pattern research
Design & Prototype
Shaping a clear direction to support a calm and intuitive adoption experience.
With the research foundation in place, I moved into wireframing — translating UX principles and shelter philosophy into screens that felt steady and supportive. I started with low fidelity layouts to map core user journeys: browsing adoptable cats, learning about special needs companions, and moving toward an adoption inquiry. At every stage the priority was reducing cognitive load and keeping the path forward clear.
Wireframes
Adobe XD Low FidelityEarly wireframes focused on structure over style — grid-based layouts, clear wayfinding, and consistent card patterns for browsable cat profiles. Jakob's Law guided the layout decisions: familiar patterns helped first-time visitors feel oriented immediately without having to learn a new interface. Fitts' Law shaped where calls to action and navigation elements landed, keeping key interactions predictable and easy to reach regardless of where a user was in the flow.
Image placeholder — Wireframe 1
Image placeholder — Wireframe 2
Image placeholder — Wireframe 3
Prototype
Adobe XD High Fidelity 4 Core InteractionsThe wireframes were translated into a high fidelity clickable prototype built around four core interactions: structured browsing with clear categories, supportive education modules for special needs care, guided discovery through filters and simple search, and detailed adoption profiles with personality, health, and care information front and center. Seeing the flow as a working prototype helped surface where the experience felt calm and where clarity still needed work.
Image placeholder — Prototype screen 1
Image placeholder — Prototype screen 2
Build & Refine
Shifting from concept to structure through research and practical evaluation.
With a working prototype in hand, I turned to evaluation — combining UX law research with early user feedback to pressure-test the design and uncover where the experience was still creating friction. Three consistent issues emerged, each rooted in the same underlying problem: too much complexity in places that needed calm.
What Needed to Change
Iterations RefinementsThe first layout had too many branching options — forcing users to bounce between pages to understand each category of adoptable cats. Hick's Law made the problem clear: too many simultaneous choices created cognitive load at exactly the moment users needed to feel steady. The fix was a simplified single-view structure that let people move through information linearly without losing their place.
Information hierarchy was the second issue. General care information and special needs guidance were blending together, which reduced the impact of the content people needed most. Applying Gestalt principles — grouping related content, separating distinct categories — tightened the structure and put critical care information in predictable, trusted locations.
Special needs cat profiles needed the most intentional redesign. Users wanted reassurance, not intimidation. Consistent labeling, predictable icons, and clear microcopy transformed what had felt clinical into something warmer and more encouraging — making these profiles feel like invitations rather than warnings.
Image placeholder — Before refinement
Image placeholder — After refinement
The Refined Structure
Simplified Layout Clearer HierarchyThe redesigned layout consolidated the experience into a focused, linear structure — one clear view where users could access essential features without jumping across the site. Each component was separated by purpose, creating a calm and predictable flow that served both first-time adopters and people taking their time with a special needs cat. The result was a structure that felt less like a database and more like a guided conversation.
Image placeholder — Refined layout overview
Final Design
A shelter experience that feels as calm as stepping into the tea room itself.
The final high fidelity screens brought together everything learned through research, wireframing, and iteration — a visual system that felt warm and welcoming, navigation that kept the path forward clear, and profile pages that gave every cat, especially those with special needs, the space and care they deserved to be seen fully.
Homepage & Navigation
High Fidelity Adobe XDThe homepage established the tea room atmosphere immediately — warm, unhurried, and welcoming. Clear entry points guided visitors toward browsing cats, learning about the shelter's philosophy, and understanding the adoption process without overwhelming them with options on first load.
Image placeholder — Homepage
Image placeholder — Navigation
Browse & Discovery
Structured Browsing Guided DiscoveryThe browsing experience used a consistent grid layout with clear categories and simple filter tools — letting users explore at their own pace without feeling rushed. Familiar card patterns kept the interface predictable, allowing visitors to focus on the cats rather than figuring out how the site worked.
Image placeholder — Browse page
Image placeholder — Filter view
Image placeholder — Category view
Adoption Profiles
Special Needs Detailed ProfilesEach cat profile was designed to tell a full story — personality, care routine, health information, and gentle guidance for special needs companions. Consistent labeling, predictable icons, and warm microcopy ensured these profiles felt like introductions rather than medical disclosures. The goal was to make every cat feel adoptable — especially the ones who needed a little more patience to find their person.
Image placeholder — Standard cat profile
Image placeholder — Special needs cat profile
Education & Support
Supportive Content Care GuidanceGentle, informative modules explained the care needs for cats with medical conditions or physical differences — helping prospective adopters feel prepared and encouraged rather than intimidated. This content was designed to open doors, not close them, by presenting special needs care as something manageable and meaningful rather than overwhelming.
Image placeholder — Education module
Outcomes
What this project delivered.
Structured browsing, supportive education, guided discovery, and detailed adoption profiles — each designed to support calm, confident decision making.
Fitts' Law, Jakob's Law, and Hick's Law — each directly informing layout, navigation, and information architecture decisions throughout the project.
A full wireframe-to-prototype UX system that translated a tea room shelter philosophy into a calm, structured digital adoption experience.
Reflection
What this project taught me.
Ni Hao Meow reinforced something I believe deeply about UX design — that the emotional context of an experience should shape every structural decision, not just the visual ones. Adoption is inherently emotional, and designing for that required me to think carefully about pace, hierarchy, and trust at every step. The UX laws weren't just academic references — they were practical tools that helped me justify restraint when my instinct was to add more. The work I'm most proud of is the special needs profile design. Taking something that most shelter sites treat as a footnote and turning it into a full, warm, and reassuring introduction felt genuinely meaningful. If this were a real shelter, I'd want every cat with a missing eye or a chronic condition to have a profile that made someone stop scrolling and think — maybe that one.