Headless Architecture: Moving Digital Experiences Forward
The Limits of Traditional Platforms
If you ask around in marketing circles, the concept of the siloed, monolithic, single-channel website is dead. When it comes to reaching customers, “multi-channel”, “omni-channel”, and “cross-cloud” are the typical terms you hear today. So why are isolated, inconsistent experiences and touchpoints still what we’re delivering most of the time? One of the main reasons is that traditional content management systems and commerce platforms don’t allow for the delivery of anything different. Their architecture tightly couples the touchpoints and customer experiences to the back-end platform in question.
If you’ve been engaged on the engineering or delivery end of a commerce or marketing project for any amount of time you know the drill all too well, it’s been the typical approach for years. The presentation layer of a website is intertwined with the back-end and set up as a set of templates or views rendered on the server. Until the last handful of years this has also been where most of the functionality, outside of some basic DOM manipulation, has lived. On the commerce end this may mean templates for your checkout or product listing pages being tied tightly into the back-end of the platform in question. And on the content management side it may mean the same for blog content, marketing materials, or anything requiring personalization.
Moving away from these channel-driven solutions and towards the ideal of an integrated customer experience requires technologies and architectures that adapt to new demands. Instead of isolated experiences we now need the capability to align the customer experience of a brand across a varied number of touchpoints. Luckily, with the increase in ubiquity of JavaScript and frameworks such as React and Vue.js, the increasing need for seamless experiences across device classes, and the larger concept of JAMstack taking hold in the industry, platforms have been pushed to create capabilities for decoupling the customer experience and UI layer from centralized back-end technologies in ways that were never possible in the past. This opens up new possibilities for creating enriched, customized experiences not hindered by the constraints of a particular platform.
The Great Decoupling
The decoupling of the front and back-ends of the technology stack has most recently taken the form of headless architecture. In a headless setup, the presentation layer, the layer the customer experiences, and where page templates have traditionally lived, is abstracted and completely separate from the back-end technology stack. With the two interacting solely through an Application Programming Interface (API) layer.
Modern commerce platforms and content management systems including Salesforce Commerce Cloud, Magento, and Sitecore all now provide robust API capabilities through features such as Saleforce’s Open Commerce API’s (OCAPI) and Sitecore’s recently released JSS. This new headless API based approach allows us to take far greater advantage of modern PWA and browser API technologies. It also provides more control over speed and performance, using techniques such as SSR combined with tools like React and Next.js. And it does all of the above while retaining the benefits provided by the back-end management and commerce systems.
But of course, it isn’t just as simple as moving to a new commerce platform or new architecture. To fully realize the needs of meeting customers in the moment we need to create a unified brand experience across an increasingly disparate group of touchpoints. This has implications not only for how we engage with client-partners and organize creative, engineering, and delivery teams, but also affects the processes, artifacts, and deliverables required to sync multiple customer experiences using API’s across multiple platforms.
From the technical end this means developing layers to aggregate the API’s from various systems and utilizing tools such as GraphQL to allow the presentation layer to define the shape of the responses needed. It also means finding ways to replace the out-of-the-box presentation layers, currently provided by platforms, in a manner that is efficient, high-quality, and in-line with larger design systems and touchpoint needs. And, possibly most daunting, is the need to make decisions around the methods and techniques for delivering content. As what was once a single-option choice, render on the server, has increasingly become a spectrum of options dependent on the needs of a specific touchpoint and use case.
From the CRUX end, it means increased alignment across all brand touchpoints, instead of the design and creation of individual experiences being driven by the limitations of a specific platform. To help with this alignment, it also means greater proliferation of deliverables and methodologies that DEG has been using and promoting for years, such as Atomic Design. In the end, these will need to take the shape of Design Systems, Pattern Libraries, and reusable components tied to existing client-side frameworks as well as the best practices and interaction modes for specific verticals and mediums. And we’ll need to extend those Design Systems beyond just web, app, or commerce components to include patterns for voice interfaces, augmented reality, AI assistants and IoT devices as we deploy new experiences customized to those spaces, tied to the various back-end stacks through the same API layers and micro-frontends.
Towards a Customer Centered Future
The future of what it means to develop in the digital space is exciting and wide open as we move further into this new landscape of headless architecture. If we’re able to fully take advantage, we’ll be able to move towards a truly integrated customer experience that maps to the customer journey and that is empowered by, instead of limited by, a content management system or commerce platform. This will allow us to create engaging experiences across multiple and diverse touchpoints with the customer at the center of it all.
