fbpx

Step-by-Step Guide to Building Dynamic User Experiences

Step-by-Step Guide to Building Dynamic User Experiences

The goal of personalization is to make a consumer’s experience with your brand valuable and personal to positively impact critical business metrics like purchases or qualified leads. Personalization tailors an experience for a particular subset of users to accomplish this and is increasingly cited as both a revenue driver for businesses and an expectation for consumers.

Traditional segment-based personalization approaches are an important step in providing meaningfully differentiated experiences. However, these personalizations can lack the personal touch because they are built to provide a one-to-many experience vs a one-to-one.

As with any personalization, dynamic user experiences require relevant data and consumer trust, which is getting more difficult to obtain.

Relevant data and customer trust

Relevancy is one of the most important aspects of marketing/personalizations with a recent study by Optimove citing 72% of consumers reported relevancy as important overall and 36% saying it is “extremely” or “very important”.

Personalizations aim to increase relevance and value for consumers and have significant impacts when done right.

According to recent data from Segment, 80% of business leaders report an increase in consumer spending by an average of 38% when an experience is personalized.

However, the landscape is changing. While the importance of personal relevance in marketing and personalization grows, there are increasing regulations and distrust from consumers in handing over data that is essential to providing them with relevant experiences.

The duality of this issue is captured in Segment’s 2023 State of Personalization Report. While over half (56%) of consumers say they will become repeat buyers after a personalized experience (up +7% from 2022 data) only 51% of consumers trust brands to keep their personal data secure and use it responsibly.

The impact of this mismatch between consumer expectations of personalization and distrust in marketing is clear across business and consumer sentiments. In 2022 over a quarter of consumers felt personalization had been less targeted, largely due to privacy changes.

Meanwhile, half of companies feel like getting accurate data for personalization is a challenge (a ten-point increase year-over-year compared to 2022).

This has put pressure on businesses (rightfully so) to source the right data by fostering trust and credibility with consumers while refocusing their experiences to ensure they drive true personal value.

The tradeoff between marketing efficiency and privacy is a matter of continuous negotiation in a market economy.

Blattberg and Deighton

Quality personal data is the backbone of a successful personalization program, and without it, there are no signals to use to provide curated experiences. So how can you modify your personalization programs to bolster trust and provide valuable experiences? You first have to acknowledge some of the pitfalls of your current personalizations.

Why personalization can fall short

85% of businesses say they’re delivering a personalized experience to their customers. But only 60% of consumers say they’re receiving a personalized experience (Segment 2021).

Where is the disconnect? It comes down to the degree of personalization. For consumers it is one-to-one. Knowledge of exactly where they are in their journey with your brand, their preferences, etc. (McKinsey 2021). For businesses, it is oftentimes one-to-many. In-market vs out-of-market, prospect vs customer, new vs returning, etc.

You may think providing a different experience for high-level segments, like current customers vs prospects on our website, is enough—but consumers crave personal personalization, and it’s easy to miss the mark due to the traditional segment-based approach. Why?

Segments can be arbitrary

Marketers have never had more technology and signals on consumers at their fingertips than right now. This overwhelming amount of data makes it difficult to cleanly assign segments that truly need a differentiated experience with your brand.

This can oftentimes mean that personalizations for these segments are not valuable or relevant for your consumers. If you want a great guide on crafting relevant personalization segments take a look at this.

Segments aren’t always personal

Personalization modifies an experience for a subset of users. This inherently creates a one-to-many approach. But what if your mindset shifted to try to make each individual user’s experience the most relevant and personal as possible?

Instead of crafting an experience for users 1-1000 who work in Manufacturing, what if you can craft a dynamic user experience for each individual user; leveraging relevant attributes to make their experience the most valuable and personal as you can. 

Instead of addressing “Segment: Manufacturing,” you are inserting dynamic elements that talk to Mark who works for an 80-100-employee Manufacturing company as the CFO. You can mix in as many dynamic attributes as possible to craft a truly exceptional personalized experience.

