Personalizing the web for the modern user with Contentful and Frosmo

Consumer expectations for a superior user experience are growing rapidly — users expect a consistent experience when switching between devices and the expectation level for user experiences is no longer set by direct competitors. Instead, global giant vendors such as Amazon, Apple, Google, Facebook and Netflix dictate and set the bar for user experience, and there are only a few ways to compete against them; one of which is personalization.

This post was contributed by our partners at Frosmo.

Personalization is the key to customer’s hearts — we need to exceed customer expectations and delight them by offering personalized and relevant content. Enter the microservices architecture and content platform. Together, they allow for the separation of back end and front end and enable the deployment of modern applications.

Creating value

I recently discovered the term ‘connection economy’ while listening to a Seth Godin podcast, where he talks about how value today isn’t created on the assembly line, but within the creation of connections between people and companies — winners in this new economy are companies that succeed at creating the most high-quality connections.

From the digital marketing point of view, the launch of a new website or online store marks the starting point of ongoing efforts to offer dynamic and relevant content to key audiences. Companies accomplish this by either using microservices to provide personalization and testing capabilities or build their own solutions from scratch.

JavaScript frameworks are increasingly important to achieve that set goal and digital marketing managers have recognized this as the defacto way of developing your digital experience layer. While Angular and React are popular JavaScript frameworks that continue to grow in usage, the downside of a headless CMS with a front-end built with React, Angular or Vue is that they don't provide built-in tools for personalization or experience optimization.

The ideal situation would be not to have different systems (in the case of many businesses, a CMS versus an ecommerce platform) fighting over who gets to deliver content to the front-end, which could mean, in many cases, your editors having to repeat and republish the same content on many places to cater to various customer platforms.

This illustration depicts an excellent way to address that situation; by having the frontend communicate with the backend via APIs. This allows the back- and front-ends to be developed independently of each other, letting you use modern frameworks while swapping components or adding new features of your system without affecting the bigger picture — not only will your developers thank you, this also results in faster time-to-market as it eliminates the need to rebuild the whole system from scratch or take it completely offline to perform maintenance or major changes.

There are also challenges to having a separated frontend which should also be considered:

• CMSes usually include targeting or tracking features out-of-the-box but headless solutions don’t and will require implementation effort

• No governance features (for example, setup for approval process) so it’s likely you’ll have to recreate processes for how you work

• You’ll have to shift your way of thinking away from being page-centric and start thinking about your content using a more topic-centric approach

• Our experience is that customers usually underestimate development resources needed, so be sure to account for this when planning

How Frosmo comes into play

The way the Frosmo Platform works is that when the Frosmo tag is added to the website header, it allows the use of building features that make frontend development smoother, less resource-intensive and easier to manage.

There are three basic functionalities that Frosmo bring to the table:

• Continuous front-end development using any framework — the platform makes this more efficient by enabling modularity (with a "module per feature" approach, your project doesn’t have to be one gigantic React application that you build up front)

• Experience optimization: A/B testing, behavioral targeting and personalization that tie into the expectations of consumers who expect to get only tailored, relevant items

• Recommendations from a large assortment of content — being able to offer what's relevant and recommend that to your customer

Data tracking and AI modeling are key areas where your headless setup might initially lack (again, that doesn’t come baked in), and when there is so much customer interaction, there’s a lot of data you can track on the frontend and makes for a good starting point to improve your digital experiences. Part of what Frosmo does is allow injections of data-based predictions into a website to allow better personalization of content to the user.

Roles and processes

Customers often fear that a change of system requires a rethink of roles and processes. My colleague and I have covered this in a previous webinar where we talked about our workspaces feature that allows development in an isolated environment, based on a production site, so you can quickly iterate and shake off heavy deployment processes.

Today we’re focusing more on personalization. The new architecture allows people to pick their own tools since these tools are able to communicate with one another via APIs. Frosmo offers a tool for the ecommerce manager to utilize existing content made by content creators as well as templates built by frontend developers. They’re able to assign these via Frosmo’s data tracking to target specific content to different types of audiences.

There are new ways of thinking brought into the personalization game with headless CMS. Since content isn’t page-centric with headless CMS, you can manage content directly to tag and directly retrieve content surrounding a particular topic. This allows you to provide dynamic personalized content, while a traditional setup targets static customer journeys that work as long as content isn’t changing.

