My Role
UX Design Engineer, Developer, User Journey, Site Navigation, Heatmaps, Analytics
Tools
Javascript, Jquery, JSON, Adobe Analytics, Decibel Analytics, Temenos Edge UX platform
Duration
4 months
Team Size
4 members
Company/Client
Aspire Systems/Direct Line Group
Location - Onsite
London, United Kingdom
Year
2018
Overview
Integrating an analytics solution to better understand the user journey across the Web.
Here I was a UX Design Engineer in a team of 4 people
(1 Primary Manager, 1 Backend Developer, 1 Front-end Developer, and myself -- UX Design Engineer).
My main responsibility was to work on Javascript to integrate Adobe Analytics and Decibel Analytics and making sure that the data from the user end would populate on the Analytics dashboard to track user journey and generate heatmaps.
This project is protected by NDA. Hence, I can showcase limited information publicly.
Impact
500K businesses
Direct Line Insurance Group plc is an insurance company based in the United Kingdom, formed in 2012 by the divestment of The Royal Bank of Scotland Group's (RBS) insurance division, through an initial public offering. The company owns a number of insurance subsidiaries, providing various insurance products, including Direct Line and Churchill, as well as the roadside assistance and vehicle recovery provider Green Flag. Here, I worked on the Direct Line product.
Product Highlight
This video gives you an overview of the product that I enjoyed working and showcases my work.
9/10
Customers said claiming with Direct Line was easy *
1
Claim requested every minute *
* As of FY 2019 UK
Analytics Platforms
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.
Digital Experience Intelligence
The Digital Experience Score (DXS) is the first-ever all-encompassing metric for measuring customer experience online. It provides an objective measurement of customer experiences across websites, web applications, and native apps.
With Decibel's libraries, I could process hundreds of interaction metrics to measure experience online and automatically calculate a holistic experience score for every visit across websites and apps.
Digital Experience Intelligence
I was 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 web-app usability.
Digital Experience Intelligence Layers
Code Summary
Data Layer
Initially, I built a JSON data layer to hold all keys that have the ability to collect values in them. Values are then captured from the UI DOM elements with the help of Javascript and Jquery.
The user-selected UI elements are pushed to the JSON data layer as values that are further mapped to the dashboard through cookies.
Desktop -- Direct Line Insurance Consumer Page application. Running the code snippet to track the user journey.
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 the local storage approach I was able to make the browser to store and retrieve values to the data layer from each page before continuing to the next few pages.
Desktop -- Direct Line Insurance Checkout page. Running the code snippet to track the user journey.
Desktop -- Direct Line Insurance Insurance Policy page. Running the code snippet to track the user journey.
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, I was able to get a robust flow and fallout analysis. This allowed me to dynamically see customer paths and understand where there may be barriers and opportunities to improve the customer’s experience.
The multi-dimensional fallout report helped us to Identify where customers go immediately after leaving the website or app.
Sample image of how the site user flow looked like. For NDA reasons I am not allowed to display the actual user flow publicly.
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 give detailed page views, unique visitors, active users, customer orders, platforms from which the site is accessed, and much more.
Sample image of how the generated graph looked like. For NDA reasons I am not allowed to display the actual data publicly.
Heatmaps
A heat map is a method of analysis, which we used within the website, we were able to generate the moment of the user’s mouse pointer on the screen during our usability tests. The idea behind generating a heat map was to track where users were spending time on a given page.
Areas of UI design where generated heat maps helped us -- Navigation, Layout, Content, Buttons, and Images.
The only possible heatmap I was allowed to showcase on my portfolio.
Just to give you some context, here's one of the many findings that we observed. For instance, 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.
The only possible heatmap I was allowed to showcase on my portfolio.
Looking at another unique instance, we observed that there is a lot of red patch 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 patches.
With these insights, we were able to forward the usage of the consumer to the marketing and management team to further assess the metrics.
Previous Project
Next Project