What are dynamic user experiences?

Dynamic user experiences are personalizations that modify a user’s experience by leveraging attribute(s) of that user. This creates more one-to-one experiences that are more personal to individual users.

This is in contrast to more traditional segment-based personalization approaches which create static user experiences based on a user’s segment designation.

Segment-based personalization aims to tailor an experience to a group of users, whereas dynamic user experiences aim to tailor an experience to an individual user by leveraging user attributes.

Dynamic user experiences as personalization

Dynamic user experiences are personalizations, but each dynamic user experience leverages a meaningful data attribute with high cardinality for individual users that results in a feeling of genuine uniqueness for the end user.

Examples of dynamic user experiences

  • Email campaigns with dynamic content blocks tailored to the recipient’s interests and behaviors.
  • Product recommendations based on an individual’s purchase history and browsing behavior (a very common personalization).
  • Personalized website experiences where the content surfaces or highlights information relevant to that particular user.
  • Customized push notifications that are contextualized with information unique to the user.
  • Shopping experiences like Amazon where past purchases shape recommendations throughout the site.

(Image source)

  • Adaptive learning platforms like Duolingo where lesson sequencing and review are personalized based on an individual’s demonstrated strengths and weaknesses.
  • Streaming services like Netflix recommend specific shows and movies based on an individual’s viewing history and preferences.

(Image source)

  • Social media feeds that are personalized based on relevance to the user using data like pages followed or liked, clicks, and browsing behavior.

They are personalizations, yes, but built with scale in mind by leveraging user attributes. They are not static segments based on industry or new vs returning where static elements are changed on a website or email. Instead, they are dynamic.

The benefits of dynamic user experiences

Dynamic user experiences have 3 main benefits:

  1. They are truly individualized (especially when leveraging attributes with high cardinality).
  2. Because they are individualized, they have a higher chance of being personally relevant and feeling more one-to-one for users.
  3. You can test their inclusion/exclusion just like you would a personalized segmented experience using a testing platform.

Requirements to build dynamic user experiences

You need three things to make dynamic user experiences work:

  1. Personal user data attributes from your consumers that you can leverage.
  2. Repeat user engagement with your brand in the channel/medium you will be crafting your dynamic user experience.
    • e.g., a dynamic user experience where you modify sections of your website based on a user attribute will not work well for a user who only visits your website two times throughout their full customer journey.
  3. The ability to test your dynamic user experience using a testing platform.

Challenges and solutions for building dynamic user experiences

Challenge

Data attributes that may provide personal dynamic user experiences may not be readily available in the channel/medium you are looking to build the experience.

  • e.g., If you want to build a dynamic user experience for a user on your website based on that user’s purchase history, you may need to grab that data from your CRM.

Typical solutions and their downsides

CDP: A common solution to this is to push every piece of data into a single Customer Data Platform like Segment and then query just that one data source.

  • Problem: Not every organization can afford a CDP or has the expertise to manage it.

Web/App User Registration: If you have user registration on your website/app then you can store all relevant data points for that individual within the backend of their profile. When they log in, you can then access their attributes.

  • Problem: Not every website/app lends itself to a user registration experience. E.g., to shop online or browse a brand’s services you don’t want to make an account.

Lightweight solution

A lightweight solution is to write the code to pull attributes from systems on an as-needed basis such as your CRM.

  • You won’t need to adopt an enterprise SaaS tech just to pull a few attributes.
  • If the test proves the dynamic user experience is not valuable then you aren’t left holding the bag for the remainder of the contract.
  • You are more nimble and can select what system you want to pull data attributes from on a case-by-case basis.

A framework for creating dynamic user experiences

Research

Conduct research to identify what experiences will be valuable and personal to your users.

Specifically, note what data attributes would need to be present for that particular user to make that experience work.

