How to personalise user experiences through content slots

Want to personalise the content on your website in a smooth and natural way? Content slots are the way to go! They create flexibility in your UI components and increase the possibilities for a perfectly personalised website. In this blogpost, we’ll let you in on some of the best-kept secrets on content slots and give you an insight into how to create better user experiences.Over the past few years, we’ve seen how user experiences have been improved by means of in-depth personalisation. Netflix, for instance, gives its users personalised recommendations based on their viewing history. These AI-based recommendations work well for platforms that collect data over a longer term through a user account. Most platforms (such as governmental or corporate websites) lack this far-reaching technique and use a much simpler form of personalisation. On these sites, however, it is possible to create an anonymous profile based on pages visited. This profile can then be used to provide visitors with useful related information (by leaving cookies in the visitor’s browser).


An example of personalisation from ABN Amro's pension fund. Once the user has a profile, the homepage will adapt itself. The visuals are in line with the target audience and the top tasks have been rearranged so that the target audience can quickly navigate to the right page.

Set up a personal experience

With our newly-gained insights about the website visitor, it becomes possible to create a richer and more relevant user experience. For example, we can customise the homepage once the anonymous user returns to our website. The homepage will now display useful links to content that we expect will be relevant to the visitor. Offering relevant content creates a better commitment and builds trust in the platform.

1. Keep it simple at all times

Now that we have the tools to show the visitor highly-relevant content, it may become tempting to create multiple user profiles directly and offer personalised content. However, it’s important to understand that this personal story doesn’t necessarily provide a better user experience for every visitor. So be sure to start small. For example, suggest interesting articles, or add an image that perfectly fits the user’s profile. Measure the effect of these adjustments, and see which gives you the best results. Take around 1 test at a time, so you can be sure that the adjustments have led to better or lesser results, to draw the right conclusions on the effect of your personalisations.

2. Keep known patterns in mind

Before you can build an accurate user profile, the user should have visited a number of pages on your site. This means that the user has already formed an image about how your platform works (a so-called mental model). That’s why it’s best to respect certain expectations. For example, if the user returns to the homepage, it may be confuse him if essential information on that page has changed since his last visit. So by all means, keep the essential information consistent. Consider adding snippets of information, rather than changing the basics.

3. Do not force your choices upon the user

An anonymous visitor profile is built upon a limited dataset. So don't assume it's 100% accurate. That’s why it’s not a good idea to force our design choices upon the visitor (for example, by modifying existing links to lead the visitor to a specific page). It makes more sense to guide the visitor to the relevant content on your website by offering it at the right time, in a natural way. We’ll go into that a little further on, with some useful examples of how you can do that.

4. Combine data and human knowledge

To get the best results, we need to take a close look at the data at hand: when analysing the user profiles, which patterns have been created? Guess.js is a good example of how machine learning can predict user behavior. This tool uses data from Google Analytics to create an accurate model of various navigation patterns. The tool will then make a forecast of which page will be clicked next and pre-load it. This makes website navigation considerably faster. This insight makes it possible to determine which information is interesting for a visitor at a specific moment.

Fortunately, there are still things that we humans are better at than machines. Phew! One of them is being able to figure out the context of the visitor. Depending on the context, we can make smarter design decisions. On a page containing crucial emergency information, we don’t want to post distracting content and keep the focus as clear as possible. Always look at what the data tells you, but be careful not to jump to the wrong conclusions about causality. This combination of machine learning and human insight is also known as Collaborative Intelligence.

Use content slots in your UI components

Offering personalised content naturally can be a challenging task. To make it easier for yourself, you can use so-called content slots. These serve as placeholders for your personalised content to provide useful shortcuts that match the current stage of your website visitor’s customer journey. The following figure shows an example of a ‘hero’ component on a fictitious homepage. In this component we added a content lock underneath the launch card.

hero_nlThe first time the user visits a page, we leave the content lock blank. But once we have gathered some more information in the user profile, we can show relevant personalised content in this placeholder. Which could look something like this:

hero_-_personalized_nlWhen the user clicks on this link, we learn a little more about him and his behaviour. That information is added to the visitor’s anonymous profile. By doing so, we help the user find his way in large portions of content more easily. This way, the website visitor can not only navigate faster, but also finds more relevant content. By adding content slots to your designs, you’ll find it easier to always keep a personal user experience in mind. Additionally, content slots bring flexibility to your components which helps to put important content in the spotlight (like, for example, an important update on the safety precautions for the covid-pandemic).

A few more examples of content slots

To help you add a better and more personal user experience to your platform, let us show you some more examples of content slots. In the examples below, you’ll see the content slots indicated by a dotted line.

Top Tasks

Top tasks help users navigate the main pages of the website in a jiffy. However, what’s important to the individual user depends heavily on the context. By adding a top tasks card under the standard task grid, we can add an additional link that fits the profile of each visitor.

top_tasks_-_personalized_nlMap grid component

A map grid with various links is a common component in modern web design. You can add a content lock at the top to highlight a specific theme and at the same time show popular links within this theme.

card_section_-_personalized_nlProduct recommendation component

You can create a simple recommendations component by linking to the related products of a previously visited product, even without using extensive machine learning techniques. This example shows you how:




These are just a few examples of how to integrate content slots into your UI components. There are many more fun and interesting methods to experiment with. Creating a personalised platform can be a challenging task. The information in this blogpost will help you get on the right track.

New call-to-action


Posted on
Jan 4, 2021