Case Study: Cat Care Responsive Website

A comprehensive overhaul of an online store to enhance user engagement and sales.

Introduction

As part of the Google UX Design Certificate course on Coursera, I worked on designing a responsive website for cat care. The objective was to create a platform that helps volunteers find shelter homes for cats and sign up to volunteer at rescue centers. The website was designed to be user-friendly, accessible, and informative, ensuring a seamless experience for users looking to adopt, foster, or volunteer.

Research & Discovery

Understanding the Problem

Many abandoned or stray cats need a safe shelter, but volunteers often struggle to find reliable shelters where they can contribute. The existing solutions lacked ease of access, streamlined navigation, and mobile responsiveness.

User Research & Pain Points

To understand user needs, I conducted interviews and surveys with:

• Cat lovers who wanted to adopt or foster.
• Volunteers who wanted to contribute their time to shelters.
• Shelter owners who needed a platform to attract volunteers.

Key Findings:

• Users struggled to find verified cat shelters in their area.
• Volunteers needed a simple application process without excessive paperwork.
• Many existing websites were not mobile-friendly, making access difficult on the go.

Design Process

1. Ideation & Wireframing

Based on research insights, I created low-fidelity wireframes focusing on:

• A simple and intuitive navigation structure.
• A filterable shelter search with location and availability filters.
• An easy volunteer sign-up process with minimal steps.

2. UI Design & Branding

The website’s design aimed to convey a sense of warmth, trust, and reliability.

Color Palette:

• Soft Blue (#56CCF2) – Represents trust and calmness.
• Warm Orange (#FFA726) – Symbolizes energy and warmth.
• Neutral Gray (#F8F9FA) – For a clean, modern look.

Typography:

• Headings: Poppins (modern & friendly)
• Body Text: Lora (clean & readable)

Imagery & Icons:

• High-quality images of cats and shelters to evoke empathy.
• Clear call-to-action buttons to guide users effectively.

3. Key Features & Functionalities

• Find a Shelter: A location-based search to find nearby cat shelters.
• Adopt & Foster: Users can browse profiles of cats available for adoption or fostering.
• Volunteer Sign-up: A streamlined form for users to apply as a shelter volunteer.
• Mobile Responsiveness: Fully optimized for desktop, tablet, and mobile.

Challenges & Solutions

1. Simplifying the Sign-up Process

Challenge: Users found long registration forms frustrating.

Solution: Implemented a step-by-step sign-up with progress indicators.

2. Ensuring a Mobile-Friendly Experience

Challenge: Many shelter websites were hard to navigate on phones.

Solution: Used mobile-first design principles with a clean layout and large touch-friendly buttons.

3. Encouraging User Engagement

Challenge: Some users were hesitant to sign up as volunteers.

Solution: Added success stories and testimonials to inspire confidence.

Results & Impact

• Easy Navigation: Test users reported a 30% faster shelter search process.
• Higher Engagement: Volunteer sign-ups increased due to a simplified form.
• Positive Feedback: Users appreciated the clean, intuitive interface.

Conclusion & Next Steps

The Cat Care Responsive Website successfully connects volunteers with cat shelters while ensuring an engaging, mobile-friendly experience. Future improvements could include:

• A mobile app for real-time notifications and updates.
• Live chat support for quick shelter inquiries.
• Gamification elements like badges for active volunteers.