Long Branch Animal Clinic
Website Redesign
LBAC is a veterinary clinic based in Etobicoke, Canada. They are a friendly, family-run business and are here to help you with anything concerning your pets. They needed an updated website for their current and new clients to use. The old website was very outdated with a confusing UI that made it hard for new clients to understand what LBAC offered. On top of everything, it did not work on mobile at all adding another obstacle for any users.
The previous website
Landing Page
This is arguably the most important page on a website and this is where the old LBAC website struggled the most. There was no call to action, the UI and content were outdated and there were many broken parts that just didn't work at all.
Services Page
This page had similar problems as the landing page. The UI was very outdated with white font over a gradient for each of the menu items which creates poor readability. There are also no visuals to go alongside the words. These were the two main problems I addressed while redesigning this page along with many others like the overuse of blue.
Contact Page
This part of the website suffered in functionality for similar reasons as the last two pages. There was blue text over a blue background making it hard to read along with large empty spaces where it looks like there was once content. Along with the outdated information this makes for a confusing user experience.
Before | landing Page
Before | services page
Before | contact page
The new website
Landing Page
In the redesign, the call to action is very clear. When the user lands on this page the first thing they see is a short tagline about the company and then a call to action button directly underneath. This leads you straight to the services page where the user can learn everything about what LBAC has to offer. If they missed the button and scroll down further they will be met with four options, the first one being services. The overall layout is very minimal and clean so that the user will be able to find what they are looking for quickly and easily.
Services Page
For this page, I positioned the different services front and center with images so that it is very clear what LBAC offers. There are subtle animations on mouse hover that allow the user to understand what is clickable and what is not. A large full-width image was added under the services with a call to action that brings us to the contact page to prompt the user to set up an appointment.
Contact Page
I organized this page to have the most used information appear first which in this case is the email form and the general contact information for LBAC. Right underneath I have the updated emergency after-hour clinics with red buttons that take the user directly to the corresponding websites. To finish the page I of course had to use a full-width image of a cute dog :)