Some ways to do this:

  • Interview customers/prospects and ask a series of questions about what would make their experience with your brand more valuable and personalized.
  • Ask your sales team/customer service team some of the following questions:
    • If there are specific groups that have difficulties that other groups do not throughout different steps in their customer journey get their thoughts on why and how to fix it.
    • If there are common user attributes they lean on to create a more tailored experience.
  • Conduct routine closed win/loss analyses asking similar questions.

Experience

Ideate for dynamic user experiences.

  • This is a great place to layer in feedback. Prototype the experience and conduct user testing or client interviews to assess how personal, relevant, and valuable this experience is. Bonus points if you have qualitative data from your original experience to compare against.

Collection

Set about accessing/creating data you need to create a dynamic user experience. Remember that prototyping can be useful to avoid building a perfect system for testing experiences that may not win.

Trust

Any use of a specific user data attribute may send someone panicking and trying to contact you to delete their information. Be noble, put yourself in their shoes, and give them a way out.

Test

Don’t assume your audience will love the experience. If an experience loses, drill down and figure out why. It may not be your hypothesis but the execution of the experience itself.

Assess results

Dynamic user experience tests are very similar to traditional A/B tests. Your Control group has no dynamic user experience while your Variation group does. This allows you to assess the impact on your business’s KPIs as established in your testing platform of choice. However, don’t forget to assess the “soft” metrics as well.

Personalization is inherently marketing-focused. You are tailoring experiences, typically to a subset of users as defined by segments, to provide a differentiated experience so they accomplish whatever marketing/business goals you have outlined (a transactional focus).

Consumer’s likeliness to buy a product

However, personalization as desired by consumers is notably less transactional but still has significant impacts. A 2023 study from Nielsen showed that if a brand provides a relevant, valuable experience beyond selling its product, 63% of consumers are somewhat, very, or completely likely to buy a product.

How “valuable” and “personal” an experience is for an individual is largely subjective and difficult to translate to immediate transactional business objectives.

Paired measurement approaches combining quantitative and qualitative measurement, like surveys and customer interviews for both Control and Variation groups, can be better at assessing this nuanced metric. With qualitative methods, you can directly ask questions like “How valuable was your website experience today?” to assess value or, “How well did we understand you/your unique issues on our site?”

Building dynamic user experiences step-by-step

Example 1: Leveraging first-party cookies

What it does

  • Sets a list of pages that you want to track across your website.
  • Creates a first-party cookie for every user that stores an array of those tracked pages that the user browsed.
  • Places JavaScript in a testing platform to expose Variation members to the dynamic user experience which will access the cookie and modify a website’s HTML to make use of the dynamic value of that cookie.
  • Does not rely on User Registration or a CDP to collect or leverage the user data attribute.

Steps

1. Adjust this code and modify the array “tracked_pages” to reflect your own pages you want to track.

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + JSON.stringify(cvalue) + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return JSON.parse(c.substring(name.length, c.length));
        }
    }
    return null;
}
var current_location = window.location.pathname;
var cookie_name = 'services_browsed';
// Change this array of page paths to include your own pages you want tracked
var tracked_pages = [
    '/digital-marketing-services/brand-strategy-and-brand-services/',
    '/digital-marketing-services/search-engine-optimization/',
    '/digital-marketing-services/paid-media-marketing/',
    '/digital-marketing-services/web-design/',
    '/digital-marketing-services/web-development/',
    '/digital-marketing-services/creative/',
    '/digital-marketing-services/content-marketing/',
    '/digital-marketing-services/conversion-rate-optimization/',
    '/marketing-analytics-services/'
];
if(tracked_pages.includes(current_location)) {
    var services_browsed = getCookie(cookie_name);
    if(!services_browsed) {
        services_browsed = [];
    }
    var found_service_index = services_browsed.indexOf(current_location);
    if(found_service_index != -1) {
        services_browsed.splice(found_service_index, 1);
    }
    services_browsed.push(current_location);
    setCookie(cookie_name, services_browsed, 400);
}

2. Paste it into a new Custom HTML tag within your website’s GTM container.

3. In your testing platform of choice, create an experiment and a Variation. In the Variation, insert the following JavaScript, modified to fit your use case.

