201910_Osudio_ALL_banners_Commerce_tools_Headless-Hubspot_1095x475-V01-1
Evolutionary Architecture • 14 min read

The choice for Headless Commerce

Mark Blockhuys | 26-11-2019

Customers expect nothing less than personalized experiences that are connected across multiple touchpoints. They want a seamless, omnichannel experience that is both relevant and engaging. And while new touchpoints like smart speakers are just around the corner gearing up for mass adoption, customers also still go to physical stores. Headless commerce promises retailers to create those omnichannel experiences that customers today crave for. So, what is headless commerce exactly and what are the benefits?

This is the fifth article in our article series on evolutionary architecture. You can learn about the underlying principles such as microservices, API, cloud commerce, headless commerce and event-driven architecture on this page in depth. 

WHAT IS HEADLESS COMMERCE?

As a technology approach, headless commerce keeps change and evolution foremost in mind. Essential to headless commerce is the decoupling of the customer-facing front end from the back-end layer. Headless means it runs without a graphical user interface (GUI). All applications and hardware can be headless, but typically you’ll see headless computers (most often servers) and headless websites. Without the GUI, inputs and outputs go via interfaces like network, serial port or command lines. The focus lies on efficiency and not on user-friendliness. Instead of developing a complex GUI that requires a graphics card or an interface like the mouse or keyboard, you can more easily monitor, maintain and automate the process. That’s where headless gets interesting.

Making the website headless

The internet started with static HTML offered by the website which was interpreted by the user’s browser. With the rise of CMS came an extra layer of abstraction. The website owner puts his content in the database, usually PHP, which gets rendered into HTML. That’s where most websites are now: software installed on the server that holds all the functionality to maintain the website and present its contents to visitors. The CMS provides a WYSIWYG experience: what you see is what you get. You can immediately see how your changes impact the presentation.

The headless website adds another layer between the website editor and the end user. The front end where the website is presented, is decoupled from the back end where the website editor works on the content. In a headless website, the front end and back end operate separately from each other. The biggest advantages of going headless are performance and flexibility, because it allows you to optimize the front end and the back end independently.

The head: the front-end

The head is the presentation layer of an application. For a website, it is the user interface (UI) visitors interact with by clicking their mouse or tapping buttons. The UI reacts to their input, by showing new information or performing tasks such as adding products to a digital shopping basket. Although the term front end implies a graphical user interface (GUI) displayed on some kind of screen, the front end can also be voice, chatbots, social platforms, IoT or even augmented and virtual reality.

The body: the back-end

The back-end is where it all happens inside your organization. It’s the operational layer that contains all the business logic and that’s responsible for the data crunching and heavy lifting. Invisible in the background, the back end enables key functions like infrastructure, inventory and warehouse management, customer information, order and return process.

These business functions are enabled by solutions like ERP, CRM, PLM, MDM and PIM, all of which are part of the back end. Basically, the back end consists of any application you might have running on your servers or in the cloud. By going headless, these functions can run entirely separately from the front-end interaction. Whether an order is placed through a mobile app or put in the system by an inside sales agent, the back end stores and processes it blindly.

API for bridging the front end and back end

API is the layer that works as a glue between the front end and back end. Through API, all the information travels back-and-forth from the business processes to the presentation. That makes it possible to quickly connect a new application, turning every application into a service and making your infrastructure highly flexible. APIs are like user-interfaces but for other software. This allows you to decouple the functionality and data from the presentation in a headless approach. Especially for commerce API brings key benefits.

BUSINESS BENEFITS OF HEADLESS COMMERCE

Being able to deliver omnichannel shopping experiences is what keeps your business running. The ability to quickly respond and anticipate to change, is what will ensure your position for the long run. Headless commerce gives you the freedom to create personalized and connected digital experiences across all channels. As an architecture, it allows you to experiment, quickly add new channels, increase your business agility and scale efficiently.

Headless commerce comes with the following six business benefits:

1. Create omnichannel shopping experiences

Headless commerce allows your products, videos, blogs and rich content to be presented and shared on any channel. Your content can be delivered anywhere and everywhere, blended with commerce. With all your back-end systems integrated with your front ends, data flows freely in both directions. That enables data integrity and a 360-degree customer view, through which you can make product recommendations, advertise using retargeting and execute personalized marketing campaigns that stretch over different touchpoints. Whichever channel your customer uses, you can present a seamless and personalized experience that leads to increased customer satisfaction and revenue.

2. Build and customize your architecture

Do you want to use a particular application or unlock a new channel? Using a headless architecture, you decide how a front end is structured. You do not have to stick to a specific templating system or train your employees to follow the exact rules the software vendor laid out. Instead, you can build exactly the user interface your particular customers want and choose the application that suits best. From the inspiration and product pages to the checkout process and fulfillment, each step can be optimized separately. You have full control of what happens in the front end, and you can follow your UX design principles and shape your brand’s identity. This strengthens your brand recognition and results in higher customer conversions and increased lifetime value.

3. Freedom to experiment

Anticipating customer needs requires continuous experimentation. Without the risk of jeopardizing the whole ecosystem, you can experiment and try out things in a headless architecture. For example, if you would like to A/B test specific parts of your commerce websites, build an Alexa skill or a fast and shiny Progressive Web App (PWA), there is room for error in the process without affecting the back-end operations. In contrast, with traditional commerce solutions, you often have to modify front end and back-end code simultaneously, sometimes needing to shut down the entire application for maintenance. With headless commerce, you’ll be able to learn faster and save on development costs.

4. Speed and agility

With the freedom to experiment, you can implement new user interfaces more quickly instead of installing and then maintaining a full-stack software. Development becomes much more efficient because teams can now work in parallel. Due to its decoupled nature, changes can be made to the UI without having to test all the core logic in the back end. Changes can be made on the fly to keep up with the speed of consumer technology. This will give you reduced time-to-market and development efficiency.

5. Scaling with ease

In a traditional monolith software solution scaling typically goes horizontal. But when your architecture is headless, front end and back end can be individually scaled vertically. You only scale what you need. Even if the front end receives a lot of traffic, the back end stays unaffected since they are only loosely coupled. This way, operational costs are reduced and availability is stabilized.

6. Quick deployment in new channels and markets

In a headless scenario, multiple front ends connect to one API and one underlying system. This makes adding new touchpoints easy, as you do not have to worry about maintaining a software “mish-mash.” And if you’re looking to set up a new international website, you can do that in a matter of weeks instead of months due to custom coding. This allows your business to quickly establish presence in new channels and markets and quickly respond to changing customer needs.

SHOULD YOU GO HEADLESS?

Just like every other architecture, there are also downsides next to the business benefits. While these can be tackled by most organizations, it makes the headless commerce approach not suitable for everybody. In our white paper HEADLESS COMMERCE: Building the omnichannel shopping experience fast and agile we explain the disadvantages and how to approach these, explore the impact on your organization and give you the facts to build a solid foundation for the choice for headless commerce.

201911_Osudio_ALL_White paper_Headless_part1_CTA

whitepaper

Should you go Headless Commerce?

Download Now
Picture of Mark Blockhuys

Mark Blockhuys

CTO