{"id":5837,"date":"2018-07-12T14:47:23","date_gmt":"2018-07-12T13:47:23","guid":{"rendered":"https:\/\/dev.popcomms.com\/pop\/?p=5837"},"modified":"2021-11-15T19:33:27","modified_gmt":"2021-11-15T19:33:27","slug":"7-considerations-creating-captivating-immersive-interactive-user-experiences","status":"publish","type":"post","link":"https:\/\/dev.popcomms.com\/pop\/7-considerations-creating-captivating-immersive-interactive-user-experiences\/","title":{"rendered":"7 Considerations when Creating Captivating and Immersive Interactive User Experiences"},"content":{"rendered":"\n<p>Visual Storytelling in the form of immersive customer experiences for <a rel=\"noreferrer noopener\" href=\"https:\/\/dev.popcomms.com\/pop\/touchscreen-experiences\/\" target=\"_blank\">touchscreen experiences<\/a>, <a rel=\"noreferrer noopener\" href=\"https:\/\/dev.popcomms.com\/pop\/sales-enablement-tools\/\" target=\"_blank\">sales enablement tools<\/a> or <a rel=\"noreferrer noopener\" href=\"https:\/\/dev.popcomms.com\/pop\/case-studies\/isotrak\/\" target=\"_blank\">interactive presentations<\/a> is fast becoming a key customer sales strategy &#8211; and it&#8217;s transforming the landscape for brands, marketing and beyond!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><span class=\"has-inline-color has-pop-pink-color\"><strong>&#8220;The next competitive battleground for leading-edge companies, whether they sell to consumers or businesses, will be in creating experiences.<\/strong><\/span><\/p><p><span class=\"has-inline-color has-pop-pink-color\">&#8220;<strong>We are now in an experience economy.<\/strong>&#8220;<\/span><\/p><cite>The Harvard Business Review<\/cite><\/blockquote>\n\n\n\n<p>This transformation is partly due to innovative technology becoming more accessible, a shift in customer behaviour and the fact that the expectation on brands is now higher than ever before.&nbsp; Your customers are now looking for authentic, responsible brands that are personal to them, know what they want, and will deliver. It&#8217;s no longer about the physical product or service, people expect a smartphone to work when they buy it, it&#8217;s all about the personal experience they&#8217;ll have when using the phone and how they can customise it to their own needs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/Interactive-touchscreen-Royal-Mint-7-1024x577.jpg\" alt=\"Royal Mint interactive digital software displayed using several large monitors across coin decorated walls\" class=\"wp-image-463\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/Interactive-touchscreen-Royal-Mint-7-1024x577.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/Interactive-touchscreen-Royal-Mint-7-300x169.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/Interactive-touchscreen-Royal-Mint-7-768x433.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/Interactive-touchscreen-Royal-Mint-7.jpg 1028w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>An interactive touchscreen experience which brings the <a href=\"https:\/\/dev.popcomms.com\/pop\/case-studies\/the-royal-mint-touchscreen\/\" target=\"_blank\" rel=\"noreferrer noopener\">Royal Mint<\/a>&#8216;s heritage and craftmanship to life<\/figcaption><\/figure>\n\n\n\n<p>You might already be thinking along these lines and looking to create something that&#8217;s unique and memorable and will give your customers an experience that&#8217;ll bring them closer to your brand. But where on earth do you start? Check out our recent <em><strong><span class=\"has-inline-color has-pop-pink-color\"><a rel=\"noreferrer noopener\" href=\"https:\/\/dev.popcomms.com\/pop\/start-creating-interactive-touchscreen-experience-business\/\" target=\"_blank\">blog<\/a><\/span><\/strong><\/em> about creating touchscreen experiences to get a better idea.<\/p>\n\n\n\n<p>But how do you create an interactive customer experience? <\/p>\n\n\n\n<p>Whether you&#8217;re planning on going it alone with the help of an in-house design team &#8211; or you&#8217;re outsourcing to an interactive design agency, we&#8217;ve put together some of the most important considerations when creating captivating and immersive interactive experiences your customers will love. We&#8217;ll cover the following in tis blog:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>It&#8217;s all about your customers<\/li><li>Make it intuitive<\/li><li>Tell a compelling story<\/li><li>Let users play a central role<\/li><li>Add a touch of gamification<\/li><li>Inspire action<\/li><li>Create an immersive environment<\/li><li>Next steps<\/li><\/ol>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"color: #f2168f;\">1. It&#8217;s all about your customers<\/span><\/h2>\n\n\n\n<p>We always start with the customer, they are the <strong>centre of everything<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>What do they want from you?<\/li><li>What kind of experience do they want?<\/li><li>What kind of experience do you want them to have?<\/li><li>How will you meet their needs and expectations?<\/li><li>How will you create an experience that satisfies them and brings them closer to your brand?<\/li><\/ul>\n\n\n\n<p>Exceeding their expectations is a big part of creating something they&#8217;re going to find memorable, engaging and persuasive.<\/p>\n\n\n\n<p>With that in mind, it&#8217;s important to think carefully about what your customers are going to need from your experience &#8211; and how that aligns with your own objectives (but more about that in point 6). How can you give them an experience that&#8217;s centred around them, and takes into account their world, their needs, and their interests?<\/p>\n\n\n\n<p>But, not only must it be customer-centric but also personal &#8211; your experience must talk to the individual, so how can you take that into account when designing an experience? Again, this is all about understanding your customers and the users of your experience and tailoring the different messages and outcomes to take account of them.<\/p>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"color: #f2168f;\">2. Make it intuitive<\/span><\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><span style=\"color: #162440;\">&#8220;No amount of creativity will mask a bad user experience and a bad user experience means an unhappy customer&#8221;<strong> <\/strong><\/span><\/p><cite><strong>Stuart Janicki, <\/strong>Head of Customer Experience, POPcomms<\/cite><\/blockquote>\n\n\n\n<p>In order to deliver the best possible experience for your customers, you have to create an experience that&#8217;s intuitive to use and easy for them to achieve their goals. Whenever we do something as an individual we have a specific outcome in mind we want to achieve and these are goals.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Touchscreen-interactive-presentation-medical-device-corin-popcomms-2-1024x640.jpg\" alt=\"person interacting with Corin interactive touchscreen software displayed on large white tablet\" class=\"wp-image-247\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Touchscreen-interactive-presentation-medical-device-corin-popcomms-2-1024x640.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Touchscreen-interactive-presentation-medical-device-corin-popcomms-2-300x188.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Touchscreen-interactive-presentation-medical-device-corin-popcomms-2-768x480.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Touchscreen-interactive-presentation-medical-device-corin-popcomms-2-1536x960.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Touchscreen-interactive-presentation-medical-device-corin-popcomms-2.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>We developed touchscreen experiences for <a href=\"https:\/\/dev.popcomms.com\/pop\/case-studies\/corin\/\" target=\"_blank\" rel=\"noreferrer noopener\">Corin<\/a>, a world leader in orthopaedic innovation, to demonstrate its cutting-edge products at events<\/figcaption><\/figure>\n\n\n\n<p>People are naturally risk averse, and a little lazy, and if they get confused or frustrated at what they&#8217;re supposed to be doing they&#8217;ll simply walk away. The result? A loss on your investment.<\/p>\n\n\n\n<p>Unfortunately, this is a simple mistake a lot of companies make when creating an interactive experience. An example of this and the most common misconception, especially with touchscreen experiences, is that you can put your website on a touchscreen and that&#8217;s all that is needed.<\/p>\n\n\n\n<p>Any interactive experience that runs on a large touchscreen is very different from the way you&#8217;d normally navigate a website using a PC, smartphone or tablet. Touchscreens are much larger, and people interact with them in a different way, not only physically but also from a human interaction perspective (we won\u2019t get too deep on the psychology of human interaction here) &#8211; it&#8217;s enough of a difference to be significant though.<\/p>\n\n\n\n<p>Not to mention, most websites aren&#8217;t particularly immersive or even designed to be an experience, and lack a personal, customer-centric design. <\/p>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"color: #f2168f;\">3. Tell a compelling story<\/span><\/h2>\n\n\n\n<p>Visual storytelling has always been a powerful tool and there&#8217;s no better way to guide users through your experience (and keep them engaged every step of the way) than telling a compelling visual story.<\/p>\n\n\n\n<p>And if you make it interactive? All the better, as that is where you can start to personalise the story. Again, it starts with the customer, how do you attract their attention, pique their interest and create the desire to follow the experience through?<\/p>\n\n\n\n<p><span class=\"has-inline-color has-pop-pink-color\">A staggering <strong>91%<\/strong> of B2B buyers say they now prefer to consume interactive and visual content, as opposed to static content. But the differences between B2B and B2C audiences are becoming harder to see in this respect<\/span><\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.demandgenreport.com\/industry-resources\/research\/3141-2015-content-preferences-survey-buyers-value-content-packages-interactive-content-.html#.VVOOO9NVhBc\" target=\"_blank\">DemandGen Report<\/a><\/p>\n\n\n\n<p>We are not talking about fairy-tale style storytelling here, even the most complex of businesses can utilise simple storytelling techniques to create a compelling experience that takes customers on a journey.<\/p>\n\n\n\n<p>Think about the story you&#8217;re looking to tell, what will resonate with your audience and how can it be transformed into an interactive experience? How can you map it out so that you can achieve everything you need and keep people engaged all the way through?<\/p>\n\n\n\n<p>Take the time to carefully craft a beginning, a middle and an end for your story. For example, what&#8217;s your starting point &#8211; in other words, what&#8217;s going to get users hooked into the story from the very beginning? What will be the perfect ending &#8211; or satisfying climax &#8211; and how do you want users to feel afterwards or what do you want them to do?<\/p>\n\n\n\n<p>And don&#8217;t forget all the little details in-between &#8211; sometimes they&#8217;re what makes a story all the more compelling.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Wayfinding_touchscreen_multitouch_intuiface_popcomms-1-1024x640.jpg\" alt=\"A user of a touchscreen experience exploring the cityscape designed for SCC. \" class=\"wp-image-9099\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Wayfinding_touchscreen_multitouch_intuiface_popcomms-1-1024x640.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Wayfinding_touchscreen_multitouch_intuiface_popcomms-1-300x188.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Wayfinding_touchscreen_multitouch_intuiface_popcomms-1-768x480.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Wayfinding_touchscreen_multitouch_intuiface_popcomms-1-1536x960.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Wayfinding_touchscreen_multitouch_intuiface_popcomms-1.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Interactive cityscape for <a href=\"https:\/\/dev.popcomms.com\/pop\/case-studies\/scc\/\" target=\"_blank\" rel=\"noreferrer noopener\">SCC<\/a> telling a story around the varied business sectors they operate in<\/figcaption><\/figure>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"color: #f2168f;\">4. Let users play a central role<\/span><\/h2>\n\n\n\n<p>So, if the above sounds like a good idea, why not introduce a personalised character to your story that resonates with your audience? If you can put them in the centre of your story and let them make key decisions that affect how things will play out, you&#8217;re almost guaranteed to keep their attention.<\/p>\n\n\n\n<p>Giving your customers the wheel puts them at the heart of the experience and if you can weave in an emotional element all the better to build that connection.<\/p>\n\n\n\n<p>This then plays nicely into our next point.<\/p>\n\n\n\n    <div class=\"container-wide\">\n    <div\n      is=\"download\"\n      inline-template\n      id=\"download-form\"\n    >\n      <div class=\"download-form-container\"  data-email-title=\"\" data-email-image=\"\" data-email-file=\"\">\n        <div class=\"border-2 \">\n          <div class=\"sm:hidden block relative\" style=\"padding-bottom: 100%;\">\n            <div\n              class=\"absolute top-0 left-0 w-full h-full bg-no-repeat bg-center bg-cover\"\n              style=\"background-image: url(https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-multitouch-sales-enablement-IHG-popcomms-1.jpg)\"\n            ><\/div>\n          <\/div>\n          <div\n            ref=\"downloadForm\"\n            name=\"download_form\"\n            method=\"post\"\n            action=\"\"\n            onsubmit=\"return false\"\n            class=\"download-form w-full relative\"\n          >\n            <transition name=\"fade\">\n              <div\n                v-show=\"step !== 1\"\n                class=\"absolute flex flex-col top-0 left-0 w-full h-full shadow-md bg-pop-black\"\n                style=\"z-index: 1;\"\n              ><\/div>\n            <\/transition>\n            <div ref=\"downloadFormStep1\">\n              <div class=\"md:grid md:grid-cols-2\">\n  <div class=\"hidden md:block relative\" style=\"padding-bottom: 100%;\">\n    <div\n      class=\"absolute top-0 left-0 w-full h-full bg-no-repeat bg-center bg-cover\"\n      style=\"background-image: url(https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-multitouch-sales-enablement-IHG-popcomms-1.jpg)\"\n    ><\/div>\n  <\/div>\n  <div class=\"flex flex-col\">\n    <div class=\"h-2\/5 bg-pop-pink text-pop-white p-6 lg:px-8 flex flex-col justify-center\">\n      <h3 class=\"font-semibold text-xl lg:text-2xl\">Download guide<\/h3>\n    <\/div>\n    <div class=\"h-3\/5 flex flex-col justify-between bg-pop-black\" >\n      <div class=\"flex items-center lg:text-lg h-full p-6 lg:px-8 text-pop-white\">\n        Download our guide to creating immersive touchscreen experiences\n      <\/div>\n      <div\n        class=\"flex justify-end cursor-pointer\"\n        @click=\"nextStep()\"\n      >\n        <div class=\"bg-pop-black text-pop-white text-pop-white m-0 px-4 py-2 h-10 leading-0\">\n          Download\n        <\/div>\n        <div class=\"w-10 h-10 p-2 bg-pop-navy\">\n          <svg class=\"w-full absolute left-1\/2 top-1\/2 -translate-y-1\/2 -translate-x-1\/2 transform rotate-90 text-pop-white\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path\n              class=\"fill-current text-pop-pink\"\n              d=\"M13.0607 0.625645C12.4749 0.0398579 11.5251 0.0398579 10.9393 0.625645L1.3934 10.1716C0.807611 10.7574 0.807611 11.7071 1.3934 12.2929C1.97919 12.8787 2.92893 12.8787 3.51472 12.2929L12 3.80762L20.4853 12.2929C21.0711 12.8787 22.0208 12.8787 22.6066 12.2929C23.1924 11.7071 23.1924 10.7574 22.6066 10.1716L13.0607 0.625645ZM13.5 24.3137V1.6863H10.5V24.3137H13.5Z\"\n              fill=\"currentColor\"\n            \/>\n          <\/svg>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep2\"\n              v-show=\"step === 2\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10  text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">1 \/ 3<\/div>\n              <div class=\"w-full md:w-5\/6 form-text leading-tight text-base sm:text-xl md:text-xl\">\n  We just need some details to get you started. Please enter your <span class=\"text-pop-yellow\">first name<\/span> and <span class=\"text-pop-yellow\">surname<\/span>.\n<\/div>\n<div class=\"flex-grow flex flex-col justify-center\">\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"first_name\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"text\"\n        v-model=\"form.firstName.value\"\n        placeholder=\"First name *\"\n        @keyup.prevent=\"validateFirstName\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.firstName.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"last_name\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white pr-12\"\n        type=\"text\"\n        v-model=\"form.lastName.value\"\n        placeholder=\"Surname *\"\n        @keyup.prevent=\"validateLastName\"\n      >\n            <svg @click=\"validateLastName\" class=\"absolute h-8 sm:h-auto top-1\/2 transform -translate-y-1\/2 right-0 cursor-pointer fill-current text-pop-white hover:text-pop-pink transition-colors\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M36.3746 25.0607C36.9604 24.4749 36.9604 23.5251 36.3746 22.9393L26.8287 13.3934C26.2429 12.8076 25.2931 12.8076 24.7073 13.3934C24.1216 13.9792 24.1216 14.9289 24.7073 15.5147L33.1926 24L24.7073 32.4853C24.1216 33.0711 24.1216 34.0208 24.7073 34.6066C25.2931 35.1924 26.2429 35.1924 26.8287 34.6066L36.3746 25.0607ZM12.6865 25.5L35.3139 25.5L35.3139 22.5L12.6865 22.5L12.6865 25.5Z\"\/>\n      <\/svg>\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.lastName.valid)\" style=\"height: 2px;\"\n  ><\/div>\n      <div class=\"hidden sm:block input-guide opacity-0 absolute -bottom-2 right-0 text-sm pt-1 text-right transform translate-y-full text-pop-white\">click or hit enter<\/div>\n  <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep3\"\n              v-show=\"step === 3\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">2 \/ 3<\/div>\n              <div class=\" form-text w-full sm:w-4\/6 leading-tight text-base sm:text-xl md:text-xl\">\n  And now just your <span class=\"text-pop-yellow\">email<\/span> &amp; <span class=\"text-pop-yellow\">company name<\/span>, please.\n<\/div>\n<div class=\"flex-grow flex flex-col justify-center\">\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"email\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"email\"\n        v-model=\"form.email.value\"\n        placeholder=\"Your email *\"\n        @keyup.prevent=\"validateEmail\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.email.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"company\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white pr-12\"\n        type=\"text\"\n        v-model=\"form.company.value\"\n        placeholder=\"Company *\"\n        @keyup.prevent=\"validateCompany\"\n      >\n            <svg @click=\"validateCompany\" class=\"absolute h-8 sm:h-auto top-1\/2 transform -translate-y-1\/2 right-0 cursor-pointer fill-current text-pop-white hover:text-pop-pink transition-colors\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M36.3746 25.0607C36.9604 24.4749 36.9604 23.5251 36.3746 22.9393L26.8287 13.3934C26.2429 12.8076 25.2931 12.8076 24.7073 13.3934C24.1216 13.9792 24.1216 14.9289 24.7073 15.5147L33.1926 24L24.7073 32.4853C24.1216 33.0711 24.1216 34.0208 24.7073 34.6066C25.2931 35.1924 26.2429 35.1924 26.8287 34.6066L36.3746 25.0607ZM12.6865 25.5L35.3139 25.5L35.3139 22.5L12.6865 22.5L12.6865 25.5Z\"\/>\n      <\/svg>\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.company.valid)\" style=\"height: 2px;\"\n  ><\/div>\n      <div class=\"hidden sm:block input-guide opacity-0 absolute -bottom-2 right-0 text-sm pt-1 text-right transform translate-y-full text-pop-white\">click or hit enter<\/div>\n  <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep4\"\n              v-show=\"step === 4\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">3 \/ 3<\/div>\n              <div class=\"w-1\/2 form-text opacity-0 sm:mb-12 leading-tight text-base sm:text-xl md:text-xl\">\n  Brill! Are you a human?\n  Prove it by simply entering the answer to <span class=\"text-pop-yellow\" v-html=\"captcha.a\"><\/span> <span class=\"text-pop-yellow\">+<\/span> <span class=\"text-pop-yellow\" v-html=\"captcha.b\"><\/span>\n<\/div>\n<div class=\"grid grid-cols-2 auto-cols-auto space-x-4 my-4\">\n  <div>\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"captcha\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"text\"\n        v-model=\"form.captcha.value\"\n        placeholder=\"Your answer?\"\n        @keyup.prevent=\"validateCaptcha\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.captcha.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n<\/div>\n<div class=\"form-text flex opacity-0 text-xs\">\n  <div>\n    By submitting this form you agree to POPcomms <a class=\"text-pop-pink underline\" href=\"https:\/\/dev.popcomms.com\/pop\/privacy-policy\" target=\"_blank\">Privacy Policy<\/a>\n  <\/div>\n<\/div>\n<div\n  class=\"absolute bottom-0 right-0 flex justify-center cursor-pointer\"\n  @click=\"submit\"\n>\n  <div class=\"bg-pop-purple text-pop-white m-0 px-4 py-3 h-12 leading-0\">\n    Submit\n  <\/div>\n  <div class=\"w-12 h-12 p-2 bg-white flex items-center justify-center\">\n    <svg class=\"transform rotate-90 text-pop-purple\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <path\n        class=\"fill-current\"\n        d=\"M13.0607 0.625645C12.4749 0.0398579 11.5251 0.0398579 10.9393 0.625645L1.3934 10.1716C0.807611 10.7574 0.807611 11.7071 1.3934 12.2929C1.97919 12.8787 2.92893 12.8787 3.51472 12.2929L12 3.80762L20.4853 12.2929C21.0711 12.8787 22.0208 12.8787 22.6066 12.2929C23.1924 11.7071 23.1924 10.7574 22.6066 10.1716L13.0607 0.625645ZM13.5 24.3137V1.6863H10.5V24.3137H13.5Z\"\n        fill=\"currentColor\"\n      \/>\n    <\/svg>\n  <\/div>\n<\/div>\n<div class=\"hidden sm:block absolute top-0 right-0 w-1\/2 pointer-events-none\">\n  <svg class=\"watching-eye w-full\" preserveAspectRatio=\"xMidYMid meet\"  viewBox=\"0 0 496 369\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n    <rect class=\"lines\" y=\"-123.89\" width=\"496\" height=\"245.916\" fill=\"url(#pattern5)\"\/>\n    <clipPath id=\"irisclipPath5\">\n      <path class=\"eye-mask\" style=\"transform-origin: 50% 32%;\" d=\"M0 122.813C58.13 49.7951 147.621 3.01562 248 3.01562C348.379 3.01562 437.87 49.7951 496 122.813C437.87 195.83 348.379 242.61 248 242.61C147.621 242.61 58.13 195.83 0 122.813Z\" fill=\"black\"\/>\n    <\/clipPath>\n    <rect fill=\"white\" style=\"clip-path: url(#irisclipPath5)\" class=\"lines\" y=\"0\" width=\"496\" height=\"245.916\"\/>\n    <!-- <path style=\"clip-path: url(#irisclipPath5)\" d=\"M0 122.813C58.13 49.7951 147.621 3.01562 248 3.01562C348.379 3.01562 437.87 49.7951 496 122.813C437.87 195.83 348.379 242.61 248 242.61C147.621 242.61 58.13 195.83 0 122.813Z\" fill=\"white\"\/> -->\n    <ellipse class=\"iris\" style=\"clip-path: url(#irisclipPath5)\" cx=\"247.653\" cy=\"121.806\" rx=\"101.771\" ry=\"102.118\" fill=\"#6F62FF\"\/>\n    <ellipse class=\"pupil\" style=\"clip-path: url(#irisclipPath5)\" cx=\"244.924\" cy=\"78.2744\" rx=\"35.4286\" ry=\"35.4286\" fill=\"#F8F7EE\"\/>\n    <defs>\n      <pattern id=\"pattern5\" patternContentUnits=\"objectBoundingBox\" width=\"0.0241935\" height=\"0.0487972\">\n        <use xlink:href=\"#image0\" transform=\"scale(0.00201613 0.00406643)\"\/>\n      <\/pattern>\n      <image id=\"image0\" width=\"12\" height=\"12\" xlink:href=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA8SURBVHgB7dGxDQAgCATAdytjwWqwDzuqaBzg7SggITTHN99AzBC3ODoBo3Ds6uJaOAl+DzS+jf\/gE74Bfmo++ZWcm1wAAAAASUVORK5CYII=\"\/>\n    <\/defs>\n  <\/svg>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep5\"\n              v-show=\"step === 5\"\n              class=\"absolute top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm p-3 sm:p-10\">Complete<\/div>\n              <div class=\"grid md:grid-cols-2\">\n  <div class=\"flex flex-col form-text justify-center text-xl p-6\">\n    <div>\n      Thanks, <span class=\"text-pop-yellow\">all done!<\/span><br>\n      Check your email to find your guide.\n    <\/div>\n  <\/div>\n<\/div>\n\n  <svg class=\"hidden md:block absolute right-0 top-1\/2 transform -translate-y-1\/2\" width=\"408\" height=\"336\" viewBox=\"0 0 408 336\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M83.8623 99.4615C83.8623 80.9476 99.1777 65.9391 118.07 65.9391L542.543 65.9392C561.436 65.9392 576.751 80.9477 576.751 99.4616C576.751 117.975 561.436 132.984 542.543 132.984L118.07 132.984C99.1776 132.984 83.8623 117.975 83.8623 99.4615Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M197.889 166.867C197.889 148.154 213.369 132.984 232.464 132.984L542.175 132.984C561.271 132.984 576.751 148.154 576.751 166.867C576.751 185.58 561.271 200.75 542.175 200.75L232.464 200.75C213.369 200.75 197.889 185.58 197.889 166.867Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M216.28 234.632C216.28 215.92 231.76 200.75 250.856 200.75L542.176 200.75C561.271 200.75 576.751 215.92 576.751 234.633C576.751 253.346 561.271 268.515 542.176 268.515L250.856 268.515C231.76 268.515 216.28 253.345 216.28 234.632Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M233.937 302.038C233.937 283.524 249.252 268.515 268.144 268.515L542.544 268.515C561.436 268.515 576.752 283.524 576.752 302.038C576.752 320.552 561.436 335.56 542.544 335.56L268.144 335.56C249.252 335.56 233.937 320.552 233.937 302.038Z\" fill=\"#6F62FF\"\/>\n    <path class=\"hand\"d=\"M379.105 137.017C379.105 97.7617 411.579 65.9391 451.637 65.9391H487.545C527.603 65.9391 560.077 97.7618 560.077 137.017V264.483C560.077 303.738 527.603 335.56 487.545 335.56H451.637C411.579 335.56 379.105 303.738 379.105 264.482V137.017Z\" fill=\"#6F62FF\"\/>\n    <path class=\"waves opacity-0 origin-center\" d=\"M130.346 184.698C118.12 186.375 105.723 185.501 93.9727 182.131C82.2223 178.761 71.3854 172.974 62.1767 165.149C52.9679 157.325 45.5964 147.641 40.5482 136.738C35.5 125.834 32.8898 113.957 32.8897 101.891C32.8896 89.825 35.4995 77.8432 40.5475 66.736C45.5954 55.6287 52.9667 45.6481 62.1753 37.4524C71.3839 29.2566 82.2207 23.0319 93.971 19.1886C105.721 15.3452 118.118 13.9706 130.345 15.1553L128.988 26.3128C118.367 25.2836 107.598 26.4777 97.3901 29.8165C87.1825 33.1552 77.7686 38.5627 69.769 45.6823C61.7695 52.802 55.366 61.4721 50.9808 71.1211C46.5956 80.77 44.3283 91.1786 44.3285 101.661C44.3286 112.142 46.5961 122.46 50.9815 131.932C55.3668 141.404 61.7705 149.816 69.7702 156.613C77.7699 163.41 87.1839 168.438 97.3915 171.365C107.599 174.292 118.369 175.052 128.99 173.595L130.346 184.698Z\" fill=\"#3A3EAB\"\/>\n    <path class=\"waves opacity-0 origin-center\" d=\"M121.559 160.297C104.817 160.599 88.7233 154.419 76.8186 143.116C64.914 131.814 58.1735 116.315 58.08 100.029C57.9866 83.7426 64.5478 68.0036 76.3203 56.2741C88.0928 44.5445 104.112 37.7853 120.854 37.4833L120.916 48.2672C107.114 48.5161 93.9081 54.0884 84.203 63.758C74.4979 73.4277 69.089 86.4027 69.166 99.8287C69.2431 113.255 74.7998 126.032 84.6138 135.349C94.4279 144.667 107.695 149.762 121.497 149.513L121.559 160.297Z\" fill=\"#3A3EAB\"\/>\n  <\/svg>\n                <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  \n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"color: #f2168f;\">5. Add a touch of gamification<\/span><\/h2>\n\n\n\n<p>Gamification is another great way of keeping your customers immersed and can make your experience a more enjoyable and engaging one. For instance, users could have the option to play a game that ties various aspects of your experience together in a way that&#8217;s fun but also gets your message across in a subtle yet impactful way.<\/p>\n\n\n\n<p>Remember, this should be an intuitive experience that&#8217;s not too taxing or confusing. Gamification can be a great way of highlighting your value proposition and really cementing it in the mind of your customer.<\/p>\n\n\n\n<p>As an example, we created an interactive experience for Citrix to be used at their global events to build a sales pipeline around mobile security. The gamified experience&nbsp;was closely linked to the mobile security message and featured league tables and the potential to win an Airwheel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Sales-enablement-interactive-presentation-citrix-popcomms-8-1024x640.jpg\" alt=\"\" class=\"wp-image-8271\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Sales-enablement-interactive-presentation-citrix-popcomms-8-1024x640.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Sales-enablement-interactive-presentation-citrix-popcomms-8-300x188.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Sales-enablement-interactive-presentation-citrix-popcomms-8-768x480.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Sales-enablement-interactive-presentation-citrix-popcomms-8-1536x960.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/Sales-enablement-interactive-presentation-citrix-popcomms-8.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><span style=\"color: #f2168f;\"><span class=\"has-inline-color has-pop-pink-color\"><strong>\u201cYou took one idea and shaped it into a multi-touch program \u2013 executable in different ways, languages and over an extended time frame. As a direct result, we doubled our lead capture at our booths, delivered stunning content to the business that is valid for at least 6 months, and in the first 7 days of the demand generation phase, this program has delivered over 1,000 leads and strong 6\u2013digit contribution to the sales pipeline.\u201c<\/strong><\/span><\/span><\/p><cite><strong>Mike Oliver,<\/strong> S<em>enior Marketing Manager, Citrix<\/em><\/cite><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><\/p><\/blockquote>\n\n\n<p><!-- \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<p><strong>TIP:<\/strong> Check out <a href=\"https:\/\/dev.popcomms.com\/pop\/blog\/how-can-customers-and-visitors-interact-with-your-brand-and-content-on-a-touchscreen-display\/\" target=\"_blank\" rel=\"noopener\">our blog for some more ideas<\/a> of different ways customers can interact with an interactive touchscreen experience!<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n--><\/p>\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"color: #f2168f;\">6. Inspire action<\/span><\/h2>\n\n\n\n<p>We&#8217;ve mentioned this briefly above, but it&#8217;s important to consider why you&#8217;re thinking of designing an interactive touchscreen experience in the first place.&nbsp;For example, what do you want to get back from users of the experience &#8211; leads, brand\/product awareness, sales?<\/p>\n\n\n\n<p>Carefully consider the sort of impression you want people to be left with, and the action you want them to take afterwards (for instance, leaving their contact details, making a purchase &#8211; or something else entirely!). But in return for these things, you have to offer something valuable in return, whether that is content, a reward or an enjoyable experience.<\/p>\n\n\n\n<p>Action and Goals are the key here. You have to be absolutely clear in your mind what action you need people to take during and after your experience and this must align with their goals &#8211; without these two being perfectly aligned you won\u2019t get the results you need.<\/p>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"color: #f2168f;\">7. Create an immersive environment<\/span><\/h2>\n\n\n\n<p>If you&#8217;re thinking about designing an experience using interactive touchscreens then that&#8217;s great. But what about the area surrounding your experience? Think about the surroundings and how to create an immersive environment that will complement your experience as a whole.<\/p>\n\n\n\n<p>Consider how you want people to feel in that space &#8211; should it be calming? Perhaps it&#8217;ll be a friendly, welcoming environment that encourages people to come and interact &#8211; we humans are cautious creatures, and if you don&#8217;t make it obvious that your experience is there for them to play with and explore, they might not get the hint.<\/p>\n\n\n\n<p>There are different ways an interactive experience can affect the surroundings of a space &#8211; for example, it could control the surrounding lights or audio in the space.<\/p>\n\n\n\n<p>You could introduce sensors so when someone enters a specific area the interactive screens respond, or object recognition (popular with brands who have a product to demonstrate or for educational experiences) that provides different content when a specific object is picked up.<\/p>\n\n\n\n<p>There are so many things you can do to enhance the overall immersive experience beyond the screens themselves that itis worth considering this at the same time.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-2-1024x640.jpg\" alt=\"\" class=\"wp-image-8116\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-2-1024x640.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-2-300x188.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-2-768x480.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-2-1536x960.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-2.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Model and interactive for <a href=\"https:\/\/dev.popcomms.com\/pop\/case-studies\/ebbsfleet\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ebbsfleet Garden City<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"color: #f2168f;\">Your next steps<\/span><\/h2>\n\n\n\n<p>If this is your first time thinking about developing an interactive experience, and you&#8217;re feeling a bit overwhelmed, don&#8217;t panic. You don&#8217;t have to go it alone, and the best advice we can give you is to seek out an experienced interactive agency or specialist who can give you some advice on your first steps and lots of ideas.<\/p>\n\n\n\n<p>There are plenty of great resources online &#8211; and we&#8217;ve even outlined where to start when developing an interactive touchscreen experience for your business right here on our <strong><em><span class=\"has-inline-color has-pop-pink-color\"><a href=\"https:\/\/dev.popcomms.com\/pop\/start-creating-interactive-touchscreen-experience-business\/\" target=\"_blank\" rel=\"noreferrer noopener\">blog<\/a><\/span><\/em><\/strong>. If you do decide to go down the agency route, we&#8217;d advise asking to see some previous examples of their work and getting a better idea of what might be possible for you &#8211; and your budget.<\/p>\n\n\n\n<p>They should listen to you and understand your objectives or what success looks like for you and guide you every step of the way to creating an experience that your customers will love.<\/p>\n\n\n\n<h2 class=\"has-pop-pink-color has-text-color wp-block-heading\"><span style=\"color: #f2168f;\"><span class=\"has-inline-color has-pop-pink-color\">Key Takeaways<\/span><\/span><\/h2>\n\n\n\n<p>We hope you&#8217;ve enjoyed reading! Immersive user experience design can be a powerful way to make a deeper connection with your customers; just so long as you know what it is you&#8217;re looking to achieve. Then, you can consider how you&#8217;re going to get there with an experience geared around your customers.<\/p>\n\n\n\n<p>Saying that there&#8217;s little point in utilising the latest technology just because it&#8217;s there &#8211; that&#8217;s why an interactive design specialist will help talk you through your options and help you decide what might be the best approach for you &#8211; be it an interactive touchscreen, or something else.<\/p>\n\n\n\n<p>Care to learn more about some of the interactive design possibilities mentioned above?  Then download our Guide to developing Touchscreen experiences, or get in touch. We\u2019d love to hear from you, and we promise to reply with something helpful!<\/p>\n\n\n\n    <div class=\"container-wide\">\n    <div\n      is=\"download\"\n      inline-template\n      id=\"download-form\"\n    >\n      <div class=\"download-form-container\"  data-email-title=\"\" data-email-image=\"\" data-email-file=\"\">\n        <div class=\"border-2 \">\n          <div class=\"sm:hidden block relative\" style=\"padding-bottom: 100%;\">\n            <div\n              class=\"absolute top-0 left-0 w-full h-full bg-no-repeat bg-center bg-cover\"\n              style=\"background-image: url(https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-popcomms-1.jpg)\"\n            ><\/div>\n          <\/div>\n          <div\n            ref=\"downloadForm\"\n            name=\"download_form\"\n            method=\"post\"\n            action=\"\"\n            onsubmit=\"return false\"\n            class=\"download-form w-full relative\"\n          >\n            <transition name=\"fade\">\n              <div\n                v-show=\"step !== 1\"\n                class=\"absolute flex flex-col top-0 left-0 w-full h-full shadow-md bg-pop-black\"\n                style=\"z-index: 1;\"\n              ><\/div>\n            <\/transition>\n            <div ref=\"downloadFormStep1\">\n              <div class=\"md:grid md:grid-cols-2\">\n  <div class=\"hidden md:block relative\" style=\"padding-bottom: 100%;\">\n    <div\n      class=\"absolute top-0 left-0 w-full h-full bg-no-repeat bg-center bg-cover\"\n      style=\"background-image: url(https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-popcomms-1.jpg)\"\n    ><\/div>\n  <\/div>\n  <div class=\"flex flex-col\">\n    <div class=\"h-2\/5 bg-pop-pink text-pop-white p-6 lg:px-8 flex flex-col justify-center\">\n      <h3 class=\"font-semibold text-xl lg:text-2xl\">Download guide<\/h3>\n    <\/div>\n    <div class=\"h-3\/5 flex flex-col justify-between bg-pop-black\" >\n      <div class=\"flex items-center lg:text-lg h-full p-6 lg:px-8 text-pop-white\">\n        Download our guide to creating immersive touchscreen experiences\n      <\/div>\n      <div\n        class=\"flex justify-end cursor-pointer\"\n        @click=\"nextStep()\"\n      >\n        <div class=\"bg-pop-black text-pop-white text-pop-white m-0 px-4 py-2 h-10 leading-0\">\n          Download\n        <\/div>\n        <div class=\"w-10 h-10 p-2 bg-pop-navy\">\n          <svg class=\"w-full absolute left-1\/2 top-1\/2 -translate-y-1\/2 -translate-x-1\/2 transform rotate-90 text-pop-white\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path\n              class=\"fill-current text-pop-pink\"\n              d=\"M13.0607 0.625645C12.4749 0.0398579 11.5251 0.0398579 10.9393 0.625645L1.3934 10.1716C0.807611 10.7574 0.807611 11.7071 1.3934 12.2929C1.97919 12.8787 2.92893 12.8787 3.51472 12.2929L12 3.80762L20.4853 12.2929C21.0711 12.8787 22.0208 12.8787 22.6066 12.2929C23.1924 11.7071 23.1924 10.7574 22.6066 10.1716L13.0607 0.625645ZM13.5 24.3137V1.6863H10.5V24.3137H13.5Z\"\n              fill=\"currentColor\"\n            \/>\n          <\/svg>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep2\"\n              v-show=\"step === 2\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10  text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">1 \/ 3<\/div>\n              <div class=\"w-full md:w-5\/6 form-text leading-tight text-base sm:text-xl md:text-xl\">\n  We just need some details to get you started. Please enter your <span class=\"text-pop-yellow\">first name<\/span> and <span class=\"text-pop-yellow\">surname<\/span>.\n<\/div>\n<div class=\"flex-grow flex flex-col justify-center\">\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"first_name\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"text\"\n        v-model=\"form.firstName.value\"\n        placeholder=\"First name *\"\n        @keyup.prevent=\"validateFirstName\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.firstName.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"last_name\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white pr-12\"\n        type=\"text\"\n        v-model=\"form.lastName.value\"\n        placeholder=\"Surname *\"\n        @keyup.prevent=\"validateLastName\"\n      >\n            <svg @click=\"validateLastName\" class=\"absolute h-8 sm:h-auto top-1\/2 transform -translate-y-1\/2 right-0 cursor-pointer fill-current text-pop-white hover:text-pop-pink transition-colors\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M36.3746 25.0607C36.9604 24.4749 36.9604 23.5251 36.3746 22.9393L26.8287 13.3934C26.2429 12.8076 25.2931 12.8076 24.7073 13.3934C24.1216 13.9792 24.1216 14.9289 24.7073 15.5147L33.1926 24L24.7073 32.4853C24.1216 33.0711 24.1216 34.0208 24.7073 34.6066C25.2931 35.1924 26.2429 35.1924 26.8287 34.6066L36.3746 25.0607ZM12.6865 25.5L35.3139 25.5L35.3139 22.5L12.6865 22.5L12.6865 25.5Z\"\/>\n      <\/svg>\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.lastName.valid)\" style=\"height: 2px;\"\n  ><\/div>\n      <div class=\"hidden sm:block input-guide opacity-0 absolute -bottom-2 right-0 text-sm pt-1 text-right transform translate-y-full text-pop-white\">click or hit enter<\/div>\n  <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep3\"\n              v-show=\"step === 3\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">2 \/ 3<\/div>\n              <div class=\" form-text w-full sm:w-4\/6 leading-tight text-base sm:text-xl md:text-xl\">\n  And now just your <span class=\"text-pop-yellow\">email<\/span> &amp; <span class=\"text-pop-yellow\">company name<\/span>, please.\n<\/div>\n<div class=\"flex-grow flex flex-col justify-center\">\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"email\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"email\"\n        v-model=\"form.email.value\"\n        placeholder=\"Your email *\"\n        @keyup.prevent=\"validateEmail\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.email.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"company\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white pr-12\"\n        type=\"text\"\n        v-model=\"form.company.value\"\n        placeholder=\"Company *\"\n        @keyup.prevent=\"validateCompany\"\n      >\n            <svg @click=\"validateCompany\" class=\"absolute h-8 sm:h-auto top-1\/2 transform -translate-y-1\/2 right-0 cursor-pointer fill-current text-pop-white hover:text-pop-pink transition-colors\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M36.3746 25.0607C36.9604 24.4749 36.9604 23.5251 36.3746 22.9393L26.8287 13.3934C26.2429 12.8076 25.2931 12.8076 24.7073 13.3934C24.1216 13.9792 24.1216 14.9289 24.7073 15.5147L33.1926 24L24.7073 32.4853C24.1216 33.0711 24.1216 34.0208 24.7073 34.6066C25.2931 35.1924 26.2429 35.1924 26.8287 34.6066L36.3746 25.0607ZM12.6865 25.5L35.3139 25.5L35.3139 22.5L12.6865 22.5L12.6865 25.5Z\"\/>\n      <\/svg>\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.company.valid)\" style=\"height: 2px;\"\n  ><\/div>\n      <div class=\"hidden sm:block input-guide opacity-0 absolute -bottom-2 right-0 text-sm pt-1 text-right transform translate-y-full text-pop-white\">click or hit enter<\/div>\n  <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep4\"\n              v-show=\"step === 4\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">3 \/ 3<\/div>\n              <div class=\"w-1\/2 form-text opacity-0 sm:mb-12 leading-tight text-base sm:text-xl md:text-xl\">\n  Brill! Are you a human?\n  Prove it by simply entering the answer to <span class=\"text-pop-yellow\" v-html=\"captcha.a\"><\/span> <span class=\"text-pop-yellow\">+<\/span> <span class=\"text-pop-yellow\" v-html=\"captcha.b\"><\/span>\n<\/div>\n<div class=\"grid grid-cols-2 auto-cols-auto space-x-4 my-4\">\n  <div>\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"captcha\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"text\"\n        v-model=\"form.captcha.value\"\n        placeholder=\"Your answer?\"\n        @keyup.prevent=\"validateCaptcha\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.captcha.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n<\/div>\n<div class=\"form-text flex opacity-0 text-xs\">\n  <div>\n    By submitting this form you agree to POPcomms <a class=\"text-pop-pink underline\" href=\"https:\/\/dev.popcomms.com\/pop\/privacy-policy\" target=\"_blank\">Privacy Policy<\/a>\n  <\/div>\n<\/div>\n<div\n  class=\"absolute bottom-0 right-0 flex justify-center cursor-pointer\"\n  @click=\"submit\"\n>\n  <div class=\"bg-pop-purple text-pop-white m-0 px-4 py-3 h-12 leading-0\">\n    Submit\n  <\/div>\n  <div class=\"w-12 h-12 p-2 bg-white flex items-center justify-center\">\n    <svg class=\"transform rotate-90 text-pop-purple\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <path\n        class=\"fill-current\"\n        d=\"M13.0607 0.625645C12.4749 0.0398579 11.5251 0.0398579 10.9393 0.625645L1.3934 10.1716C0.807611 10.7574 0.807611 11.7071 1.3934 12.2929C1.97919 12.8787 2.92893 12.8787 3.51472 12.2929L12 3.80762L20.4853 12.2929C21.0711 12.8787 22.0208 12.8787 22.6066 12.2929C23.1924 11.7071 23.1924 10.7574 22.6066 10.1716L13.0607 0.625645ZM13.5 24.3137V1.6863H10.5V24.3137H13.5Z\"\n        fill=\"currentColor\"\n      \/>\n    <\/svg>\n  <\/div>\n<\/div>\n<div class=\"hidden sm:block absolute top-0 right-0 w-1\/2 pointer-events-none\">\n  <svg class=\"watching-eye w-full\" preserveAspectRatio=\"xMidYMid meet\"  viewBox=\"0 0 496 369\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n    <rect class=\"lines\" y=\"-123.89\" width=\"496\" height=\"245.916\" fill=\"url(#pattern5)\"\/>\n    <clipPath id=\"irisclipPath5\">\n      <path class=\"eye-mask\" style=\"transform-origin: 50% 32%;\" d=\"M0 122.813C58.13 49.7951 147.621 3.01562 248 3.01562C348.379 3.01562 437.87 49.7951 496 122.813C437.87 195.83 348.379 242.61 248 242.61C147.621 242.61 58.13 195.83 0 122.813Z\" fill=\"black\"\/>\n    <\/clipPath>\n    <rect fill=\"white\" style=\"clip-path: url(#irisclipPath5)\" class=\"lines\" y=\"0\" width=\"496\" height=\"245.916\"\/>\n    <!-- <path style=\"clip-path: url(#irisclipPath5)\" d=\"M0 122.813C58.13 49.7951 147.621 3.01562 248 3.01562C348.379 3.01562 437.87 49.7951 496 122.813C437.87 195.83 348.379 242.61 248 242.61C147.621 242.61 58.13 195.83 0 122.813Z\" fill=\"white\"\/> -->\n    <ellipse class=\"iris\" style=\"clip-path: url(#irisclipPath5)\" cx=\"247.653\" cy=\"121.806\" rx=\"101.771\" ry=\"102.118\" fill=\"#6F62FF\"\/>\n    <ellipse class=\"pupil\" style=\"clip-path: url(#irisclipPath5)\" cx=\"244.924\" cy=\"78.2744\" rx=\"35.4286\" ry=\"35.4286\" fill=\"#F8F7EE\"\/>\n    <defs>\n      <pattern id=\"pattern5\" patternContentUnits=\"objectBoundingBox\" width=\"0.0241935\" height=\"0.0487972\">\n        <use xlink:href=\"#image0\" transform=\"scale(0.00201613 0.00406643)\"\/>\n      <\/pattern>\n      <image id=\"image0\" width=\"12\" height=\"12\" xlink:href=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA8SURBVHgB7dGxDQAgCATAdytjwWqwDzuqaBzg7SggITTHN99AzBC3ODoBo3Ds6uJaOAl+DzS+jf\/gE74Bfmo++ZWcm1wAAAAASUVORK5CYII=\"\/>\n    <\/defs>\n  <\/svg>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep5\"\n              v-show=\"step === 5\"\n              class=\"absolute top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm p-3 sm:p-10\">Complete<\/div>\n              <div class=\"grid md:grid-cols-2\">\n  <div class=\"flex flex-col form-text justify-center text-xl p-6\">\n    <div>\n      Thanks, <span class=\"text-pop-yellow\">all done!<\/span><br>\n      Check your email to find your guide.\n    <\/div>\n  <\/div>\n<\/div>\n\n  <svg class=\"hidden md:block absolute right-0 top-1\/2 transform -translate-y-1\/2\" width=\"408\" height=\"336\" viewBox=\"0 0 408 336\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M83.8623 99.4615C83.8623 80.9476 99.1777 65.9391 118.07 65.9391L542.543 65.9392C561.436 65.9392 576.751 80.9477 576.751 99.4616C576.751 117.975 561.436 132.984 542.543 132.984L118.07 132.984C99.1776 132.984 83.8623 117.975 83.8623 99.4615Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M197.889 166.867C197.889 148.154 213.369 132.984 232.464 132.984L542.175 132.984C561.271 132.984 576.751 148.154 576.751 166.867C576.751 185.58 561.271 200.75 542.175 200.75L232.464 200.75C213.369 200.75 197.889 185.58 197.889 166.867Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M216.28 234.632C216.28 215.92 231.76 200.75 250.856 200.75L542.176 200.75C561.271 200.75 576.751 215.92 576.751 234.633C576.751 253.346 561.271 268.515 542.176 268.515L250.856 268.515C231.76 268.515 216.28 253.345 216.28 234.632Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M233.937 302.038C233.937 283.524 249.252 268.515 268.144 268.515L542.544 268.515C561.436 268.515 576.752 283.524 576.752 302.038C576.752 320.552 561.436 335.56 542.544 335.56L268.144 335.56C249.252 335.56 233.937 320.552 233.937 302.038Z\" fill=\"#6F62FF\"\/>\n    <path class=\"hand\"d=\"M379.105 137.017C379.105 97.7617 411.579 65.9391 451.637 65.9391H487.545C527.603 65.9391 560.077 97.7618 560.077 137.017V264.483C560.077 303.738 527.603 335.56 487.545 335.56H451.637C411.579 335.56 379.105 303.738 379.105 264.482V137.017Z\" fill=\"#6F62FF\"\/>\n    <path class=\"waves opacity-0 origin-center\" d=\"M130.346 184.698C118.12 186.375 105.723 185.501 93.9727 182.131C82.2223 178.761 71.3854 172.974 62.1767 165.149C52.9679 157.325 45.5964 147.641 40.5482 136.738C35.5 125.834 32.8898 113.957 32.8897 101.891C32.8896 89.825 35.4995 77.8432 40.5475 66.736C45.5954 55.6287 52.9667 45.6481 62.1753 37.4524C71.3839 29.2566 82.2207 23.0319 93.971 19.1886C105.721 15.3452 118.118 13.9706 130.345 15.1553L128.988 26.3128C118.367 25.2836 107.598 26.4777 97.3901 29.8165C87.1825 33.1552 77.7686 38.5627 69.769 45.6823C61.7695 52.802 55.366 61.4721 50.9808 71.1211C46.5956 80.77 44.3283 91.1786 44.3285 101.661C44.3286 112.142 46.5961 122.46 50.9815 131.932C55.3668 141.404 61.7705 149.816 69.7702 156.613C77.7699 163.41 87.1839 168.438 97.3915 171.365C107.599 174.292 118.369 175.052 128.99 173.595L130.346 184.698Z\" fill=\"#3A3EAB\"\/>\n    <path class=\"waves opacity-0 origin-center\" d=\"M121.559 160.297C104.817 160.599 88.7233 154.419 76.8186 143.116C64.914 131.814 58.1735 116.315 58.08 100.029C57.9866 83.7426 64.5478 68.0036 76.3203 56.2741C88.0928 44.5445 104.112 37.7853 120.854 37.4833L120.916 48.2672C107.114 48.5161 93.9081 54.0884 84.203 63.758C74.4979 73.4277 69.089 86.4027 69.166 99.8287C69.2431 113.255 74.7998 126.032 84.6138 135.349C94.4279 144.667 107.695 149.762 121.497 149.513L121.559 160.297Z\" fill=\"#3A3EAB\"\/>\n  <\/svg>\n                <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  ","protected":false},"excerpt":{"rendered":"<p>Visual Storytelling in the form of immersive customer experiences for touchscreen experiences, sales enablement tools or interactive presentations is fast becoming a key customer sales strategy &#8211; and it&#8217;s transforming the landscape for brands, marketing and beyond! &#8220;The next competitive battleground for leading-edge companies, whether they sell to consumers or businesses, will be in creating [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":12132,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[23,4],"tags":[22,101,146,308,98,309,110,310,307,86],"class_list":["post-5837","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sales-enablement","category-touchscreens","tag-digital-transformation","tag-experience-economy","tag-gamification","tag-how-to-create-an-interactive-experience","tag-interactive-content","tag-intuitive-customer-experience","tag-narrative-presentation","tag-personalised-content","tag-sales-strategy","tag-visual-storytelling"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts\/5837","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/comments?post=5837"}],"version-history":[{"count":0,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts\/5837\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/media\/12132"}],"wp:attachment":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/media?parent=5837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/categories?post=5837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/tags?post=5837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}