4. In this instance, you are detecting the last page browsed by the visitor in your list of pages you wanted tracked.

5. You are then taking that value and manually defining the title of the page based on the last page browsed.

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return JSON.parse(c.substring(name.length, c.length));
        }
    }

    return null;
}
var lastService = getCookie('services_browsed').slice(-1)[0];
// you can select whatever parent element you would like to insert this underneath
var parentEl = document.querySelector('.home .hero-defaults--introduction.section--hero__01--inner--introduction');
var dynamicExp = document.createElement('div');
dynamicExp.setAttribute('id','pzn-test');
var serviceTitleMatch = '';
if(lastService == '/digital-marketing-services/brand-strategy-and-brand-services/'){
  serviceTitleMatch = 'Brand Strategy and Brand Services';
} else if (lastService == '/digital-marketing-services/search-engine-optimization/'){
  serviceTitleMatch = 'SEO';
} else if (lastService == '/digital-marketing-services/paid-media-marketing/'){
  serviceTitleMatch = 'Paid Media Marketing';
} else if (lastService == '/digital-marketing-services/web-design/'){
  serviceTitleMatch = 'Web Design';
} else if (lastService == '/digital-marketing-services/web-development/'){
  serviceTitleMatch = 'Web Development';
} else if (lastService == '/digital-marketing-services/creative/'){
  serviceTitleMatch = 'Creative Services';
} else if (lastService == '/digital-marketing-services/content-marketing/'){
  serviceTitleMatch = 'Content Marketing';
} else if (lastService == '/digital-marketing-services/conversion-rate-optimization/'){
  serviceTitleMatch = 'Conversion Rate Optimization';
} else if (lastService == '/marketing-analytics-services/'){
  serviceTitleMatch = 'Marketing Analytics';
}

dynamicExp.innerHTML = '<a href="'+lastService+'">Continue exploring '+serviceTitleMatch+'</a>';
parentEl.appendChild(dynamicExp);

Summary

  • This creates a data point specifically for individuals that can be programmatically used within VWO experiments. You can then test if a dynamic user experience leveraging this data attribute of “services_browsed” is a valuable, personally relevant experience.
  • This first-party cookie creation is useful for testing dynamic user experiences using web-sourced data attributes. The same basic functions can be applied to capture other behaviors like form completions, cart abandonment, etc., and test experiences leveraging those unique data attributes.

Example 2: Leveraging Hubsport

What it does

  • Grabs the user ID of a HubSpot user which is available on websites where HubSpot is tracking.
  • Takes that user ID and makes an API call to HubSpot to get that user’s attributes.
  • Stores the first name of that user in a variable for you to use in an experiment.
  • This method does not rely on a CDP or User Registration on your website. However, the visitor you are looking to get attributes for will need to exist in HubSpot for you to be able to pull anything.

Steps

1. Login to HubSpot.

2. Create a private app and select the ‘scopes’ you want. Save your access token.

3. To retrieve contact properties you need ‘Read’ access granted to crm.objects.contacts

4. Have a developer or yourself take the following code, place it on your website, and include the access token.

5. The PHP code along with instructions can be found here: https://github.com/steveerdelyi/hubspot-user-php.

6. Go to your testing platform of choice and paste the code provided to take the HubSpot “first name” value and use it to build a dynamic user experience.

7. When you are looking for a specific page, check to ensure the value of “first name” exists, and if it does, then you are modifying some HTML to say “Welcome back, {{first name}}. Experience tailor-made Nevada adventures.”

if(document.body.classList.contains('page-id-22170') && ((hubspot_user.name 
!== undefined && hubspot_user.name.first !== undefined))) {
    document.querySelector('.hero-text-content__text-column h2 strong').innerHTML='Welcome back, ' + hubspot_user.name.first + '. Experience tailor-made Nevada adventures.';
}

