National Pug Protection Trust
The project
The National Pug Protection Trust (NPPT) is a UK-based charity dedicated to rescuing, rehabilitating, and rehoming pugs in need. With a growing network of volunteers and supporters, they needed a website that not only raised awareness but also streamlined their adoption and donation processes.
Our aims
The previous online presence lacked clarity, accessibility, and ease of use. NPPT needed a website that:
- Was easy to navigate for users of all abilities
- Had a warm and engaging design to reflect the charity’s values
- Made donating and applying to adopt a seamless experience
- Performed well across all devices and browsers
We worked closely with NPPT to understand their audience and goals. Our solution included:
- Accessibility-first design – Ensuring WCAG compliance for a frictionless user experience
- Clear user journeys – Making it effortless to donate, volunteer, or adopt
- Performance-focused build – Fast-loading pages optimised for mobile and desktop
- Content structure & SEO – Improving visibility and engagement
The result
- A highly accessible, user-friendly website that embodies NPPT’s mission
- Increased engagement from potential adopters and donors
- A sustainable, easy-to-manage platform for future growth
Evolving the Brand Identity
Before the redesign, the National Pug Protection Trust had a visual identity that didn’t fully align with its mission. The colours and typography lacked cohesion, and the overall aesthetic didn’t convey the warmth, trust, and professionalism needed to connect with their audience.
As part of the project, we refined the brand palette to create a more approachable, accessible, and consistent identity. The new colours were carefully chosen to reflect compassion, reliability, and energy, ensuring the charity’s online presence felt inviting and engaging.
Below, you can see a comparison of the previous brand palette versus the new, refined palette, which now provides better contrast, readability, and emotional impact.
The old palette
-
- Lilac
- #a05de1
- rgb(160 93 225)
- hsl(270deg 69% 62%)
-
- Dark Grey
- #333
- rgb(0 0 )
- hsl(0deg 0% 0%)
-
- Light grey
- #eee
- rgb(238 238 238)
- hsl(0deg 0% 93%)
The new palette
-
- Amethyst
- #8f5ad6
- rgb(143 90 214)
- hsl(266deg 60% 60%)
-
- Dark Amethyst
- #461e7b
- rgb(70 30 123)
- hsl(266deg 60% 30%)
-
- Very Dark Purple
- #230f3d
- rgb(35 15 61)
- hsl(266deg 60% 15%)
-
- Yellow
- #ff0
- rgb(255 255 0)
- hsl(60deg 100% 50%)
-
- Cyan
- #009dcc
- rgb(0 157 204)
- hsl(194deg 100% 40%)
-
- Dark Grey
- #444
- rgb(68 68 68)
- hsl(1deg 0% 27%)
-
- Grey
- #999
- rgb(153 153 153)
- hsl(0deg 0% 60%)
-
- Light Grey
- #ccc
- rgb(204 204 204)
- hsl(0deg 0% 80%)
-
- Off-white
- #f0f0f0
- rgb(240 240 240)
- hsl(0deg 0% 94%)
Enhancing Accessibility with Improved Colour Contrast
Ensuring strong colour contrast is essential for readability, especially for users with visual impairments. The previous National Pug Protection Trust website had several areas where text contrast was too low, making content harder to read - particularly for those with colour blindness or low vision.
We conducted a thorough WCAG 2 and WCAG 3 contrast analysis, identifying areas that fell below the recommended contrast ratios. Using these insights, we refined the colour palette and adjusted text/background combinations to meet at least WCAG 2 AA standards, with many elements now aligning with WCAG 3 APCA (Advanced Perceptual Contrast Algorithm) recommendations.
The visual comparison below highlights the before-and-after improvements, showing how the updated contrast ensures greater readability and compliance with modern accessibility standards.
The old site
-
- Lilac / White
- Lc -73
- AA+ 4.08
-
- White / Lilac
- Lc 67.5
- AA+ 4.08
-
- Light Grey / Dark Grey
- Lc 88.6
- AAA 10.89
-
- Dark Grey / Light Grey
- Lc -90.9
- AAA 10.89
The updated brand
-
- Amethyst / White
- Lc -76.8
- AA 4.56
-
- White / Amethyst
- Lc 71.3
- AA 4.56
-
- Dark Amethyst / White
- Lc -100.6
- AAA 12.12
-
- White / Dark Amethyst
- Lc -100.6
- AAA 12.12
-
- Very Dark Purple / White
- Lc -106.3
- AAA 17.4
-
- White / Very Dark Purple
- Lc 104
- AAA 17.4
-
- Dark Amethyst / Yellow
- Lc -95.4
- AAA 11.29
-
- Yellow / Dark Amethyst
- Lc 92.3
- AAA 11.29
Optimising for Performance with Core Web Vitals
A great website isn’t just about looks. It needs to perform well, too. Google’s Core Web Vitals measure how fast, responsive, and stable a site feels for users. These metrics impact both user experience and SEO rankings, making them crucial for any modern website.
Before the redesign, the National Pug Protection Trust website struggled with slow load times, layout shifts, and unoptimised assets, leading to a subpar user experience. By implementing performance best practices (including optimised images, streamlined code, and efficient caching), we significantly improved the site’s Core Web Vitals scores.
The result? Faster page loads, smoother interactions, and a more accessible experience for all visitors.
Mobile (new site)
Performance:
99%
Accessibility:
100%
Best practices:
96%
Search Engine Optimisation:
100%
Full details
-
Largest Contentful Paint:
2s
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:
2.6s
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:
10ms
Success: < 200ms Warning: 201ms - 600ms Error: > 600ms
-
Page weight:
4.23MB
Success: < 1.50MB Warning: 1.50MB - 2.23MB Error: > 2.23MB
Desktop (new site)
Performance:
100%
Accessibility:
100%
Best practices:
96%
Search Engine Optimisation:
100%
Full details
-
Largest Contentful Paint:
0.5s
Success: < 2.5s Warning: 2.6s - 4s Error: > 4s
-
First Contentful Paint:
0.3s
Success: < 1.8s Warning: 1.81s - 3s Error: > 3s
-
Speed Index:
0.4s
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:
4.23MB
Success: < 1.50MB Warning: 1.50MB - 2.23MB Error: > 2.23MB
Tech used
- Static site generation with Astro
- CSS transformations with PostCSS
- Front end build tasks with Gulp
- Hosted on Vercel
- Code stored on GitHub
- Print on demand services via RedBubble
Reyt good
The National Pug Protection Trust now has a website that truly serves its cause. By combining thoughtful design, accessibility, and solid performance, we’ve created a platform that helps pugs in need - one paw at a time. 🐶
