The project
The original website had several issues affecting usability, performance, and clarity:
- Difficult navigation – Users struggled to find key information quickly
- Inconsistent branding – Colour contrasts and fonts impacted readability
- Slow load times – Affecting both user experience and SEO
- Lack of accessibility – Failing to meet WCAG standards
They needed a modern, accessible, and engaging website that made booking sessions, understanding hydrotherapy benefits, and contacting the team effortless.
We took a ground-up approach to rebuild the website, focusing on clarity, accessibility, and speed. The new site now features:
- Streamlined navigation – A clear structure making it easier for users to find what they need
- WCAG-compliant design – Improved colour contrast, typography, and interactive elements
- Optimised performance – Faster loading times with Core Web Vitals improvements
- Responsive & mobile-friendly layout – Ensuring accessibility across all devices
Evolving the Brand Identity
The previous branding lacked structure and accessibility, with colour choices that did not meet WCAG 2 contrast standards. We reworked the brand palette to improve readability, contrast, and visual consistency, while maintaining the brand’s professional and caring feel.
Before and after: colour palette comparison
Previous brand palette
-
- Teal
- #34b5a8
- rgb(52 181 168)
- hsl(174deg 55% 45%)
-
- Grey
- #333
- rgb(51 51 51)
- hsl(0deg 0% 20%)
Updated brand palette
-
- Teal
- #10aba6
- rgb(16 171 166)
- hsl(178deg 83% 37%)
-
- Darker Teal
- #247f7c
- rgb(36 127 124)
- hsl(178deg 56% 32%)
-
- Darkest Teal
- #053933
- rgb(5 57 51)
- hsl(174deg 85% 12%)
-
- Black
- #0e0e0e
- rgb(14 14 14)
- hsl(0deg 0% 5%)
-
- Grey
- #2d2d2d
- rgb(45 45 45)
- hsl(0deg 0% 18%)
-
- Slate
- #525252
- rgb(828282)
- hsl(0deg 0% 32%)
-
- Light Grey
- #ccc
- rgb(204 204 204)
- hsl(0deg 0% 80%)
These refinements ensure that text remains clear, even for users with visual impairments, and that all colour choices meet WCAG 2 AA and WCAG 3 APCA standards.
Colour contrast
-
- Teal / White
- Lc -59.2
- FAIL 2.84
-
- Teal / Black
- Lc -78.2
- AA 6.8
-
- Darker Teal / White
- Lc -78.2
- AA 4.77
-
- White / Darker Teal
- Lc 72.8
- AA 4.77
Performance and Core Web Vitals Improvements
Page weight and resources
Google’s Core Web Vitals play a crucial role in user experience and SEO. The previous website suffered from slow load times, layout shifts, and unoptimised assets, leading to poor scores in key metrics. We tackled these issues by:
- Optimising images and assets – Reducing file sizes without loss of quality
- Enhancing code efficiency – Removing unnecessary scripts and improving structure
- Implementing better caching and loading strategies – Ensuring faster page delivery
Page weight comparisons
Core Web Vitals
Mobile (old site)
Performance:
76%
Accessibility:
96%
Best practices:
100%
Search Engine Optimisation:
100%
Full details
-
Largest Contentful Paint:
4.4s
Success: < 2.5s Warning: 2.6s - 4s Error: > 4s
-
First Contentful Paint:
2.9s
Success: < 1.8s Warning: 1.81s - 3s Error: > 3s
-
Speed Index:
4.7s
Success: <3.4s Warning: 3.5s - 5.8s Error: > 5.8s
-
Cumulative Layout Shift:
0.074
Success: < 0.1 Warning: 0.11 - 0.25 Error: > 0.25
-
Total Blocking Time:
0ms
Success: < 200ms Warning: 201ms - 600ms Error: > 600ms
-
Page weight:
1022KB
Success: < 1.50MB Warning: 1.50MB - 2.23MB Error: > 2.23MB
Mobile (new site)
Performance:
100%
Accessibility:
95%
Best practices:
100%
Search Engine Optimisation:
100%
Full details
-
Largest Contentful Paint:
1.5s
Success: < 2.5s Warning: 2.6s - 4s Error: > 4s
-
First Contentful Paint:
0.9s
Success: < 1.8s Warning: 1.81s - 3s Error: > 3s
-
Speed Index:
0.9s
Success: <3.4s Warning: 3.5s - 5.8s Error: > 5.8s
-
Cumulative Layout Shift:
0
Success: < 0.1 Warning: 0.11 - 0.25 Error: > 0.25
-
Total Blocking Time:
0ms
Success: < 200ms Warning: 201ms - 600ms Error: > 600ms
-
Page weight:
271KB
Success: < 1.50MB Warning: 1.50MB - 2.23MB Error: > 2.23MB
Desktop (old site)
Performance:
98%
Accessibility:
96%
Best practices:
100%
Search Engine Optimisation:
100%
Full details
-
Largest Contentful Paint:
0.9s
Success: < 2.5s Warning: 2.6s - 4s Error: > 4s
-
First Contentful Paint:
0.8s
Success: < 1.8s Warning: 1.81s - 3s Error: > 3s
-
Speed Index:
0.8s
Success: <3.4s Warning: 3.5s - 5.8s Error: > 5.8s
-
Cumulative Layout Shift:
0.047
Success: < 0.1 Warning: 0.11 - 0.25 Error: > 0.25
-
Total Blocking Time:
0ms
Success: < 200ms Warning: 201ms - 600ms Error: > 600ms
-
Page weight:
1022KB
Success: < 1.50MB Warning: 1.50MB - 2.23MB Error: > 2.23MB
Desktop (new site)
Performance:
100%
Accessibility:
95%
Best practices:
100%
Search Engine Optimisation:
100%
Full details
-
Largest Contentful Paint:
0.3s
Success: < 2.5s Warning: 2.6s - 4s Error: > 4s
-
First Contentful Paint:
0.2s
Success: < 1.8s Warning: 1.81s - 3s Error: > 3s
-
Speed Index:
0.2s
Success: <3.4s Warning: 3.5s - 5.8s Error: > 5.8s
-
Cumulative Layout Shift:
0
Success: < 0.1 Warning: 0.11 - 0.25 Error: > 0.25
-
Total Blocking Time:
0ms
Success: < 200ms Warning: 201ms - 600ms Error: > 600ms
-
Page weight:
271KB
Success: < 1.50MB Warning: 1.50MB - 2.23MB Error: > 2.23MB
The result? A faster, smoother, and more stable website that provides an optimal experience for both users and search engines.
Tech used
- Static site generation with Astro
- Content management with Sanity
- CSS transformations with PostCSS
- Front end build tasks with Gulp
- Emails powered by Resend
- Hosted on Vercel
- Code stored on GitHub
Splish splash!
The new Burntwood Canine Hydrotherapy website now reflects the professionalism, care, and expertise of the business, providing a seamless and accessible experience for every visitor.
- Higher engagement – Users can now easily find important information
- Mobile-friendly design – Ensuring accessibility across all devices
- Better performance and SEO – Faster load times and improved Google rankings
- A more accessible website – Making it easier for all users