For master carpenters and builders, Carpenter Oak, we crafted a characterful and custom modular website using Next.js and Prismic.

We designed and built a new website for Carpenter Oak, migrating from a bloated Wordpress to a fresh and lightning-fast Next.js and Prismic headless build, complete with an Algolia-powered search.

Carpenter Oak needed a redesign, a useability and SEO boost, and the ability to target different types of users with different, custom content. They also needed help migrating a large archive of articles and projects from Wordpress to Prismic.

The design was beautifully taken care of by our partners, Public Websites. They created a characterful modular design that gave the client the flexibility to migrate their old content into an image-led portfolio of case studies, services pages, materials pages, and blog posts. This extended into a series of adaptable and extendable templates for CO to organise and present in detail both the different services they provide and the different materials they use.

Next.js, Prismic, React and Netlify make the perfect combination for this type of project. Prismic’s modular approach was perfect for maximising the scope of their designs, reusing flexible components to adopt a coherent yet custom visual language throughout the site.

Moving from Wordpress to a headless Next.js build provides a significant boost in terms of speed, performance, and the associated SEO improvements that come with it. Algolia search allowed us to set up custom searches and filters through their portfolios of projects and articles. Combining this with Prismic, they can now add, edit, and order their own set of unique tags and filters for all of their content.

An interesting feature of the site was the need to tailor content displayed to different types of users. Carpenter Oak’s target audience can largely be split into three segments: residential ‘self-builders’, who are interested in expanding their own homes; professional architects and builders who handle larger, commercial builds; and a ‘blended’ type, who may be interested in both types of builds.

We built a non-intrusive mode switcher into the site, which functions as a tracker that gauges how a user interacts with the site. In the Prismic backend, the Carpenter Oak team has the ability to mark certain actions and content as associated with one of the three modes. Once a user hits a threshold of ‘residential’ or ‘commercial’ behaviour, we serve them a popup to check if they would like to switch to a more tailored mode. In each mode, content about services, materials, and historical case studies is then ordered and displayed to best cater to that user’s needs and interests.

Beyond this, we also implemented some lovely moments of scroll-based animations through the site, including a year-based timeline of key moments in Carpenter Oak’s history for their About page.