Ship your Contentful website faster with incremental architecture

For anyone building a website today, the same question arises time and again. How do we build sites with a great architecture that work well for the teams that have to use it every day? For all the tech leads out there grappling with the same question, this post is for you. 

We’ll find the answer by acknowledging that your team's workflows are located between the systems that make up your website. Using Jamstack technologies like Gatsby, Contentful, and others, you can build software architectures incrementally. Let’s call it incremental architecture, for short.

What is incremental architecture?

Incremental architecture is an approach to making key architectural decisions during the project, rather than postponing your project kickoff until after you’ve figured out every last detail. It's also about saving time by working in parallel between different systems. 

Given that developers have long since moved on from the waterfall methodology of project management — a linear progression of milestones from beginning to the end of the project — to agile workflows, assembling your architecture incrementally isn’t a major leap from the way we’re already used to working.

The typical Jamstack website is made up of a few different types of systems. In the diagram below I’ve assembled a few of them — starting with Gatsby, a Javascript framework that’s fast, secure, and offers a great digital experience. Paired with that is Gatsby Cloud, a hosting solution for equally fast builds, deployments, and previews. That’s two of the critical website functions — framework and deployment — fulfilled.

Next we’ll look at the other systems that are essential for your website to function as it should. You’ll probably be using Contentful to manage your content, a headless content platform that offers far greater speed and scale than legacy CMSes. Then you’ll be adding more items like React components, analytics, and ecommerce. 

How are these systems going to work together?

The consequence of this modular architecture (and the efficiencies they bring) is that the complex workflows of your team are now residing between these different systems — the relationships they share — and not exclusively within them.

A lot of your job as a tech lead is just thinking about how these systems are going to work together. Maybe you chose Gatsby because of its CMS integrations, and Gatsby Cloud because of its build speed. Turns out you'll have to think about a few other things too. Your content editors probably want their changes to go live quickly and they may want to preview their changes as well. 

Then other marketers might want to build landing pages in your CMS, and you'll need to support ecommerce. So, you start figuring out how that will work — your data integrations, your cart, checkout flow, and you realize that your ecommerce system isn't going to store all the data you need. You may want to handle custom fields on your products or product variance, and go handle that in your CMS. You start adding analytics and you see you've got a performance hit from your trackers, and you want to mitigate that.

So, you can keep going here, adding search, authentication, forms, all kinds of other features. But by now the point should become clear: as you add systems and workflows together, that's how you get your architecture. And it turns out, you're the architect. If you're only just learning that now; congratulations: You're one of today's lucky 10,000. 

Compress project timelines with parallel decision making

Incremental architecture means that when it's possible, you can make the tough architectural decisions during the project instead of pushing back the start of the project in order to make them. It also means you can synchronize different work on different systems. You can put content into Contentful while you're building out your Gatsby site at the same time.

To see how this might work, let’s look at a traditional project timeline. In this project timeline, you do all the evaluation up front, sort of step by step. Then there's some delay between approval and kickoff. Next, after kickoff, you add the content to the CMS. Following this sequential order, you develop the site, do some launch prep, and then you launch it. 

And this is a fine way of doing software. But there's an even better way with incremental architecture. For instance, you could evaluate these different systems in parallel. Instead of plodding through them one by one, you could evaluate your CMS, framework, and hosting all at the same time. And it’s often smarter that way, because then you can evaluate how well they work together. 

You can mock your content during the initial development, which lets you add content to your CMS in tandem with developing your site. Teams can switch between building React components and an ecommerce site. And along the way, they can evaluate other parts of the website, interleaving those project steps in parallel.

This is how you can take advantage of modular architecture to not just deliver better business results, but do so in an accelerated timeline. This really demonstrates the value of these new technologies to all the stakeholders that you have in your organization and with your clients.

Example: Jaxxon built an ecommerce platform and React components at the same time

Let's look at an example where a team has followed exactly this process of incremental architecture, building an incredible site with Gatsby and Contentful that delivered spectacular business results.

Jaxxon is a market leader in men's jewelry with over 20,000 five-star reviews and nearly one million customers. If we take a closer look at their architecture, we can see that they started with Shopify as their ecommerce base. They stored their content in Contentful, and they built React components in Storybook. 

When they were first starting their project, they had a senior developer and a junior developer. The senior developer tasked the junior developer to build out the components in React and in Storybook. 

Meanwhile, the senior developer worked on the rest of the architecture. This division of tasks enabled them to make concrete progress on the site at the same time as they were figuring out the architecture, for example, how the checkout flow would work and how they were going to handle rewards or discounts, or some of the other tricky parts of ecommerce.

They also selected Heap for analytics, which let them test different product modules and see how effective they were at converting visitors to customers. 

Jaxxon built their new site in two months, and doubled their conversions from 1% to 2%, and reduced their bounce rates by more than half, from 40% to 12%. The lesson from Jaxxon is that you can build React components in Storybook to make progress on your site, while simultaneously figuring out how your ecommerce is going to work in practice. 

The site is now twice as fast and has the ability to ship improvements more quickly over time, but the company’s new stack also means they have greater flexibility in the editing process. Jaxxon CEO Josh Deemer is actively involved with the content, and the way Contentful and Gatsby is set up means that he can go in and build pages without an intermediary.

Even better — the whole migration process only took a couple of months.

Since moving to a headless architecture, Jaxxon has more than tripled its revenue, and now launched a women’s brand, too. Read more about this success story on the Gatsby blog.

Further information and resources

Wrapping up, your team's workflows are not just inside each system. They are between the systems, and that adds some complexity. But you can build great architectures using this principle of incremental architecture, which gives you the power to make (and remake) critical decisions at any stage of the project, rather than waiting for things to fall into place. That, plus the ability to proceed with your work on different systems in parallel. 

What does it mean for you to be the architect of a system? One thing that junior engineers learn on the path to becoming senior engineers is that architectures are complex. The more moving pieces you have, the more things that can go wrong. But we're here to help you. At Gatsby we’re actively supporting teams to navigate the architectures they're constructing and have published resources to help them along the process. 

Contentful’s API-first content platform is purpose-built for creating omnichannel digital experiences. The platform helps digital teams innovate, iterate and go to market faster with an agile, modern tech stack that integrates seamlessly with ecommerce tools. Visit the Contentful Marketplace to see these integrations, and read our customer use cases to learn more about how Contentful can help your organization grow its digital footprint.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.