UX/UI & Website Design | 2021
A Purrfect Match: UX/UI Design for a Cat Adoption Nonprofit
Content
Introduction
Overview
Problem
Discover & Define
Design & Prototyping
Build & Refine
Iteration
Final Design
Outcome
Reflection
Introduction
Ni Hao Meow Cat Shelter
Ni Hao Meow Cat Shelter gave me a chance to study how familiar UX patterns shape the experience of an animal adoption platform. I wanted to understand how small design decisions guide users as they search for pets, learn about adoption requirements, and move through tasks that can feel emotional or overwhelming. This project let me explore how thoughtful layout, clear information hierarchy, and approachable visual design can reduce friction and build trust.
I guided the entire design process from concept to final interface. I focused on identifying the core user goals, mapping out intuitive paths through the site, and creating a system that supported both discovery and decision making. I relied on research, pattern analysis, early sketches, and iterative visual design to shape an experience that feels warm, practical, and easy to navigate.
Role
Lead Web designer, UX/UI Designer & Researcher
Timeline
2021: 8-10 Weeks
Tools
Adobe Photoshop, Illustrator, XD
Team
Independent project with faculty guidance
Deliverables
Final prototype and final report
Overview
How can a cat shelter website guide someone through a calm and meaningful adoption experience?
Ni Hao Meow Cat Shelter began as a concept for a calm, welcoming space where people could meet adoptable cats in an environment that respected the cats natural rhythms. I imagined a tea room blended with an open room shelter, a place where visitors could slow down, observe, and let the animals approach on their own terms. This idea gave me a foundation for studying how experience design can support comfort, agency, and emotional connection.
With that vision in mind, I approached the digital experience as an extension of the physical one. I explored how UX patterns could recreate a sense of ease and openness through structure, hierarchy, and flow. I studied how people navigate discovery, comparison, and decision making when an environment invites patience rather than urgency. This helped me identify patterns that build trust and reduce cognitive load.
The outcome was a full system of wireframes and a working prototype that illustrated the core interactions of this imagined space. Even though the shelter itself is conceptual, the design process showed how thoughtful structure can translate a gentle, animal centered philosophy into a clear and supportive digital experience.
Problem
Adopting a cat online can feel confusing and emotionally heavy without clear guidance.
People often come to shelter websites with mixed emotions, a desire to do the right thing, and only a general sense of what compatibility looks like. This becomes even more challenging when they are considering special needs cats, such as senior cats, diabetic cats, cats with illnesses, or cats who are missing eyes, limbs, or ears. These animals deserve gentle and thoughtful matchmaking, yet many existing experiences overload visitors with information or present disjointed flows that make the process feel stressful. I wanted to explore how a digital experience could feel calm, intuitive, and aligned with the philosophy behind the imagined tea room shelter, a space where interactions unfold with patience and clarity.
In this environment, visitors slow down, observe, and meet animals on the animals terms. Creating a relaxed and supportive space, both in person and online, can help people feel more confident considering special needs cats and open pathways to meaningful adoptions they may not have imagined before.
The brief
What kind of digital experience can help people move through adoption with clarity while honoring the comfort and natural behavior of the animals?
My starting point was the belief that good interaction design should reduce the effort required to understand what to do next. Clear patterns, consistent hierarchy, and predictable flows help visitors focus on the animals rather than the interface. Concepts like Fitts law and careful layout decisions supported this goal by creating a smoother path through discovery, comparison, and decision making. I wanted every part of the experience to feel steady and reassuring, the same way a visitor might feel when stepping into a quiet room where cats can interact freely and comfortably.
I also saw this project as a chance to revisit ideas I explored years ago when I first became interested in how shelters communicate online. This time, I pushed the concept further by imagining a digital space that could echo the gentle, animal centered approach of the physical environment. By blending strong UX patterns with a philosophy centered on respect, agency, and emotional clarity, I aimed to solve the problem of helping people move through the adoption process with confidence, especially when considering special needs cats who often get overlooked.
Discover & Define
Establishing the foundations for a calm and intuitive experience
At the start of this project, I needed to understand what kind of digital environment could support the same gentle philosophy as the imagined tea room shelter. My first step was to define what the experience should feel like and what the interface needed to communicate at each stage of the adoption journey. I also revisited core UX laws that guide my work, especially Fitts law and Jakob’s Law, since both can significantly reduce cognitive load and help people move through tasks with more confidence. These early reflections became the groundwork for the rest of the project.
Clarifying the core experience
Reconnecting with earlier shelter research
Identifying early UX principles
I outlined a set of UX principles that would guide the project. Fitts’ law influenced how I shaped interaction points to feel predictable and easy to reach. Jakob’s Law supported familiar layouts so the experience felt approachable and safe. These principles shaped the first sketches and guided decisions long before I moved into wireframes.
Image caption / Image Caption
Image caption / Image Caption
Insights from early competitive and pattern research
To understand the landscape more fully, I examined a range of shelter websites, wellness adoption tools, and other platforms that rely heavily on guided decision making. My goal was not to replicate these patterns but to understand what worked, what overwhelmed users, and where the experience often broke down. This research helped me identify opportunities to design something calmer and more intentional.
Learning from existing interface patterns
I paid close attention to how these platforms handled discovery tasks, especially filtering available animals and moving users toward detailed profiles. Strong pattern consistency often helped users feel grounded, while unpredictable or crowded layouts heightened anxiety. These observations reinforced my choice to prioritize clarity and gentle pacing.
Recognizing complexity and emotional load
Many adoption platforms relied on dense information blocks or long lists that asked users to evaluate animals quickly. This approach often felt rushed and transactional. For people considering special needs cats, this can create hesitation. I wanted to design an experience that embraced slower decision making and encouraged thoughtful reflection.
Understanding technical needs and constraints
Although this project was conceptual, the research helped me understand what tools and structures might support the final design. Simple interactions, clear visual hierarchy, and well organized navigation patterns would be essential. These insights informed the level of fidelity I aimed for in the prototype and the way I prioritized features moving forward.
Image caption / Image Caption
Design & Prototyping
Shaping a clear direction to support a calm and intuitive adoption experience.
I explored several possible directions for the site’s layout and interactions. Each option aimed to support people who might be adopting for the first time and who needed a simple way to learn about every cat, including those with special needs.
I narrowed the concepts to a straightforward browsing experience that focused on clarity, warmth, and easy access to essential adoption details.
I began with low fidelity wireframes to map out how someone would move through the site. At this stage, I relied on proven patterns like clear wayfinding and grid-based layouts because users often come to shelters already feeling a bit overwhelmed. I wanted the design to support steady decision making. This meant prioritizing simple navigation, readable content, and easy entry points to learn about each cat, especially those with medical or physical needs.
Once the structure felt stable, I translated the wireframes into a high fidelity prototype. I focused on interactions that help users feel grounded, such as predictable navigation and consistent card layouts for adoptable cats. The prototype also included detail pages with space for care notes, personality traits, and helpful guidance on caring for special needs companions. Being able to preview the flow allowed me to see where the experience felt gentle and where clarity could be improved.
Early explorations helped me identify the most supportive user interactions.
The key interactions were shaped by researching common pain points in shelter websites and by studying patterns that support thoughtful decision making in emotionally sensitive experiences.
With that insight, I created a focused set of high fidelity screens that highlighted four important interactions for people looking to meet both typical and special needs cats.
Structured Browsing
Clear categories helped users move through adoptable cats with confidence and find the companions that fit their family.
Supportive Education
Gentle, informative modules explained care needs for cats with medical conditions or physical differences so people felt prepared and encouraged.
Guided Discovery
Filters and simple search tools helped users explore at their own pace without feeling rushed.
Detailed Adoption Profiles
Each profile highlighted personality, care routines, health information, and helpful notes that make special needs adoptions feel less intimidating and more achievable.
Image caption / Image Caption
Build & Refine
Shifting from concept to structure through research and practical evaluation.
As I moved past the initial design work, I focused on understanding how real users would move through the shelter experience. I wanted to see whether the layout, interactions, and information architecture supported the emotional and practical needs of someone preparing to adopt.
I combined UX law research with early user feedback to evaluate the strengths of the design and uncover areas that felt confusing or underdeveloped. This helped me refine the structure before spending more time on detailed visuals.
Cluttered paths created friction for the user
Information hierarchy needed clearer separation
Users struggled to distinguish between general care information and special needs guidance. Important medical notes blended in with softer details like personality or behavior. This reduced the impact of the content people needed most. Reworking the hierarchy with Gestalt principles helped tighten the structure and put critical care information in predictable locations.
Profiles for special needs cats required more intentional design
I learned that listings for cats with medical or physical needs needed stronger visual support and clearer explanations. Users wanted reassurance, not intimidation. Small changes like consistent labeling, predictable icons, and clear microcopy created a stronger sense of trust. This aligned closely with the UX Law of empathy-driven clarity, which became a helpful guide during refinement.
These insights reshaped the layout into a cleaner, more intuitive structure.
I reworked the layout into a simplified page structure that supported steady, confident browsing. I created a single, focused view where users could access essential features without jumping across the site. Each component was separated by purpose so people could move through information in a calm and linear way. The redesign strengthened the flow for first-time adopters and gave special needs cats the visibility and clarity they deserve.
Image caption / Image Caption
Image caption / Image Caption
With these refinements in place, the experience reached a balance of calm clarity and supportive usability.
Iteration
Refining the experience through focused review and steady improvements.
After shaping the core layout and interaction patterns, I shifted into a review cycle to test how intuitive the experience felt for someone moving through the adoption journey. I wanted to confirm that each page supported a calm pace, especially for users who were exploring special needs cats for the first time. This stage helped me identify small friction points that were not obvious during the design phase but became clear once everything was viewed as a complete flow.
Image caption / Image Caption
I refined the copy, spacing, and interaction cues to help guide users through moments where uncertainty naturally appears. Adjustments to labeling, icon consistency, and information hierarchy helped the site feel more grounded and predictable. I revisited specific UX Laws and patterns from my research and used them as guideposts to ensure each refinement had a clear purpose.
These rounds of iteration created a more supportive digital experience. It now mirrored the patient and gentle environment of the imagined tea room, where people can take their time, learn at their own pace, and feel confident meeting cats who have unique needs. The final report documents the principles, patterns, and UX Laws that shaped these decisions and provides a full view into the structure behind the design.
Image caption / Image Caption
Image caption / Image Caption
Final Design
A calm, intuitive adoption experience shaped by steady refinement.
The final design brings together the atmosphere of the imagined tea room environment with a clear and supportive digital flow. Each screen focuses on clarity, gentle pacing, and thoughtful hierarchy. I wanted the site to help users feel welcomed rather than rushed, especially when they are learning about special needs cats or weighing an adoption decision that carries emotion and responsibility.
Working through the process showed me how important rhythm and tone are in an adoption platform. A clear layout can reduce stress, but visual warmth and confident information design help people trust the experience. The final system reflects that balance. It gives users space to explore profiles, understand care needs, and build a connection at their own pace.
Image caption / Image Caption
Image caption / Image Caption
With the design complete, I can see how much the early conceptual work shaped the outcome. The emphasis on calm pacing encouraged me to simplify unnecessary complexity, reduce cognitive load, and highlight the emotional value of meeting cats on their terms. The result is a design that feels both practical and gentle, which was always my goal.
This project helped me grow in how I think about digital environments that support vulnerable users, whether human or animal. It taught me that a thoughtful structure, supportive tone, and careful presentation of information can create a stronger path to adoption. The final design represents a more holistic way to guide people through a decision that deserves time, clarity, and care.
A. Final Design / Adoption Pathways & Cat Profiles
Creating gentle entry points into each cat’s story
The adoption pathway became one of the most important parts of the design. I wanted users to feel guided, not pushed. Every step was designed to reduce decision fatigue by offering clear explanations, gentle pacing, and predictable patterns. This helped the experience feel more like a conversation and less like filling out a form. I also wanted each profile to feel like a quiet introduction rather than a sales pitch. Many potential adopters arrive with mixed emotions, so the layout needed to give them space to read, reflect, and get to know each cat without pressure. I focused on clear sections, soft visual pacing, and predictable interactions that help people feel comfortable as they explore.
The structure follows a simple top to bottom flow with consistent information placement. This lets users settle into the rhythm of the experience quickly. Each step introduces only the information the user needs in that moment. This approach supported the emotional nature of adoption and gave people time to understand care needs, personality traits, and compatibility factors without feeling overwhelmed.
Image caption / Image Caption
Image caption / Image Caption
Several UX laws helped shape this layout. The Law of Simplicity guided my decision to reduce decorative elements so the content stayed front and center. Hick’s Law influenced how much information surfaced at one time. I grouped details into readable chunks that made it easier for users to scan and understand what makes each cat unique. Creating this flow taught me how much thoughtful spacing and hierarchy matter. Small shifts in placement or copy tone changed how confident the process felt. I kept returning to the idea of a calm environment, and that principle guided every adjustment.
I also leaned on the Law of Proximity and the Grid of Equals pattern. Consistent spacing and aligned modules helped people compare cats with ease while still giving each profile its own sense of personality. Together, these choices created a calm and respectful environment where adopters can focus on connection and compatibility. The final version feels steady and supportive. Even in its conceptual form, it carries the sense of patience that inspired the original tea room idea, where people and cats can connect at their own pace.
B. Final Design / The Special Needs Education Flow
Building clarity and trust around special care requirements
The cat profile pages needed to feel warm and reassuring. Users often arrive with anxiety or uncertainty, especially when learning about special needs cats. I focused on building a layout that felt open and approachable, with clear sections for health notes, personality details, and daily care expectations. A key part of this project was making sure users understood the needs of diabetic cats, senior cats, or cats who live well with mobility or sensory differences. Many people want to help but do not always know where to begin. I designed an educational flow that breaks this learning process into small, steady steps.
The content uses friendly language, simple visuals, and gentle sequencing. Each section answers a single question so users can build confidence as they go. I wanted this part of the experience to encourage curiosity rather than fear.
Image caption / Image Caption
Image caption / Image Caption
UX laws guided this flow as well. The Serial Position Effect shaped how I ordered the content. I placed the most encouraging and helpful information at the start and end of each section to support better recall. Miller’s Law helped me limit each page to a manageable set of points so users never felt overloaded.
I also applied Jakob’s Law. Many people learn about pet care through familiar patterns like step by step tutorials or FAQ structures. Mirroring those patterns made the content feel more approachable. The result is an educational pathway that helps users feel capable and informed while exploring special needs adoption.
C. Final Design / Exploration and Wayfinding
A calm navigation system shaped by clarity and familiar patterns
The navigation needed to feel stable and supportive. I imagined someone wandering into a tea room, taking a moment to breathe, then moving slowly into the space. I wanted the digital experience to mirror that feeling. The navigation reflects a steady progression where users always know where they are and what their next step could be.
I kept the structure familiar so people did not waste energy trying to decode the interface. Simple labels, a clear hierarchy, and a small set of primary sections helped create a rhythm that felt easy to follow.
Image caption / Image Caption
Image caption / Image Caption
Several UX laws shaped the foundation of this system. Hick’s Law helped me define how many choices appear at once. Reducing the number of visible pathways at key moments helped prevent cognitive fatigue. Jakob’s Law supported the decision to align with navigation patterns users already trust, which builds confidence and reduces uncertainty.
I also relied on the Law of Proximity to group related items and clarify relationships between pages. Fitts’s Law informed the size and spacing of the main navigation touchpoints, since many users browse on mobile. These principles sharpened the flow and made the experience feel predictable in a calming way, which reflects the heart of the shelter’s philosophy.
Outcome
This project helped me reconnect with the parts of design that energize me
Exploring this idea reminded me why I enjoy building digital experiences. I liked shaping a concept from a rough sketch into a structured system that felt intentional and caring. Even though this design stayed within the conceptual phase, the process felt meaningful because it challenged me to think deeply about clarity, accessibility, and emotional impact. It also reinforced how much I enjoy creating work that supports communities and tells a clear story through thoughtful UI.
This project also helped me see how much I value the balance of structure and creativity in my work. Breaking down patterns, naming decisions, and documenting the logic behind each choice sharpened my process. It made me more confident in how I approach complex ideas and turn them into something clear and approachable. I left the project feeling excited to push this lens even further in my future work.
Reflection
Looking back, this project reminded me how much I grow when I let myself iterate with intention
Working through this idea taught me how valuable it is to stay flexible and curious. I shaped the structure of the website through trial, review, and quiet moments of reflection. Each decision helped me understand what the experience needed to feel calm, helpful, and clear. I came away with a sharper sense of my own process and a stronger appreciation for designing systems that feel warm and supportive for the user.
1. Plan for future scale
I want to rebuild this project with full mobile responsiveness, and designing with that goal in mind helps me think more carefully about hierarchy, spacing, and flow.
2. Learn through new tools
I would like to use this project as a way to move from Adobe XD into Figma, since the structure and components make it a perfect environment for practicing component libraries and responsive variants.
3. Create space for deeper exploration
Revisiting this work would give me room to refine patterns, clean up content strategy, and build a clearer foundation for future iterations.
If I return to this concept, I know I will bring a calmer and more experienced perspective to it. The first version helped me understand what I value in my process, which is thoughtful structure, purposeful clarity, and space to learn something new. I feel encouraged knowing that this project still has room to grow, and I look forward to exploring what a refreshed and responsive version could become.
Previous
Lorem Ipsum Dolor Sit Amet,
Next