Project CUE: Developing Headless Content Personalization in 4 Sprints

Personalization has caused a headache for many development teams. Either it’s been approached as a massive project that takes months of work before results can even be tested, or it comes from a third party marketing add-on that slows down delivery and ruins site optimization.

To show there’s a better path to personalization for both IT and marketing teams, Contentstack, Uniform, and EPAM teamed up for Project CUE, a proof-of-concept project that revolves around building a personalized itinerary of Las Vegas events.

Read below for a look at how a headless content management system (CMS) and Jamstack personalization combine for real-time relevance. Or see how to set up the solution for yourself in the developer workshop on content personalization with Contentstack and Uniform.

Project CUE: Inception to Delivery in Less than 12 Weeks

With just two weeks of pre-work and four frontend sprints, the EPAM development team was able to launch a functional, personalized travel experience.

The Project CUE architecture included:

• Contentstack - headless content management
• Uniform - API orchestration and personalization
• Next.js - frontend framework
• Google Firebase - development platform and authentication

Pre-development

In the weeks before frontend development kicked off, the overall user experience (UX) was decided on, wireframes for the homepage were created, web design began, and a foundational content model was mapped out. Agile development of UX, design, and content was continued in parallel to the frontend development sprints.

“When people say that you can do agile with a monolith, you can't, it's a true waterfall,” says Tony Mamedbekov, Principal Sales Engineer at Uniform. “Whereas here we actually don't really care what components are being built. We can start setting up personalization intents and signals, we can start creating content modeling in Contentstack, we can create content on top of those content models and everybody can just check in once a week and say how it’s going.”

Sprint 1:

A functioning website was up in a week, leveraging quick starts from Uniform and Contentstack, with the homepage and checkout in place. Personalization was added to some event pages to start testing how it worked.

Sprint 2:

We created a booking page that allows you to add multiple guests and shows related suggestions (e.g., a restaurant aligned with your taste that has a table available before the show you’re booking). Login functionality was created using Google Firebase for authentication.

Sprint 3:

Set up personalized push notifications for the Progressive Web App (PWA), such as a newly listed event or restaurant promotion. A ticker countdown now appears on the homepage after you book an event. Content was fully tagged with relevant signals and intents.

Sprint 4:

Quality Assurance and User Acceptance Testing (QA/UAT).

This level of speed was possible thanks to MACH architecture, a modern approach to development that leverages microservice, API-first, cloud-native, headless tools. Both certified members of the MACH Alliance, Contentstack’s highly flexible CMS and Uniform’s powerful personalization engine let teams quickly reap the rewards of relevant content and scale with ease.

Headless Content Modeling

Contentstack decouples content storage from presentation, exposing all content via APIs to make it easy to combine content with a personalization engine to deliver relevant content using your choice of frontend framework.

Here are some tips for setting up a headless content model for personalization.

Craft Once, Use Everywhere

Create data fields that store data as clean strings, without any HTML influencing the data that would make it web specific.

For instance, the goal of Project CUE was an experience where a visitor could discover and book relevant events around Las Vegas. Each event, such as a show or a restaurant, was stored once in the CMS in neutral JSON so a frontend framework could wrap it in the desired presentation for web and mobile while a voice application could simply read out the string.

Everything As a List

Instead of the legacy approach of delivering version A, B, and C of a page you can create a repository list of content components and let a personalization engine choose the right component at the right time for each visitor. In Project CUE, lists included event descriptions, restaurant menu options, the best offers for the visitor, and dates available.

“Set your architecture up from the start to ‘render one of these components’ instead ‘render this component’, even if it’s just pointing to a list of 1. This makes it nice and easy from a development standpoint to add variants later,” suggests Nick Barron, Director of Partner Enablement at Contentstack.

Global Fields

A global field is a reusable field (or group of fields) that you can define once and reuse in any content type. For instance, a call to action (CTA) global field could include the description of a Las Vegas event, a picture, and the price. All frontends can use the same global field but each can decide which content to show. The web experience might show all 3 pieces of information, on mobile only the picture is delivered, and a voice assistant would just read out the description.

For personalization, having all variants use the same global fields makes maintenance easy (e.g., updating the CTA button color in the global field structure makes the change across every variant).

Jamstack Personalization

Uniform uses Jamstack, a development architecture based on client-side rendering, to deliver real time personalization at blazing-fast speeds.

When combined with a headless CMS, here’s how Uniform accelerates personalization for both marketing and development teams:

API Orchestration

Uniform enables you to bring multiple integrations into one place with a few clicks. With Uniform, native integration into the CMS allows marketers to manage personalization from within the UI of their existing content management system, like Contentstack. Uniform orchestrates the different data sources to drive personalization, using Jamstack architecture to decouple your different backend services from client-side personalization so you can add - or remove - a data source without having to rewire the whole setup.

Intent-Driven

Personalization is done by mapping the real-time signals of visitor behavior with intent. Removing the need for rigid personas and complex rules in exchange for intuitive content tagging.

“I don’t have to create a rule and say if X then Y. I just say fine dining is an intent, and I map that to related content. When the visitor scores for the fine dining intent they see content related to fine dining throughout the site. You don’t have to set the rule on a certain page, just tag the content once and let it work,” says Uniform’s Tony Mamedbekov.

Edge-based

With Uniform, personalization happens on a visitor’s device (the edge) without needing to call back to the original data source. This enables real-time personalization, runs without javascript, resulting in an excellent time to first byte (TTFB) and a high Lighthouse score.

It also allows for a higher degree of privacy, as an experience can be personalized with information that never leaves the visitor’s own device.

Create a Fast POC and Expand

Project CUE was able to get up and running quickly with a development team that was new to both systems.

“It turns out that it's pretty simple to implement something based on Contentstack,” says Maksym Hordiienko, Software Engineer at EPAM. “We were able to take an example project as a starting ground and add our own functionality to it through highly functional features like webhooks.”

“I like the intents in the Uniform platform the most,” says Nataliia Shyriaieva, Frontend Engineer at EPAM. “It looks like magic and allows us to do really powerful things in a very simple way.”

With this combination of easy-to-use platforms, teams can start seeing the benefits of personalization quickly and use that momentum to roll it out across the experience.

“You can have that personalization up and running in a matter of weeks, not months or years, at a small level as a pilot or proof of concept and then you can keep iterating on top of that,” says Contentstack’s Nick Barron. “You can keep expanding your personalization scope as time goes on in a very agile approach.”