Chiswick Pets (2023)

Published on 23/06/2023

Chiswick Pets is a long-established independent pet shop in West London. They are known for their extremely knowledgable staff and offer expert advice on caring for a wide variety of animals, from cats, dogs, rabbits and hamsters to fish, reptiles and amphibians.

They also offer a boarding and cat-feeding service for when pet owners go on holiday, plus dog grooming in their in-house grooming salon.

You can visit the site at chiswickpets.co.uk

Key Requirements

A simple and easy to navigate site
An excellent user experience on mobile devices
Location, contact details and opening hours should be prominent and easy to find
Stylish and professional appearance in keeping with the look and feel of the shop itself, but without looking 'boring' or 'generic'
Clearly advertise the three main offerings (pet shop, boarding / feeding service, dog grooming)
Streamline the content on the site to reduce out-of-date information and make key information easier to find

I built the previous version of Chiswick Pets' website 10 years ago, and it was long overdue an update!

The previous site featured many nested pages which made it difficult for visitors to quickly find information, and a number of pages had become out-of-date.

We opted for a single-page design with four key sections - Pet Shop, Boarding & Feeding, Grooming, and Contact, with buttons in the header to scroll visitors directly to each section if required. This meant all the key information was easy to find, and visitors could clearly see all the services on offer.

We also cut down the amount of content on the page, so that only the most relevant and up-to-date information was included.

Opening hours and contact details are highlighted in their own contrasting section at the top of the page, as well as in the 'Contact' section, which also features an interactive Google map.

Custom Illustrations

I created a custom illustration for each section of the site - these add a bit of fun to the page and are something unique and memorable. They also help to clearly delineate each section in a single-page design.

On larger screens, the illustrations feature a zig-zag banner to each side, further helping to divide each section of the page.

On large screens, an illustrated divider is added on each side of the illustration, to help separate different sections of the page

An illustration featuring a dog toy teddy, food bowl, a bag of 'snax' and two fishing-rod cat toys. — The illustration for the Pet Shop section highlights some of the items available in store

Illustration of a white rabbit wearing sunglasses in front of a blue sky, holding a carrot martini — A bunny enjoying his summer holidays, for the Boarding Service / Holiday Feeding section

Illustration of a golden-brown dog with a happy, relaxed smile and eyes closed, enjoying a shower in a mound of bubbles — Enjoying his bubbly shower, this dog sits at the top of the Grooming section

Illustration of a scarlet macaw sat on a branch, holding a telephone up to his beak — "Ello?!?" - who else but a parrot answering the phone for the contact section?

Illustration of a ginger cat reading a newspaper — This cat catching up on the day's paper is used in the News section

Each illustration was drawn by hand, scanned, and converted into a vector so that they are infinitely scalable, larger or smaller. They were then digitally coloured, using a limited colour palette that compliments Chiswick Pets' brand.

Logo Design

Chiswick Pet's logo is created from a hand-drawn illustration featuring the "C" and "P" initials, with a few simple lines used to create the shape of a cat, which I originally created a number of years ago along with the previous version of the website.

Chiswick Pets were happy with their current logo, and didn't want any significant changes as this would then require them to update signage, uniforms etc. For this rebuild of the site, I updated the fonts used to more modern-looking choices that matched those used on the site, and also slightly smoothed and refined the lines of the logo. This created a more up-to-date look, without the changes being so dramatic that the logo was no longer recognisable.

Simplified version without text

Full text version

The previous (2013) version of the logo

Gallery

Homepage of Chiswick Pet's website. Opening hours and contact details are displayed in a blue box on the right of the page — The homepage features a sliding banner, and easy-to-find opening hours and contact details

View of the Pet Shop section of the site, at the top is a zig-zag banner with pawprints and a central circular frame with an illustration — Each section of the site is delineated with an illustrated banner

View of the "Boarding" section of the site, at the top is a zig-zag banner with pawprints and a central circular frame with a rabbit in sunglasses — A consistent layout for each section makes the site easy to understand

Four separate boxes are shown on the page, each with different information about the Grooming service — Additional information can be found in the set of "info boxes" in each section

Contact section of the site, with phone number, opening times and address prominently displayed, and a Google map underneath — The Contact section features an interactive Google map

Mobile View

An altered layout is used for readability on mobiles and smaller screens

Chiswick Pet's homepage on a mobile screen, with a large blue box containing contact details and opening hours prominently in the middle of the page — On mobile screens, contact details and opening hours are displayed near the top of the page

View of the Boarding section on a phone screen. The heading banner is simplified and infoboxes are stacked in a single column — The page rearranges for easy viewing on mobile devices

The site navigation on a mobile screen, featuring large buttons arranged vertically down the page — A full-screen dropdown menu is used for navigation on mobile devices, with large, easy to use buttons

You can visit the site to see more at chiswickpets.co.uk