Transformational Website Tech

We sat down with Gavin Allan, Principal Technologist at CTO Labs to talk through the transformational tech story that sits under the new CTO Labs website. You might want to take note of the potential 90% drop in operational costs …

Tell us about you Gav, what’s your role?

I’m Principal Technologist at CTO Labs, which is a specific way of saying I’ve done lots of techy stuff in lots of different industries. I’m the type of guy that gets pointed at a complex problem, and it’s a case of “solve that”.

Tell us about the CTO Labs Website rebuild – how did that land on your plate?

We had a template-based site for several years - it served us well!

But like all websites, we knew that the user experience could be much stronger and the performance could be better, and we had outgrown the brand story it was telling the world – both visuals and words, as well as the tech that underpinned it.  

We’ve become so accustomed to the way websites have always been built in the past, but the world – and tech – has changed, especially with the advent of cloud technologies. Old assumptions - including cost, security, flexibility, and resilience - are being turned on their head. So my goal was about realising that and showing how modern cloud native development surpasses the old ways of doing it

What came first, the rebrand or the tech?

It’s not a textbook approach, but we ran the two things mostly in parallel, with brand design developed, then brand story and content development coming together alongside tech selection, website UX framework and UI design.
Obviously, Tech and Marketing worked pretty closely for a bit! We also engaged an external partner to help fast track UX design.

Tell us about the tech, what’s sitting underneath?

The website has been built using a cloud native approach, where individual focussed component services are loosely coupled together to form a component ecosystem.

Additionally, because the solution is about loosely coupled components, we got to choose which component and tools fit best with our requirements, both business and technical – like when looking for an outfit and being able to buy a pair of socks, shoes and hat rather than having to purchase the whole uniform, it's not "all or nothing". But in the knowledge that if we need to add more, new components (jackets and shirts) are easy to swap out or add in, and the flexibility is limitless. 

We’ve used a Headless Content Management System (CMS) - a CMS that doesn’t try to present or display the content, it just holds and manages it, the idea is to select the components based on the "do one thing and do it well" approach.

From there, we’ve used static site generation, a technique that doesn’t connect your website to a big database, but instead it stores pre-rendered files ready to go. The content can now be served much, much faster. 

One of the big benefits of this approach is that the CMS is no longer a production dependency for the website – it’s completely decoupled – so if it falls over, the website would not be affected. That’s also a huge big plus in the world of resilience and cyber risk.

This leads to hosting on the edge, making the distance between your customer and the code as small as you can get it, this gives you a much faster site. It all comes down to technical agility, faster time to market, and a more seamless experience for website visitors, with reduced cost.

The main tech components we selected for the solution are:

• Next.js as the site framework

• Vercel for hosting

• Tailwind for styling

• Storyblok as the CMS

It's an incredibly powerful stack but every component in it can be swapped out for something else should the need arise. This gives you a solution that can evolve over time and change as your requirements do.

“One business we worked with, with the website hosting infrastructure costs alone in the order of $100k annually, and then add on licensing and everything else. They were looking at a 90% reduction in operating costs by moving to a cloud native approach. That’s no small change.”

fig: high level view of the website build, publishing and hosting workflow

The CMS is no longer involved once the site is in production because the work is already done. Another benefit is if there's a mistake in the way the site builds, it just doesn't deploy it, so the audience will be none the wiser.

So I’m thinking of a cloud native approach to my website - what’s in it for me?
It’s difficult to peg my hat on just a few benefits, but here’s my top 3:

1. You’ll reduce your operating costs by a lot. It depends on what you are currently signed up for, but for big corporate websites, a reduction of at least 75% is realistic.

2. You’ll reduce your security risk significantly, with your website no longer vulnerable to CMS intrusion, one of the key vulnerabilities to most websites.

1. You’ll be able to make capability changes frequently, quickly and with minimal effort, quite literally going from months or weeks to minutes. Team velocity should see a big increase.

Any words of caution?
Think of this as a change program beyond the website architecture itself, and you will be on the right track:

1. Involve all stakeholders early on – there will be changes to work practices, planning, resourcing, budget, from tech to business managers and the marketing team.

2. Allow for some learning time – you are introducing a new suite of tools so that means upskilling and reskilling by the team, and perhaps some unlearning as well around methodologies and work practices.

3. Don’t over complicate – with so much flexibility, experienced judgement at the right times, will help to choose and shape components in a way that doesn’t overcook the egg. 

“Underneath it all, don’t overlook the fact that it is fundamentally about moving to a modern, dynamic, agile customer interface for your enterprise. As the market faces off against high workforce attrition in tech, giving your developers this kind of tech challenge and development experience is precisely the type of thing that can encourage existing developers to stay and help attract new talent.”

Considering a rethink of your website?

Talk to Gavin! Just tap on "book a callback" below and put "chat with Gavin please" in the subject heading.