Today's forward-thinking commerce enterprises are assessing headless and composable technology while strategically planning their digital transformation journey. But why is there so much buzz around these new paradigms? And, what is the right way to implement this new technology to maximize business outcomes?
This article will analyze the business outcomes associated with superior headless technology, the business value composable commerce provides, and the best course to modernize your commerce technology while reducing risk and maximizing ROI. To do this, we will explore modern Headless Progressive Web Apps (PWA) technology, define key KPIs this technology improves, and look at how something called a Strangler Pattern will be your digital transformation's new best friend.
The term headless has been accepted in technology since IBM released its first headless server deployment model in the 1970s. As it applies to commerce technology, the phrase headless has been growing in popularity since 2015. Today, it is hard to get away from the two words headless commerce.
Although often critiqued for being a buzzword and "not right for all," headless commerce has become mainstream because of its business impact. Forward-thinking brands and retailers have already seen the fruit of their labor; conversion rates have increased, average order values (AOV) have increased, and return on ad spend (ROAS) has offered superior returns. But there is a secret that the early adopters have kept close to their chest; not all headless technology is the same.
The now six-year-old famous Deloitte report titled Milliseconds Makes Millions used concrete data to show how a 0.1-second improvement in page load speed led to a 10% increase in consumer spending. Google, Amazon, and Walmart have all conducted similar studies with similar results.
Simple math shows that a boost in conversion rates increases revenues. And data has proven time and time again that page load speed can boost conversion rates. But what drives that increase is all too often tucked under the oversimplified umbrella of "page load speed." We need to go one layer deeper to understand the phenomenon that’s driving the conversion.
At Nacelle, we noticed an interesting trend after our 35th headless go-live merchant. Using Nacelle's React or Vue Commerce Accelerator Kits will often score a 100/100 in the performance category when using measuring tools like Google Lighthouse. But, in the real world, messy third-party JavaScript apps were being loaded on top of the commerce component codebase, significantly slowing initial page load speeds. Adding a reviews app, a personalization app, and an analytics tool will often plummet scores below 15/100. Yet, our merchants continued to see improvements in conversion rates and AOVs. How could this be?
One brilliant innovation of PWA technology is the ability to run as a Single Page Application (SPA). SPAs give the online store a "native app" experience because the entire website feels like it only loads once, after which the shopper will never "redirect" and change pages again—no more traditional loading after every click, and things feel "instant." It turns out that this shift in the website user experience, popularized by modern JavaScript frameworks like React Next and Vue Nuxt, is arguably the most impactful for key business metrics, including conversion rates and AOV.
While peculiar at first, this phenomenon is quite logical. Juxtapose this website experience to a native application on the phone; often, when opening an app on your iPhone/Android, it does take several seconds to "boot up." Once the app finishes "powering on," things rarely need to be reloaded. This is analogous to the PWA that may take several seconds to load initially but presents a UX of minimal/no loading on sequent clicks.
Unfortunately, popular speed tests like Google Lighthouse only look at the first page load and fail to measure the performance of subsequent clicks. We are still in a world that is unwilling to calculate the most important variables regarding the drivers of business results.
What does this mean for the commerce organization? Headless, when used to open the door to a single-page PWA, will drive up conversion rates and AOV. Why is headless needed? Simply because past front-end frameworks are incompatible with the new technology required to produce the single-page experience. To get that sought-after increase in conversion, a merchant needs all three ingredients:
Merchants today find themselves in a dilemma. While they are interested in going headless to drive conversion rates and AOV, they are intimidated by the notion of migrating to a new commerce platform, and rightfully so. Often rip-and-replace migrations take 24 months or longer to complete. These long-standing technical projects are riddled with risk, high capital expenditures, unexpected functionality loss, downtime, new system training, complex data transformations, and even lawsuits.
To combat this, headless commerce vendors offer a strategy to decrease migration risks called the Strangler Pattern. Despite its name, the Strangler Pattern is not the latest popular wrestling move nor a Navy Seal target take-down technique.
The software engineering world is fascinating because the problems engineers solve are rarely genuinely unique. There are a series of so-called engineering design patterns that, when implemented, use best practices to solve a group of similar problems. One design pattern used to upgrade legacy technology to new technology is called the Strangler Pattern.
Martin Fowler, a famous engineer architect, originally coined the term. When visiting Australia with his wife, Martin was fascinated by the Fig Strangler Trees. These figs plant themselves at the top of the tree and gradually grow down and over the tree until they reach the soil. In the end, the fig overgrows the original tree and strangles it, effectively killing the host. One can easily visualize the analogy relating to technology upgrades; start in one part of the stack and slowly overtake the entire system until the legacy technology is no longer needed.
This approach decreases risk and is generally agreeable. However, there are many different ways to execute the Strangler; some are more favorable to business outcomes than others. Therefore, how a team implements the Strangler Pattern is a critical decision for the merchant.
Traditionally, the Strangler started with a page category, for example, the product detail page (PDP). Once completed and deployed, the pattern would then move on to the product listing page (PLP), complete the new code, then deploy; the convention would cycle through the home pages, landing pages, blogs, and the rest. This would continue until, eventually, all pages were powered by the APIs of the new commerce platform.
While applaudable, this approach ignores the business value associated with headless technology. The merchant loses the single-page application (SPA) effect by going page by page. Yes, a single PDP might load faster, but what happens when the shopper clicks on another page? You will have to redirect and reload the website, effectively canceling the big business driver of headless: The Single Page Application. Not only does this practice leave money on the table by failing to maximize conversion rates, but it also takes a prolonged period to realize any business benefits since data has to be migrated into the new commerce platform before the Strangler Pattern can even begin. This results in a relatively slow time to market.
What would a superior Strangler Pattern tactic entail? The ideal solution would consider the following:
To consider the first two, we will have to review the three ingredients required for a superior headless commerce implementation:
Since merchants gain significant business value by running a single-page application, a Strangler Pattern which implements changes page-by-page is not satisfying; if only a part of the front end is headless and running the PWA, then the merchant loses the single-page magic because redirects and reloads will occur when changing pages. Instead, merchants will want to launch a headless PWA on the entire shopping experience at once to maximize the SPA business KPIs: conversion rates and AOVs.
The next batch of requirements includes time-to-market, migration risks, and costs. The ideal Strangler Pattern should start by changing the least amount of business operations possible to satisfy these requirements. For example, if a merchant uses Magento, then data should stay in Magento in the first Strangler Pattern phase. Only after implementing the headless PWA across all pages should data be migrated out of the legacy platform. The ethos is to show business ROI first.
Time-to-market is significantly reduced when using the Strangler Pattern to strangle the legacy system without requiring data migrations. This anti-rip-and-replace approach unlocks ROI with lower costs and capital expenditure requirements, limits downtime, limits complexity, and limits training requirements for new business systems.
Once the first phase of the Strangler Pattern is implemented and the merchant begins to see an increase in conversion rates and AOV, the next step can begin.
Often legacy systems will cause several business problems. A typical example is the legacy content system. By adding a best-of-breed headless content management system (CMS), merchandisers can make changes to the storefront faster, build new landing pages efficiently, build new experiences, and elevate the brand's storytelling. These changes increase ROAS by offering more tailored landing pages and experiences for specific audiences. Storytelling improves conversion rates and connects with customers over the long term, maximizing customer lifetime value (LTV).
Dedicated best-of-breed order management systems often add a variety of business value. Having near real-time inventory visibility is crucial for successful operations in a multi-warehouse/multi-3PL environment. For example, merchants would not want to run an expensive ad campaign for a product that is entirely out of stock; this move would most certainly tank ROAS. Further, fulfilling from different locations means customers are more satisfied with shipping times; this leads to a better customer experience and a higher LTV. An order management system (OMS) that can work in an omnichannel environment ensures smooth operations for a merchant’s online presence and physical retail store presence, resulting in improved operating margins and increased free cash flows. Another popular trend is buy-online-pick-up-in-store (BOPIS), which adds significant value to the online shopping experience. However, BOPIS also adds significant complexity which a best-of-breed OMS can simplify.
Another critical commerce system that is often assessed is the promotion engine. Merchants can better manage and control discounts when adding a dedicated best-of-breed promotion engine. This addition improves customer loyalty and, subsequently, customer LTV. By offering logic on when and how to promote discounts, conversion rates can increase while lowering overall promotion costs to improve margins.
While forward-thinking merchants favor composable architecture, there is a significant downside; performance. Because data in a composable stack is distributed among many backend systems, the front end must call each system's API and load multiple vendor SDKs. These excess calls significantly increase the size of the JavaScript payload, add complexity to the storefront's codebase, and degrade performance. This composable approach is a performance anti-pattern and may negate all of the merchant's work to go headless in the first place.
A composable commerce stack built with data orchestration technology like Nacelle is a superior solution to this problem. Data from all composed systems are meshed, normalized, and stored with Nacelle's highly performant database technology. With this architecture, a single API call can deliver data that originated from multiple systems. The result is better performance and a cleaner codebase. Further, since Nacelle acts as a layer of abstraction, significant refactoring to the front end can be avoided when changing your composable components.
Once essential best-of-breed systems are added, the legacy system becomes superfluous. It can be dropped from the stack without refactoring front-end code, thus completing the Strangler Pattern.
Headless commerce, when properly implemented with PWA single-page application technology, can add significant business benefits in the form of increased conversion rates and AOVs. Since the single-page effect drives these improvements, merchants will want to implement a PWA across their online shopping experience at once.
They should opt for a Strangler Pattern focusing on this business value first. Further, the ideal upgrade should not require a rip-and-replace approach to data migration. Instead, backend business systems should be replaced piecemeal while showing ROI on the storefront. Eventually, the legacy system can be dropped from the stack once best-of-breed vendors are composed into the stack. The end result is faster time-to-market, lowered migration risks, and an overall lower cost of implementation.