Summary

  • You can modify the PHP code above to retrieve nearly any attribute for that user that exists within HubSpot. You may need to update the “scopes” of your private app to do so.
  • HubSpot as a CRM contains a wealth of information and acts as a repository for user information. This makes those data attributes available for use so you can test different dynamic user experiences leveraging this data.

Building trust

Personalizations based on segments may make consumers scratch their heads thinking, “How did they know I should be in this group?” However, including dynamic user attributes is a step beyond and may send someone rushing to your privacy policy page to contact you to delete their information.

23% of consumers surveyed in 2023 have become less comfortable with their personal data being used for personalization, highlighting the importance of transparency and trust in customer engagement efforts (Segment 2023).

Safeguards to include in dynamic user experiences

These are the three critical safeguards you should include in every dynamic user experience:

  1. Be rigorous in your selection and testing of dynamic user experiences to ensure you are not pulling and using sensitive attributes that don’t provide any real value outside of spooking consumers.
  2. Ensure privacy policies and terms of use are updated to reflect the use of personal attributes.
  3. Be empathetic and provide clear opportunities for them to opt-out which can include some of the following methods:
    • Lightweight test-specific opt-outs
    • Account preferences control center
    • Consent management platform control

Building trust with users should be as important as the dynamic experience itself. Test different experiences that increase transparency and give users control over the experiences they are subjected to.

Lightweight test-specific opt-outs

  • An easy way of doing this is to insert a link next to the altered element(s) of a dynamic user experience to “opt out of experience”.
  • When this link is clicked you can launch JavaScript that will push an attribute to your testing platform that will opt visitors out of the experiment and tag them as a segment to be split out of your experiment analysis later on.
    • Here is an example of how you could do this using “Example 2: Leveraging HubSpot.”
      • Within the experiment code:
        1. Within the testing platform code, you would insert a hyperlink next to the changed element.
        2. This hyperlink would say “opt-out of experience”.
        3. When clicked, a cookie would be created for “pzn-opt-out” with a value of “{{your experiment ID}}”.
        4. A piece of JavaScript afterward would reload the page automatically so the visitor is no longer exposed to the experience.
      • Within the test setup:
        1. You would modify your test targeting conditions to only include visitors who do not have the cookie of “pzn-opt-out” = “{{your experiment ID}}”.
        2. If this condition is evaluated every page load then this will prevent them from seeing the dynamic experience once the JavaScript reloads the page.
        3. To segment opt-out visitors’ data from your experiments you can define a segment in your report looking for the query parameter of pzn-opt-out and value of {{your experiment ID}}.

Account preferences control center

  • A natural place for visitors to control the data used by businesses is on their email preferences page typically accessed by a “Manage Preferences” hyperlink provided within emails.
  • You can modify this page to transparently show the data attributed being leveraged by current dynamic user experiences they are members of and provide an attribute-specific opt-out or a global “opt-out of dynamic experiences” link.
  • This is especially relevant for email-based dynamic user experiences. Test applications of these opt-out opportunities. You may consider adding a separate link within email footers to “Manage Dynamic User Experiences” separate from their “Email Preferences”.
  • You can also tie dynamic user experience inclusion into more global preferences like Consent Management Platform (CMP) controls through consent banners.
  • If you have a signal based on a user’s selection of privacy preferences through a consent banner, you can use that to determine eligibility for dynamic user experiences.

Conclusion

Marketing needs to deliver the right message at the right time, making the messages valuable and personal for consumers. Personalization often ends up being a one-to-many experience instead of one-to-one. Including dynamic user attributes helps create a closer one-to-one experience by sourcing valuable and personal dynamic user experiences based on collected data attributes.

Conceptualize dynamic user experiences that are valuable and personal, then prototype them with lightweight code to collect the attributes without aiming for a perfect centralized database. Allow visitors to opt-out and transparently view the personalization source. Test these experiences to ensure they benefit users and meet organizational KPIs, while always keeping the user’s interests at the forefront and tolerating initial errors.

Related Posts

Current article:

Step-by-Step Guide to Building Dynamic User Experiences

Categories