Exit intent overlay is a module developed to be displayed when the live user signals indicate that they’re about to leave our page. At this point the strategy is to upsell another option: our new flight and hotel package product, which required traffic and therefore exposure from our established flight product.
Depending on which page the user is on, it was possible to determine whether the user was likely interested in travelling to a particular destination or country. I could then ensure that the overlay module displays necessary offers and information corresponding to the page they’re on.
For example, if the user is on a landing page related to flying to Bangkok we would only display flight+hotel offers to Bangkok in the overlay. If the user is on a landing page related to flying to Thailand we would display flight+hotel offers in multiple destinations across Thailand. If the user is on a landing page where neither destination or country is defined, then we will show a selection of popular destinations across the world to invoke inspiration for the user.
Below shows the different URLs of our landing pages where the Exit Intent Overlay would be activated. I clustered the URLs into these 3 different cases depending on whether the user is showing interest in a particular airport, country or these details are undetermined.
The cases are listed on the right side colour coded between green, yellow and blue. The A and B variant in magenta to the right of the cases are the 2 different visual cases necessary to serve each case. The A variant doesn’t require a destination label on each offer.
I started the project by creating a wireframe of a standard lightbox element with a main header (H1) and then a second header (H2) to offer more specific details about the flight+hotel offers shown.
Additionally, I inserted a link at the bottom of the lightbox to offer the user the opportunity to enter into our flight and hotel product to see more offers similar to the 3 already displayed in the lightbox.
The lightbox component defined in our design system in desktop has a fixed width of 600px which offered sufficient space for 3 ‘offer cards’ as shown below in the wireframe.
The wireframe indicates that each card will have 192px width which allows me to begin the process of building the card component.