Responsive Landing Page for Animal Care Service

Paws & Claws - Full service veterinary

The purpose of the project was to design a landing page and its mobile responsive version for a pet facility. I chose a full service veterinary facility that provides both medical care and grooming since combining the two services would be an interesting challenge.

Design process and resolution

I started my process by researching veterinary services to gain a better understanding of industry standards and the types of services offered. My main focus was studying how users access critical information and how easy it is for them to book services. By placing myself in the shoes of a user needing urgent or routine pet care, I identified both strengths and weaknesses in existing websites.

This analysis guided my goal towards prioritization of accessible information and easy booking. I wanted users to be able to quickly and efficiently book the service, especially when under time pressure.

I also explored the psychology of color for this type of website. Certain colors work particularly well for veterinary services: blue, green, and purple. Blue evokes calmness and trust, which are crucial in the veterinary field, while green represents freshness and nature, helping to promote a healthy lifestyle for pets.

Although 1920×1080 is the most common desktop resolution, I chose to design for 1440x1024. Designing for smaller resolutions makes it easier to scale up to larger screens rather than the other way around. Additionally, 1440x1024 offers a good balance between content display and layout flexibility.

For the mobile version, I opted for 360x800, as it’s one of the most widely used resolutions for modern smartphones.

Navigation and hero section

My goal was to display all crucial information without the need for users to scroll, securing that upon the first page load, they’re immediately greeted with everything they need.

In the navigation bar, I highlighted the location and operating hours, so users spend less time searching for these key details. The hero section’s headline serves as the focal point, presenting the core message in a simple, direct tone, while the sub headline further clarifies services.

Book Appointment picker allows users to schedule services quickly and easily, something I didn’t come across often with competitors. Given that it eliminates the need for phone coordination and allows users to select their own appointment time. This approach simplifies the process, as users can book at their own pace rather than waiting for a suitable time through a call.

Other sections

Further down the landing page, my focus was on delivering valuable information to users. Services section outlines the range of services Paws & Claws offers, categorized for easier navigation. I included a small amount of interactivity where each animal's sound is displayed on hover.

To build trust with our users, I added the Our Team section, where I highlighted key numbers like certifications, awards, and team members. This section also includes certification badges, providing an extra layer of assurance.

For a final touch, I included a FAQ section to assist users in finding relevant answers quickly.

The purpose of the landing page is to make sure users can find important information quickly, while showcasing the facility's accomplishments and extra resources to build trust and confidence.

On the link you can access the desktop and mobile interactive prototype.