Butternut Box logo

Working smarter, not harder by developing a new CMS workflow

Huckletree provides flexible and curated workspaces in the heart of the innovation ecosystem in the UK and Ireland. They provide startup support, accelerator programmes, and an extensive coworking network.

With over 3,000 members and housing more than 300 companies, Huckletree is powered by 45 passionate people working hard behind-the-scenes. Add to that mix 22 dogs, 7 spaces, 2 co-founders and a singular mission to be braver together and you've got a recipe for success.


The Snapshot

We redeveloped Huckletree's CMS workflow to make it easier for their internal teams to add and update content; something that was previously quite difficult, time-consuming and resource-intensive. Our improvements dramatically helped Huckletree’s content team, saving them substantial time (and headache) as a result. 

To increase internal uptake of the new workflow we also created a handbook to help onboard new users. We incorporated best practices to improve Huckletree’s overall SEO, and made the entire Huckletree fully responsive across mobile, tablet and desktop.

A picture of the Huckletree site on a laptop and mobile phone

The problem

Huckletree’s original brief was to help expand a new, dedicated section on their site. Their talented design team provided the components and patterns, and we were asked to develop and integrate the new components into their CMS (Content Management System) of choice

However the content management team found the process for adding any new content to the CMS overly complex and time-consuming.

In order to achieve our common goal of integrating new components into the Huckletree main site, we considered ways in which the workflow could be optimised, without requiring significant infrastructure changes or costly technology upgrades. 

Quote mark, specifying a quote from a client or stakeholder
Oliver Huckletree quote here
Butternut Box Engineering director, Niall Paterson
Oliver Easton-Hughes, Growth Director, Huckletree

Gathering requirements

As part of a collaborative Discovery workshop we discussed and uncovered the pain points Huckletree's internal and external users were experiencing.

We mapped both journeys and highlighted the various challenges and opportunities.

We ran a tech spike to further understand the technical requirements and constraints, and created detailed user flows for the new solution.

Ultimately we arrived at a better workflow, even if it was outside of the original brief. Our proposed solution would have a profound impact on both the development of the Huckletree site and the content management team's workflows and processes.

Huckletree process diagram

Designing and developing a better CMS workflow

Huckletree’s tech stack is a Next.JS codebase, driven by a headless CMS called ButterCMS.

Huckletree's existing workflow was arduous. When a new page was created it required a new page type to be created — manually — by a developer. Then a matching React component was created; one that understood how to render each of the fields for that page type.

Finally, the content management team would fill out the fields for the new page type, and a developer would have to — manually — deploy the updated site.

🤨 Psst... What's a headless CMS? 
A headless CMS is a content management system that — unlike traditional CMSs — doesn't handle the rendering of any content. It only edits and stores content.

The original process required continuous interaction between the content management team and a developer. We quickly realised that allowing the team to handle page creation and editing themselves would drive more efficiency and save time.

The existing process also required ongoing maintenance for each page by the Huckletree development team. Whenever new fields got added to a page in the CMS, they had to remain in-sync with the React component that was responsible for rendering it. If a field was removed from a page (but not the corresponding React component) it might cause errors during deployment, or render issues for end-users.

React to the rescue

To avoid moving to an entirely new CMS (which would have cost & tech implications), we instead implemented a single page type in the CMS, coupled with a single React component.

The React component would consume newly-created pages of the same type, and  dynamically render them to a specified path. Previously developers would create a page manually, and publish to a directory/folder structure that matched the path.

By evolving the CMS into a more modern platform, the Huckletree content team were able to save substantially more time. As a result they could focus their efforts on more strategic initiatives. More, rather than focusing on manual updates they were able to focus on producing great content.

Bridging the design & dev divide

To bring the solution to life we worked closely with Huckletree’s internal design team.

With our input they designed the new modules and component library for the new site section, and updated existing page structures. Collaboratively we updated the global navigation to make it easier for users to book spaces, and added responsive UI design patterns into Huckletree's existing design files.

To make handover and adoption easier, we also created a bespoke CMS handbook to help Huckletree's internal teams learn how to update and add new content to their site quickly and easily.

The Notion handbook created for Huckletree

The outcomes

Improving the workflow for Huckletree's internal marketing team has been the major win for this project.

What started as a basic brief became a much larger efficiency gain that has freed the content management team from their previous workflow’s constraints. The team now has increased flexibility over how a page is structured, able to create new pages, edit content and change how all the components are ordered... all without the input of a developer. 

The UX and navigation enhancements will help Huckletree to grow their business and increase revenues, and the newfound ability for the content team to create web forms (complete with Google Analytics tracking code) means they can create and measure success metrics easily.

Finally, we were also able to reduce Huckletree’s Next.JS codebase by around 30,000 lines of code. This huge reduction will make it much easier to maintain and debug going forwards.

We continue to work collaboratively with the Huckletree team in a support and maintenance capacity.

Huckletree logo

Book a call, let's talk shop

We want to partner with exciting funded startups, pioneering scale-ups and ambitious enterprise organisations.

If that's you, we'd love to hear more about your ideas and challenges. Book your call now, or email us directly.

Book your 30-minute call now