Why E-Commerce is Going ‘Headless’

The top U.S. e-commerce brands have gone headless, including Amazon.com, Walmart, Target, and Nike, and the rest are in process or are considering it. Headless commerce refers to the practice of separating the website from the back-end e-commerce platform via APIs or microservices. In simpler terms, retailers are separating what users see from their databases. By going “headless,” companies ensure investments in their websites aren't tied to their e-commerce platforms, which gives them the freedom to upgrade their e-commerce platforms without having to rewrite their entire websites.

While e-commerce IT leaders have been pushing for the headless transition for several years, business leaders have been looking for revenue gains before approving a headless project. Fortunately, progressive web apps (PWAs) became mainstream in 2018. PWAs offer significant revenue lift and a cheaper way to deliver websites.

PWAs are the perfect project to bring e-commerce business and IT leaders together to deliver a modern, headless website with three primary benefits: increased revenue through a fast, frictionless, “app-like” e-commerce website experience; freedom from vendor lock-in to e-commerce platforms; and elimination of the cost of maintaining native mobile apps.

Create an App-Like Shopping Experience on the Web

PWAs are app-like websites that combine the reach of the mobile web with the experience of native applications, including extremely fast page transitions, instant login, and one-tap checkout. When used in combination with other technologies, including accelerated mobile pages (AMPs) and server-side rendering, PWAs can deliver truly unprecedented customer experiences and remarkably fast websites with sub-second page loads.

Correctly combining PWAs with server-side rendering capabilities and AMP support delivers websites that load insanely fast from web search through checkout, removing any friction from the path to purchase. And this instant journey means money: Retailers are seeing a 15 percent to 30 percent increase in conversions from sub-second page loads.

For example, Venus Fashion went headless and reduced its median mobile web page load time to 320 milliseconds (literally the blink of an eye) and increased the percentage of pages loading in under a second from 15 percent to 73 percent. The result was a 24 percent increase in conversion rate. If that’s not impressive enough, retailers can benefit from an organic traffic boost of 32 percent by implementing AMPs, extending their reach to a new set of buyers and ultimately driving conversions.

Best of all, as with any maturing technology, the cost to build an e-commerce PWA is now much lower due to new technologies, including AWS or Google Cloud Platform, React or Vue, Node.js, React Storefront, and AMP tools.

With site speed as the new competitive battleground for e-commerce, it’s no wonder most business teams at top retailers are launching or considering a PWA. Simultaneously, IT leaders at these companies are upgrading their architecture to a headless, microservices-based one, freeing themselves from the monolithic approach forced by e-commerce platforms.

Make Your Proprietary Website Portable Across E-Commerce Platforms

Popular e-commerce platforms such as Salesforce Commerce Cloud, Magento, Shopify Plus, HCL WebSphere (formerly IBM), SAP Hybris, or Oracle Commerce Cloud were built with a backend- and data-first approach, not a customer-first approach. Platform features focus on product SKUs, taxonomy, pricing, promotions and purchasing. Those are all important features that make e-commerce platforms valuable, but the tradeoff is that the customer experience — especially in regard to site speed — is left to system integrators, designers and developers. The tooling offered is “hammers and nails” with which elite teams (e.g., those at Amazon) can deliver smooth, quick experiences, but good teams can’t do the same.

Fortunately, free, open-source, portable technologies for PWAs, AMP, and server-side rendering allow average teams to deliver fast, frictionless experiences on top of these e-commerce platforms, which are perpetually behind in a race to catch up with this innovation. Their frontends — aka version X of their "studio,” “framework,” and “reference architecture” — go through overhauls every few years, but will always be three years behind the standard set by the open-source community, not to mention the expectations of shoppers who spend most of their time on web and app experiences that embrace the latest in open-source (e.g., Facebook-created React).

Worse still, an e-commerce platform frontend is deliberately entangled with the platform’s backend, tying the website to that specific platform. Portable frontends such as PWAs and single-page applications make it harder for e-commerce vendors to prevent retailers from churning for a better, faster or cheaper alternative platform.

Walmart was one of the first retailers to go headless using Node.js and other open technologies. The company aimed to decouple its website from its monolithic e-commerce platform, Oracle ATG, by building an app-like website on top of microservice architecture. Walmart’s initial goal was to provide customers with a faster, better website experience. Once achieving this in a headless manner, it was also much easier for the company to replace ATG with custom and best-of-breed e-commerce back-end engines. Customers won, Walmart’s IT team won, and as a result, its e-commerce revenue growth continues to outpace that of the average retailer.

Dump an Outdated Native App

Native apps are expensive to maintain and often generate a fraction of the revenue of a mobile website. Retailers should consider replacing their native app with a PWA uploaded to iOS and Android app stores. The reality is that consumers shop a retailer’s mobile site, not its app. People just don’t want to add most brand icons to their phone screens. The data agrees: According to a 2018 survey, 90 percent of the time users spend on apps is spent on their top five apps, and the global average cost per acquisition for an iOS app downloader who completes his or her initial purchase in the app is about $71.

PWAs offer the best of both worlds. To start, they're cheap to launch. 1-800-Flowers.com took one day to put its PWA into the Google Play store. What’s more, the flowers and gift giant also had an expensive-to-maintain native Android app that began to lag in updates, features and payment options. 1-800-Flowers.com submitted a new app to the Play store, one based on the PWA codebase that includes all the latest features.

The new app delivered a 30 percent lift in conversions vs. the Java-developed app. Furthermore, moving forward, the PWA-based app will always have the latest features with no additional costs. Embracing better, faster, cheaper technologies is a requirement for winning in the ultracompetitive gifting e-commerce market. It’s no wonder that 1-800-Flowers.com's stock has reached new highs this year while its top competitor recently filed Chapter 11.

The Future of E-Commerce Websites

1-800-Flowers is a case study in the benefits of a PWA build on a headless architecture. First, its PWA delivered increased conversions (by 50 percent) over its desktop-first responsive mobile website, and AMP increased its organic traffic levels by double-digit percentages. Second, going headless allowed 1-800-Flowers.com to separate its website from IBM WebSphere, the e-commerce platform it was using (and which recently sold to the Indian firm HCL). Last, the PWA-based app was the first to be featured in the Google Play store while eliminating native app maintenance costs and increasing conversion rates by 30 percent.

The future of digital retail is headless, and retailers that embrace it are gaining a competitive advantage. They’re being rewarded with more conversions; better search engine optimization results; and happier, more loyal customers, all while their IT teams gain freedom from the limitations imposed by monolithic e-commerce platforms. Why wait? Large brands are getting there within as little as three months.

Ajay Kapur is the CEO and co-founder of Moovweb, a cloud-based platform that delivers optimized mobile experiences.