— Adoptable Puppy Cafe: A Landing Page for Rescue Success

Project Overview:

Driven by a design challenge from Sand Studio & Co. to create a website for an animal adoption initiative, I volunteered to design a user-friendly landing page for the Adoptable Puppy Cafe (APC). APC is an initiative that works alongside rescue groups to hosts monthly meet-and-greet events, connecting rescue dogs with potential adopters. This project aimed to bridge the gap between APC's successful offline events and their online presence, ultimately creating a clear online pathway for potential adopters.

The Goal: Create a user-friendly landing page that directs users to the initiative's social media platforms, and streamline their communication channels by developing a concise FAQ section.

1. Research & Discovery, and Ideation

My research phase began with a comprehensive analysis of animal rescue websites to identify industry best practices, common layouts, and essential pages. This provided a foundational understanding of the pet adoption landscape.

To tailor the website to APC's specific needs, I conducted a content audit of their online presence, analyzing articles and videos to identify their brand voice and key messaging. This research, combined with my personal experience at their events, informed the creation of a moodboard tp reflect the warm and friendly nature of APC.

2. Wireframe & Low-Fidelity Prototype

To facilitate a productive discussion with APC's founders about my volunteer design services, I translated preliminary research into wireframes and a low-fidelity prototype. The wireframes were structured to optimize user flow, highlighting key features such as event information, puppy profiles, and a comprehensive FAQ. The prototype then provided a visual representation of this flow, showcasing site navigation and information accessibility.

3. Qualitative Research: Interviews to Collect Data

I attended the next event and introduced myself to one of the co-founders, Kirsty, where we engaged in a detailed discussion focusing on their unique needs and constraints. I asked targeted questions about APC's online challenges and goals. Her feedback highlighted the need for a simple, maintainable website with a strong FAQ section, which directly influenced the next design iteration.

4. High-Fidelity Prototype

The first high-fidelity prototype focused on creating a visually engaging landing page that seamlessly directed users to APC's social media platforms. Key design decisions included a clean layout, intuitive navigation, and a friendly color palette that reflected APC's brand.

i. Typography and Color Palette:

• Urbanist (Headers): Chosen for its modern, clean lines and readability, Urbanist provides a friendly yet professional tone, reflecting APC's approach.
• Roboto Serif (Emphasis): The italicized Roboto Serif adds a touch of personality to emphasized text, enhancing readability and drawing attention to key information.
• Comfortaa (Body): Comfortaa's rounded, approachable style fosters a welcoming and comforting atmosphere, aligning with the compassionate nature of APC.
• Brown (Font Color): A rich, earthy brown was selected for the font color to evoke a sense of warmth, stability, and natural connection. This choice also provides excellent contrast against the light background, ensuring readability while maintaining a soft, non-harsh aesthetic.
• Purple and Green Palette: The chosen purple and green palette represents a balance of compassion and growth. Purple, often associated with kindness and creativity, reflects the caring aspect of APC. Green, symbolizing growth and renewal, signifies the positive impact of adoptions.

ii. Header and Hero Section

• A language toggle in the header, allowing users to switch between English and Thai, ensures accessibility for Thai-speaking users, recognizing the initiative's location and target audience.
• The hero section's subtle descending puppy paw details create a playful and engaging visual element, drawing the user's eye downward towards the content.
• The newsletter signup serves as the primary call-to-action, enabling APC to build a valuable contact list. This will empower them to efficiently communicate updates on available puppies, adoption success stories, upcoming events, and event recaps, fostering a strong community connection.

iii. Get Involved Section:

• The "Get Involved" section employs popup cards for "Adopt," "Donate," "Sponsor," and "Foster" to provide concise, preliminary information without navigating away from the landing page. This design choice prioritizes simplicity and user convenience, ensuring essential information is readily accessible.

iv. Event Promotion and Social Media:

• The "Interested in attending one of our monthly events?" section is strategically placed high on the page, recognizing the events as a primary touchpoint for adoptions.
• Direct links to social media platforms emphasize their role as the primary communication channel, allowing users to easily access up-to-date information on available puppies and APC's activities.

v. Happy Tails Section:

• The "Happy Tails" section leverages interactive elements to showcase adoption success stories and build credibility.
• The animated gradient stroke and full-opacity dog images on hover create an engaging and visually appealing experience.
• The semi-transparent overlay with a layer blur on click provides a modern, immersive way to view the adoption stories.

vi. FAQ Section:

• The FAQ section, featuring dropdown-style answers for frequently asked questions, aims to reduce repetitive inquiries, freeing up APC's social media managers for more critical tasks.
• The "See all FAQ" button provides access to a comprehensive FAQ page for further information.

6. Next Steps & Recommended Testing

Usability testing with potential adopters, volunteers, and donors is crucial to refine the website. Recommended methods include task-based testing, user interviews, and A/B testing.