If you’re going to invest revenue and resources on a website build, you’ll want it to be future proof. You’ll want your front and back end to be decoupled so you’re not bound to one platform or CMS. Headless commerce enables a new generation of omnichannelists— merchants who view every device as a checkout and every screen as a way to engage their audience. 

Corra believes the future of commerce is headless. Consumer demands are evolving at an increasingly rapid pace and traditional systems struggle to stay up-to-date. As Gen Z comes of ‘consumer age’ (their purchasing power already represents 31% of the total U.S. income) merchants feel the pressure to provide the latest and greatest experiences. Headless commerce is a framework for enabling front-end exploration and innovation. Learn how Lancome and Pinterest are adopting a decoupled approach and why Corra’s investing our resources in becoming leaders in this solution on behalf of our clients.

What is headless commerce?

Consider going ‘headless’ as renovating your site’s architecture. The front-end consumer-facing touchpoints, A.K.A. the ‘head’ is decoupled from the back-end operational systems. This no-strings-attached approach divides consumer-facing concerns from system concerns, reducing the need to dive into the back end and get your hands dirty with every iteration of your commerce strategy.  

Headless refers to a back end that’s been separated from its front end or head (presentation layer). The term can be somewhat misleading when we’re referring to the possibilities of this approach. As Joe Cicman, Senior Analyst at Forrester notes, “don’t confuse the model with the method.” Because actually, what headless enables is the potential for countless ‘heads’ or commerce transactions occurring on smart mirrors, social media platforms, progressive web apps, vending machines, kiosks, essentially anywhere imaginable.

These customer experiences are delivered through APIs (application programming interfaces). Theoretically, any system that has a complete API can be deployed in a headless manner. However, a set of best practices have emerged over the past year or so to make deploying a headless ecommerce system practical for everyday merchants, not just those with huge IT departments and budgets.

 “

Headless commerce is not a new concept. It’s just a new buzzword.

Headless has received a lot of buzz recently within the ecommerce industry because merchants are realizing that customer expectations are evolving so quickly that tightly integrated systems can’t keep up. Headless commerce isn’t just for the bleeding-edge anymore, it’s mainstream now.  

Monolithic Ecommerce (pre-2019) 

Before we turn to the advantages of a headless approach, let’s discuss the disadvantages of a traditional or monolithic approach.

Customizations to the front end break the back end and vice versa. A tightly coupled front and back end makes it difficult to effect change without running that change through the other, which is less efficient, more costly, and invites potential risks. 

Marketing and business disciplines are dependent on developers or sub-par CMS (content management system). An organization’s developers, marketing and design teams often operate in silos that create fragmented CX. Customer touchpoints that aren’t cohesive across every interface (and the brand’s entirety) are less effective at converting an audience. If a user experience team validates a change in design that may boost your conversion rate considerably, they’d have to sit on that change until a developer can get to it. They’re reliant on technical teams to make improvements. The net effect is that merchants are slower to grow. And for the larger-scale innovations, the content management systems (CMS) they’re locked into often aren’t accommodating to rich media types. 

When marketing and creatives have the freedom and mobility to implement change, they’re able to conduct tests and experiments more frequently, garnering richer insights, which ultimately lead to higher conversions. 

“

Your mission is to create seamless and engaging experiences that drive revenue and loyalty. Your brand’s most powerful distinction will be creative expression, physically and digitally, and the emotional response it stirs.

Joe Cicman, Sr Analyst at Forrester

Forward-looking merchants want to be able to sell to their consumers anywhere, at anytime. That’s why the mobile-first approach has taken over the ecommerce industry. Traditional monolithic systems are mobile-second. In fact, they’re vending-machine second, self-driving car second, smart mirror-second, etc. These traditional systems can’t keep up with upcoming acquisition channels.

The Value of Headless Commerce  

It’s a relatively simple concept: a front end is detached from a back end and they then communicate via an API. But the implications of this concept can be profound for ecommerce businesses. 

With headless commerce, the responsibility of staying current and adopting new best practices lies with the merchants and their partners. They’re no longer bound by the limitations of any particular platform. There’s no need to put all of their “eggs” in one platform vendor. They can choose one that specializes in each arena they’re playing in (AR/VR, WhatsApp, Alexa Skills, etc.) not one that’s sub-par at all of them. This also takes the pressure off of platforms to provide capabilities for every channel. In the future we may see an industry where you can pick and choose functionality from various providers; i.e. Magento’s cart, Shopify’s theme, etc. 

It will be up to merchants to stitch together the capabilities they want. This shift in responsibility allows them to explore new acquisition channels freely and deliver content anywhere and everywhere on current and future devices. 

