Designing a Scannable Pet Care Platform

Role

UX/UI Designer

‍ ‍Time

1 week

Platform

Mobile, Desktop

Context

The Pawfinder Blog is a digital publication designed to increase reader engagement and long-term user retention through a clean, visually compelling editorial experience. In a crowded landscape of pet-care blogs often bogged down by heavy ad placements and cluttered layouts, Pawfinder prioritizes readability, clear visual hierarchy, and seamless cross-device browsing to keep animal lovers coming back.

Scope

As the UI/UX Designer on this project, I was responsible for establishing the visual identity and foundational design system from the ground up. I crafted a comprehensive style guide—defining typography scale, color palettes, and reusable UI components—to ensure visual consistency across the platform. Leveraging these atomic assets, I designed fully responsive, high-fidelity wireframes for both desktop and mobile viewports, creating an accessible, low-friction reading experience tailored for modern readers.

Major pet adoption and rehoming directories—such as Petfinder and Adopt-a-Pet.com—play a critical role in connecting rescues with prospective pet owners. However, legacy UX patterns and monetization choices have created severe friction points for users trying to adopt:

  • Outdated UI & Poor Editorial Readability: Existing platforms rely on dense, unformatted layouts and poor typographic hierarchy. Information about an animal's health, temperament, and adoption requirements is frequently buried in wall-of-text descriptions, leading to high reader fatigue and low engagement.

  • Predatory Ads & Malicious Link Redirection: To generate ad revenue, platforms embed third-party banner ads disguised as primary navigation buttons (e.g., "Adopt Now" or "Contact Shelter"). Users clicking these links are frequently redirected to external survey traps, phishing schemes, or commercial scams instead of actual pet profiles.

  • Broken Paths & Stale Information Architecture: Outdated directory structures result in dead ends, broken links, and ghost listings for animals that were adopted weeks prior. This lack of data integrity wastes user effort and breeds frustration, causing qualified adopters to abandon the process altogether.

These systemic usability failures degrade trust, lower reader retention, and ultimately slow down the adoption pipeline for animals in need.

Problem: Broken Navigation & Misleading Interfaces in Digital Pet Adoption

“The website looks like it hasn’t been updated since 2004. Half the links are broken, and it’s filled with confusing ad banners disguised as ‘Adopt Now’ buttons that lead to third-party survey scams instead of the actual pet profile. user review
”
— sitejabber

Process

To transform real-world user frustrations into an intuitive, high-retention reading experience, I executed a research-informed, multi-device design strategy:

  • Competitive Auditing & Heuristic Analysis:

    I analyzed established pet adoption directories and editorial blog layouts, cross-referencing industry visual patterns with negative user reviews from platforms like Petfinder. By identifying recurring complaints, specifically regarding ad clutter, unreadable text blocks, and broken link paths, I mapped out structural opportunities where Pawfinder could offer a superior user experience.

  • Responsive High-Fidelity Prototyping:

    Translating these insights directly into high-fidelity screens, I designed concurrent layouts for both desktop and mobile viewports. My primary focus was establishing responsive fluid typography, predictable navigation structures, and high-contrast content cards to preserve readability across all screen sizes.

  • Mentor Critique & Architectural Refinement:

    I presented my initial prototypes in design critique sessions with bootcamp mentors. Based on their expert feedback, I executed a thorough polish pass—refining component auto-layouts, simplifying layer organization, and adjusting spatial padding to eliminate visual noise and deliver a seamless, intuitive interface.

Solution

  • Scannable Layout & Typographic Hierarchy:

    Designed with intentional spatial padding and a disciplined type scale, the content structure guides the user's scanning pattern naturally down the page. By establishing high-contrast headings, deliberate line heights, and ample white space, the interface drastically reduces reader eye strain, lowers cognitive load, and increases article comprehension across both mobile and desktop screens.

  • Intentional Content Curation & Zero-Ad Interface:

    To eliminate the pervasive friction and security concerns found on legacy adoption blogs, Pawfinder removes third-party banner ads entirely. The feed prioritizes high-value, intent-driven pet care guides and verified adoption resources—ensuring readers can engage with articles safely without encountering deceptive ad redirects or commercial clutter.

  • Frictionless Navigation & Clear Conversion Paths:

    Interactive elements, including primary CTA buttons and pagination controls, utilize consistent affordances and generous touch targets. Every button clearly signals its destination, creating predictable navigation loops that allow users to effortlessly transition between related articles, adoption resources, and shelter contact forms.

View Wireframes

Reflection

Designing The Pawfinder Blog really reinforced how much poor UI layout and aggressive ad monetization directly ruin the reader experience. When a site is cluttered with deceptive ads and broken spacing, users don't just get frustrated—they lose trust in the platform entirely. Building this project taught me that great design isn't just about making something look visually appealing; it’s about creating an intentional, accessible environment where users can access the information they need without unnecessary friction.

Given more time on this project, my immediate focus would be moving from static designs to interactive validation:

  • Interactive Prototyping & Usability Testing:

    I would build out a fully interactive prototype in Figma to conduct unmoderated usability testing sessions. This would allow me to observe real users navigating between articles, testing whether the typographic hierarchy and button affordances truly hold up under realistic browsing conditions.

  • Refining Desktop & Mobile Component Scaling:

    I would further stress-test the design system by building additional complex UI templates—such as interactive shelter maps and filterable search pages—to ensure component scalability across diverse screen sizes.

  • Accessibility Audit:

    I’d love to run a formal accessibility review to double-check color contrast ratios, screen-reader compatibility, and keyboard navigation flows for readers with accessibility needs.