Personalizing the process

According to market research by Gartner - "Personalization is a process that creates a relevant, individualized interaction between two parties designed to enhance the experience of the recipient. It uses insight based on the recipient’s personal data, as well as behavioral data about the actions of similar individuals, to deliver an experience to meet specific needs and preferences."

The key in the personalization process is visualizing the user journey, who your visitors are and why they are on your website. Let’s take the Frosmo website as an example. Its main purpose is to get people to sign up for a demo, but we have noticed that this rarely happens on the first visit.

What typically happens is that visitors want to learn more about the product, usually browsing by themselves before eventually seeking out a demo of the platform. We’ve noticed reference stories are the most popular type of content on our website and key to encouraging visitor engagement.

Fortunately, we found Contentful that succeeds at helping with content management and delivery and works with Frosmo to enable personalization, so you can focus on the development of a modern digital experience.

Three steps to personalization in Contentful

Creating personalized content for a Contentful site using a personalization software such as Frosmo requires three steps:

1. Define your audiences by considering what audiences are important and what rules you want to apply. You might, for example, identify that visitors return to the site 2+ times within a week are high-potential audience who should receive specific tailored content.

2. Create the content variations in Contentful.

3. Add audience tags in Contentful, for example one-to-one mapping.

The four W’s of building a personalized customer journey

The three steps in the previous paragraph allow you to target certain content to a selected audience. When you take it a step further and start building a personalized customer journey, you can consider the four W’s for each step of the journey.

1. Where on my site do I want this personalized content to appear? Immediately when a visitor enters the site or later on?

2. Who is part of this specific segment?

3. What do I want to show them? A piece of content, a discount code or maybe a recommended list of recently viewed products.

4. When is the content triggered? This can be for example, after the visitor has spent some time on the site, is about to exit, or maybe after they’ve signed up for a newsletter.

Going back to our website example again: Let’s say I’m interested in a specific article and click to read it. As I land on the page, Frosmo stamps my browser in the background to indicate that I’ve shown interest, and this marks the start of our user journey from being a new user to one who has already visited and browsed content.

Since I don’t have the time right now to read other stories, I go ahead and close the browser. However, the next time I return, I’m already known to Frosmo’s analytics, as a visitor who has read stories, and it now pushes me to sign up for a demo. For our website, we’ve noticed that the visitor is very likely to sign up on the second visit and it is important that they can easily locate how to do this. All this information surrounding interactions can then be pushed directly to our marketing systems and CRM.

What we commonly see in customer projects is a mismatch of expectations when an organization turns to use headless CMSes and get really excited to use it, but have come to expect (through the use of old, traditional CMSes) features such as behavioral targeting, testing and data tracking to be all built-in.

So what you want to take into consideration when moving to a headless setup is that there needs to be further development for features beyond base content management, with the plus point being that you are now able to build and customize your features exactly to your liking without having to be at the mercy of a built-in feature set that you would have to painstakingly modify.

The customizability of features along with the ability to use multiple touch points are the main drivers for you to adopt a headless CMS. If you have a page-centric way of structuring your content, then you might run into trouble when wanting to use multiple touch points (for example, we typically hear "I want my content to be in all channels so they can be read by all my potential customers wherever they happen to be") — and when you have content structured with a headless CMS, it becomes easier to spread content into multiple touch points and serve it to all kinds of platforms and devices, no matter what the channel.

Roles and workflow with personalization

Successful technology implementations always require the clarity of roles and processes. Personalization in Contentful requires typically three roles: the content creator, digital marketing/optimization and frontend developer. Their roles are illustrated below in an example where Frosmo is used as personalization software.

Audience + targeted content + targeted UI = Happy customer!!

As a summary, personalization is becoming an ever-important differentiator when going up against the giant corporations that dominate many of our web experiences and device interactions. The Frosmo Platform allows you to track user interactions and deliver more personalized experiences to users and works seamlessly with modern content management alternatives (versus traditional, dated CMS) such as Contentful.

For further information on this, you can check out our brief video on how the Frosmo platform works together with Contentful and also our webinar recording of how front-end development for headless CMS.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.