Laptop displaying The Henry Beaufort School homepage on a desk with headphones and a notebook

The Henry Beaufort School

An intuitive digital experience for secondary school website

The Henry Beaufort School holds a special place for us as two of our team members studied there, so when the opportunity arose to help them redefine their online presence, we knew we had to get involved. Their existing website was built in an education specific, technically limiting page builder and had grown over time into a sprawling 150-page structure that made it hard for users to find what they needed. Our goal was simple: create something more intuitive, more engaging, and more reflective of the school’s energy and ambition.

Collage of website pages and content sections arranged in a grid layout
Browser window displaying The Henry Beaufort School homepage over a blurred campus background

What began as an out the box templated educational website is now a website that feels alive, purposeful, and future-proof. Built with care and technical precision, it gives the school the tools to tell their story, showcase their achievements, and attract new students with confidence.

Split-screen design showing student content cards alongside a mobile view of the website

The new design is sleek, accessible, and aligned with Henry Beaufort’s refreshed brand. We introduced subtle animation, improved navigation, and a consistent visual rhythm that feels premium yet friendly. Every page now loads faster, performs better, and works beautifully across all devices. We worked towards the goal to ensure parents, students, and staff have a seamless experience wherever they are.

Website panel featuring an Ofsted quote above an image of a student in a music classroom
Call-to-action button with the text “Find” and a yellow arrow icon on a light background

We began by mapping and consolidating the content, cutting the total number of pages by around 50% to create a clearer, more inviting user experience. From there, we designed a new modular system using custom Elementor and Advanced Custom Field components. This allowed us to quickly build dynamic, flexible page templates which meant creating all the pages was consistent across the site and giving the school the freedom to expand and evolve their site with ease.

Website section highlighting the school's curriculum with introductory text and a call-to-action button
Wireframe layouts showing desktop website page sections and content blocks
Wireframe layouts illustrating responsive mobile page designs and content sections
Smartphone showing the school's website on a wooden desk beside stationery, earphones and a coffee cup

Website not pulling its weight?