Composable Headless WordPress for Enterprise

Project Overview

WPEngine wanted to update their site into a streamlined, composable, and personalised powerhouse. Their new site needed to be the optimum platform for their design, development, and marketing teams to work with, while also offering the type of next-level agility required to make modern, iterative user experiences. 

The folks at WPEngine had two main goals with this site rework:

1. Power up their UX capabilities: 

They’re an ambitious company, and they knew that their existing architecture wasn’t going to match their UX aspirations. Providing world-class experiences would require turning over a new leaf, taking things back to the drawing board, and carving out a composable cornerstone to build on. 

2. Lead by example: 

Everyone knows that your company website is the face of your brand, but in web design and development it’s also a product demo. 

As a company that’s heavily involved in Headless technology, WPEngine wanted their site to be a shining example of what can be achieved with Headless WordPress.

Challenges & Solutions

Design & Development Workflows

The team at WPEngine were hampered by the state of their design-to-development workflow.

Pages they designed in Figma had to be recreated in their pagebuilder: which was a slow and inefficient process. The limitations of this method made brand consistency difficult to maintain and meant frontend changes were nowhere near as rapid as they wanted. 

WPE wanted a new, streamlined design and development workflow, one that would let them iterate and adapt quickly and ensure their user experiences are constantly refined.

Composable enhancement

Our approach to this problem was to create a symmetrical design and development workflow. 

This worked by building atomic design systems in Figma and React. The elements in each system mirrored each other’s design and functionality so that pages and components designed in Figma would translate directly into React. In practice, this meant that designs could be assembled with pre-built components and then quickly turned into fully functioning web pages without any compatibility headaches. 

This double-barreled composability unlocked a new kind of iterative freedom and agility for WPEngine.

Multi-site, Multi-problems

WPEngine manages a plethora of different websites for different services and sub-brands as well as for localised site versions. Unfortunately, these sites ran on various, disparate architectures, so managing and maintaining them took a lot of time and effort. This architectural conundrum also limited their ability to expand and scale – since creating new sites would only exacerbate the issue. 

WPEngine wanted a way to simplify the process of growing their platform, provide a single source of truth, and create cohesion for their teams and their users.

Centralised site management

To address these issues, we opted to create a consolidated codebase for their sites. This would mean being able to manage, maintain, and modify any and all of their sites from one centralised location as well as creating new sites in a way that was fast and consistent.

In order to create this unified architecture, the entire infrastructure was overhauled and rebuilt with composability in mind. Everything from the APIs to the database to the frontend themes was purpose-built specifically to work in a modular environment. 

To enable faster iteration, we implemented CI/CD pipelines. This meant that changes to the code were automatically integrated into the project and then sent through automated testing to check for bugs, compatibility issues, and security issues. By implementing this process, we could build and deploy quickly, knowing that changes would work correctly.

The combination of rapid iteration and purpose-built architecture provided WPEngine with a development framework that let them add new sites to their network in a consistent, composable way.

Powered-up Personalisation:

A significant driving factor behind WPE’s decision to upgrade was a desire for greater personalisation capabilities. To deliver a modern, engaging experience, they wanted a scalable, sustainable platform that would give them the flexibility to dynamically adapt to their customers’ needs.

Design System Agility

The design systems we built have equipped WPEngine to rapidly deploy new content and pages and easily iterate on existing content. 

An example of this in action is the returning customer homepage. This was a variation of the homepage we designed to feature personalised content that was tailored specifically to returning customers.

Using atoms, molecules, and organisms from the design system, we were able to quickly spin up new components and had the page assembled in record time. 

Additionally, midway through the project, WPEngine decided to refine and redesign their brand identity. Normally a Herculean effort, with our design system in place, this process only took about a week. 

An added benefit of this system is that it facilitates testing and encourages experimentation. 

The convenient design workflow and flexible components mean it’s easy to iterate on designs. Since changes are quick to create and implement without requiring a huge commitment of resources, it’s easier for their team to try out new ideas and variations. 

Behind-the-scenes boosts

When creating the centralised codebase, we rebuilt a lot of site functionality to make everything compatible and composable across all the sites. But we also took the opportunity to make changes to optimise the look and feel and enhance the user experience.

We added more consistent multilingual features, more consistent integration with their CDP segment, and created a navigation menu to switch between sites. To enhance the checkout experience we implemented improved dynamic pricing with a more consistent integration with their pricing API to calculate addons and bundles.

Combining their sites into a unified architecture also laid the groundwork for scalable, composable personalisation. This implementation has given them the ability to rapidly modulate their content for dynamic, evolving experiences. 

Conclusion

WPEngine’s composable transformation had a significant impact on their user engagement and conversion rates. Following the launch of the new site, they experienced a 33.5% increase in lead generation as well as a 30% increase in transactions. 

In addition to the immediate effects of the change, WPEngine’s new composable architecture and workflows have positioned them for longterm success and scalability.