Looking forward, a merchant’s physical store may feature various front ends from kiosks to point of sale systems to vending machines. They’re all ways of effectively facilitating a transaction and more interfaces equate to less friction. It’s very likely that in the upcoming years Corra will be designing smart mirror interfaces, or experiences deployed to users in self-driving cars. 

APIs, meet Flexible Architecture. 

When your architecture is decoupled you can build a front end any way you like. You can build it in a CMS like Drupal, or one like Adobe Experience Manager. You could even start with raw HTML. This front end then speaks to an API (application programming interface) in a particular way that is able to bridge the gap between both systems.

An API-driven approach, combined with a flexible architecture creates an agile mindset and way of producing experiences. Amazon is a great example of this. They push a new front end every few seconds (compared to every week or month, like typical merchants). APIs empower teams to do lighter, more frequent deployments.

“APIs communicate valuable information to the front end – capabilities for checkout, product information management, pricing, payments, tax, fraud prevention and so on. GraphQL is an API format that talks to the software system in a structured and hierarchical way, gathering more specific information and only retrieving what’s needed at the time. It’s also able to make fewer queries for information and more efficiently aggregate data from multiple sources. All of these factors make your site experience faster and more efficient.” 

When we think of a front end communicating with a back end via an API (REST, GraphQL, etc.) we can use the analogy of email versus iMessage. REST is more structured like an email and GraphQL, like iMessage, allows you to communicate efficiently with more specific, bite-sized pieces of information. You want to use GraphQL because it generates a faster experience for your visitors.

Enable Progressive Web Apps. 

At Corra, we’re confident that PWA is the best way to build a modern website today. We see undeniable synchronicity between headless architecture and progressive web apps. 

We teased the possibilities for exciting new channels that unlock new revenue streams— but for many brands, investing in mobile CX should still be a top priority. A mobile-first approach is vital to all merchants with a millennial audience (basically everyone). It’s essentially a checkout in your consumer’s pocket. 

Browsing on mobile has surpassed desktop, yet only 34% of ecommerce sales in 2019 so far were made on a smartphone, according to eMarketer. 

There’s definitely room for improvement. One solution that addresses this conversion gap is progressive web apps. Some of the most streamlined and instantaneous customer experiences on mobile occur on PWAs. They’re accessible via a quick google search, rather than a visit to the app store to download so there’s less of a barrier of entry – but like native apps, their UX is optimized for mobile and offers many of the same features: lightning fast, interactive design modalities, offline usability with minimal bandwidth, push notifications, camera, save to homescreen, Apple and Android pay, etc.  

PWAs are a combination of the best of the mobile web with the best of native apps; which is why Corra is investing our resources in this technology. We’ve been on the front lines developing our own PWA storefront, FWRD, and learning its advantages first hand. 

Looking FWRD?

By leveraging headless technology, Corra is creating FWRD: a platform-agnostic PWA storefront that combines lightning-fast performance with a sophisticated front end crafted around the needs of lifestyle consumers. Being completely headless, its architecture allows retailers to seamlessly attach the app-like front end to any backend system via APIs. To ensure even more agility, FWRD comes equipped with a proprietary library of UI components. This catalog was built using the latest front-end technologies and offers dozens of features that can be smoothly implemented to convey your unique brand experience. Through FWRD, you can embrace the power of PWAs to increase your prominence among search rankings, improve site speed immensely, and convert mobile shoppers— even when they are browsing offline.

Brands Going Headless/PWA

Lancôme, the beauty brand owned by the cosmetic industry giant, L’Oreal watched mobile traffic surpass desktop for the first time in 2016. Yet despite an increase in mobile visitors, their conversion rate on smartphones lagged. On a desktop, 38% of shopping carts led to orders, compared to 15% on mobile devices. 

The brand knew that building a native app would only appeal to its loyal and recurring customer base. They wanted a fast and compelling mobile experience, similar to what they would have achieved with a native app – but one that was accessible to everyone on the mobile web. Their PWA launch saw a 17% increase in conversions, 53% increase in mobile sessions on iOS and 8% increase in conversion rates on recovered carts via push notifications. 

Pinterest’s venture into PWA was lead by their focus on international expansion; which ultimately pointed them to the mobile web. When they analyzed usage for unauthenticated mobile web users, they found their outdated and slow web experience only drove 1% of visitors to sign up, log in or install their native app. Pinterest built their PWA using React, Redux, and Webpack. Their time spent is now up by 40%, user-generated ad revenue is up by 44% and core engagement is up by 66%. 

NOW IS THE TIME. IF YOU PLAN TO LAUNCH A SITE IN THE NEXT SIX MONTHS, CONSIDER A HEADLESS PWA.

Is headless commerce part of your roadmap? Whether you plan on implementing a headless solution this year or two years from now, reach out to Corra today. Our team is happy to provide strategic guidance and share our expertise. You can also read more about progressive web apps on our blog.