Client: Loving Paws Animal Rescue (School Project)
Timeline: 2 weeks
Role: UI Designer
Tools Used: Figma
Overview
For this project, I was tasked with designing a website for Loving Paws, a local animal rescue organization dedicated to finding forever homes for dogs and cats. The goal was to create a user-friendly and visually appealing interface that helps potential adopters find their perfect furry companion.
This was a school project, where I conceptualized, designed, and delivered a responsive website showcasing the organization's available pets for adoption. Below, I outline my design process, challenges, and final results.
1. Process and Deliverables
1. Research and Planning
The project began with an exploration of user needs and competitor analysis to understand best practices for animal adoption websites. Key insights included:
-
Users prioritize clear, high-quality images and detailed profiles of animals.
-
Navigation must be simple to allow users to quickly browse available pets.
2. Wireframes and Low-Fidelity Designs
Early iterations focused on structuring the layout of the dog category page:
-
Grid Layout: A grid of available dogs with names, ages, and brief descriptions for easy scanning.
-
Navigation Bar: Tabs for categories (Dogs, Cats), Homepage and About Us.
-
Footer: Links to resources, contact information, and newsletter subscriptions.
3. High-Fidelity Designs
The final designs brought the vision to life with vibrant visuals and a playful yet professional color scheme:
-
Color Palette: A soft pink and white theme to evoke warmth and friendliness.
-
Typography: Clean and modern fonts for readability and visual appeal.
-
Visuals: High-quality images of dogs, with individual profiles offering additional photos and detailed descriptions.
-
Call-to-Actions (CTAs):
-
"Meet Balder" buttons linking to detailed profiles.
-
4. Individual Dog Profiles
Each dog’s profile provided:
-
Detailed information about the dog’s personality, age, and breed.
-
Additional images showcasing the dog’s character.
-
A form for users to schedule visits or adoption meetings.
5. Additional Pages
To ensure consistency, supporting pages followed the same design language:
-
Homepage: Highlighted the mission and showcased featured animals.
-
Contact Us: A simple form with a cheerful dog image to encourage users to reach out.
-
About Us: Provided insights into the organization’s values and mission.
Results
1. Engaging User Experience
The final design achieved an intuitive structure, making it easy for users to:
-
Browse through animals with minimal clicks.
-
Learn about individual dogs in detail.
-
Contact the organization through clear CTAs.
2. Consistent Visual Identity
A cohesive design language ensured a unified look and feel across all pages, reinforcing the organization’s mission of warmth and care.