Adobe & Decibel Analytics

Development & User Experience 

ToolsJavascript, Jquery, JSON, Adobe Analytics, Decibel Analytics

Methods: UX engineering, User Testing, Analytics, User Flow, Heatmaps

Team Size: 4 members

Duration: 3 months

Location: Aspire systems (Client - Direct Line Group, London) 

Direct Line Group is an insurance company based in London for whom I worked along with a digital team. We worked on understanding the entire user journey of their core service product which offered insurance to various target corporate customers. The main focus of this project was to apply adobe analytics and decibel analytics to better understand the user journey and user experience of the product. Deploying such mechanisms gave deep insights into the customer flow, starting from adding cover options to payment and checkout. We as a team, comprised of mixed professionals, which included a UX Researcher, Market analyst, Software Analyst, and an Implementation expert, implementing website analytics.

Our goal was not only to understand details from the data collection but also to understand the behavior of the user and to look at the pain points experienced on the platform.

Digital Experience Intelligence
  • The Digital Experience Score (DXS) is the first ever all-encompassing metric for measuring customer experience online. It provides objective measurement of customer experiences across websites, web applications, and native apps.

  • With Decibel's proprietary algorithms we could process hundreds of interaction metrics to measure experience online and automatically calculate a holistic experience score for every visit across websites and apps.

  • We were able to capture every moment of interaction within a session – from mouse movements, hovers, and touches, to scrolling, device rotations and pinches – associating all qualitative user activity between the clicks with the underlying context of the page.

  • The behavioral data is processed into smart experience metrics based on categories including distance, velocity, mouse movements, focus, and hesitation – revealing the digital body language of every single user.

  • The enriched data feeds on behavior detection algorithms, which automatically alert teams to specific user behaviors that in turn indicate the visitor’s state of mind – frustration, engagement, or confusion – as well as the website or app’s usability.

  • This intelligence forms the basis of the score for each pillar of digital experience – Frustration, Engagement, Navigation, Technical, and Form Experience.

  • Fed by each pillar of digital experience, the Digital Experience Score is the benchmark for measuring the quality of experiences on a website or app which is segmented across an entire audience base.

Code Summary
  • Initially, a JSON data layer is built to hold all the key that has the ability to store the values in them.

  • Values are pulled from the UI elements by the help of Javascript and Jquery.

  • The user selected UI elements are pushed to the JSON data layer as values which are further mapped to the dashboard by a cookie. 

  • The above view highlights the UI elements being pushed to the JSON data layer.

  • Further, each push being made to the data layer is achieved with the help of triggering mechanisms such as button clicks.

  • By applying local storage approach we get the browser to store and retrieve values to the data layer from each page before continuing to the next few pages.

Flow Path
  • Knowing how customers move through your site or app — which pages they visit, how they got there, where they went, and where they left — is critical to crafting meaningful customer journeys.

  • With Adobe Analytics, we got a robust flow and fallout analysis. This allowed us to dynamically see customer paths and understand where there may be barriers and opportunities to improve customer’s experience.

  • The multi-dimensional fallout report helped us to Identify where customers go immediately after leaving the website or app.

Graph Visualization
  • The graph generated from the data collection produces a visual outlook of the action performed resulting in the customer orders.

  • The dashboard manifests the dimensions, segments and metrics which gives detailed page views, unique visitors, active users, customer orders, platforms from which the site is accessed and much more.


A heat map is a method of analysis, which when used within UX design, it tracks a user’s mouse pointer on the screen. The data is presented using colors so that the data is easily understood. The idea behind a heat map is to track where users are spending time on any given page. They’re a quick way to visualize data.

Areas of UI design can where heat maps helped us

  • Navigation

  • Layout

  • Content

  • Buttons

  • Images

Heat maps generated told us a lot about how people behave. When we know how our users behave, we could design in a way that could drive up conversions. Let’s look at the example below:

In this landing page heat map, we can see that the users are reading the text which is a good sign. They’re also lingering around the contact number and cover options on the right side of the website.

However, this page can do with some improvements and the heat map tells us where.

For example, there is a lot of red around the questions in the business premises as well as the two circles, one which highlights the address entered and another which highlights on the radio button selections but none around the help button, where we’d expect there to be a lot of red.

Thus understanding heatmaps and user flow, helped us see that the help action needs to be improved or moved around to better accommodate where people are clicking. Hence, these were one of the several improvements that were possible with the aid of analytics.