Email Capture Messages
Company
Triptease - A global SaaS startup building software for the hotel industry empowering their clients (Hoteliers) to increase revenue, drive more direct bookings and compete against OTAs (Online Travel Agencies).
Year & Role
2019. Product Designer (UX/UI) covering the full end-to-end design process.
Team
Product Designer, Product Manager, 4 Software Engineers. Also working closely with the Customer Success & Product Marketing teams.
Research
Working closely with the Customer Success team, I set up calls with hoteliers that had upvoted this feature on Canny and learnt the following things:
-
Hoteliers are currently collecting email addresses via newsletter sign up forms located on specific parts of their website.
-
Collected email addresses through sign up forms are placed in a spreadsheet where they are then taken and put in their CRM (Customer Relationship Management) systems by relevant colleagues.
-
Hoteliers want to be able to send more targeted emails, target visitors by specific check-in dates and send them relevant discounts & member rates to help build a membership pipeline.
-
Hoteliers would want this message to fire on entry if possible.
-
Regarding the design of these messages, hoteliers preferred a large modal with a lightbox which, when displayed to visitors, would prevent visitors from interacting with the background content until they submitted their email address or closed the modal.
-
Surprisingly, hoteliers were not aware of the General Data Protection Regulation (GDPR) - A legislation designed to align data protection rules across Europe and fit today’s digital world meaning business have to be much clearer about what data they collect and why - and its implications.
Analysing other products that also offered Email Capture messages (including competitors) and the behaviour of these messages live in the wild led me to acquire the following insights:
-
These messages were either triggered by a website visitor scrolling a certain length of the page, as a visitor lands on a page, as a visitor is about to exit the page or after a timed period.
-
Their uses include offering discounts and promotions, growing mailing subscribers lists & saving price comparison searches.
-
These messages can be created by adding input fields (and indicating which ones are compulsory) whilst building messages.
-
These messages are invariably large modals with lightboxes.
-
Due to GDPR, consent for joining a mailing list should be compulsory, but asking for this consent isn’t obligatory to publish this type of message.
.png)
Email Capture mood board
Establishing Requirements & Scope
The Product Manager and I worked closely to define the requirements for the first version of this release. The key requirements to form the initial scope were:
-
A self-serve flow in the platform allowing hoteliers to configure an Email Capture message.
-
Ensure that we, as Triptease, and our clients remain GDPR compliant with this message.
-
Be able to store message data (Email address, date, time, message it was captured from).
-
A way to surface the collected email address to the client.
-
Be able to display performance metrics for this message on the Message Manager (An interface within the Targeted Messages part of the platform showing performance metrics related to published messages, separated by message type).
-
Be available on desktop only.
We intentionally wanted to scope this first version out small so we could ship it quickly and learn faster about it once it was out in the wild. This approach would also allow us to prioritise future iterations effectively.
Ideal User Flow?
As mentioned in the research I did, I came across products in which users can simply add an email input field onto a message and thus, create an Email Capture message. I also saw products that offered email capture messages as a separate message type on its own. These solutions were possible to build within the Message Builder (A message creation flow where users can configure the behaviour, audience and design of a message) part of the Triptease platform, guiding the user down one of two user flows in which the main difference has been highlighted in green:
-
Going through the Message Builder and adding an email input field onto a message type:
-
Selecting Email Capture as its own message type through the Message Builder and publish the message:
When discussing these flows with my team, I proposed that we proceed with the second one because:
-
The purpose of an Email Capture message is solely to collect email addresses, therefore it should be decoupled from our other message types which serve different purposes.
-
Email Capture messages were going to have unique metrics and so it needed to have its own section in the Message Manager for it to be prominent and users to intuitively identify them.
-
It would allow for greater flexibility to add irremovable controls that are specific to the purpose of this message.
My product team and I became aligned on this and no technical problems were anticipated with this flow.
On Entry, On Exit, Timed or Scroll Length?
Thinking about the experience of visitors but also the needs of hoteliers, I decided that hoteliers could configure this message to appear on entry or timed to immediately capture the attention of visitors and anticipate them reading the contents on the page respectively. This also helped to keep the scope small by limiting the triggers of this message to that configured by the hotelier only instead of including that done by a visitor too.
Size & Position
Having decided that this message should be its own message type and could appear on entry or timed, I decided that this message should not be a large modal with a lightbox to limit its intrusiveness. I assumed an Email Capture message designed like that firing on entry would frustrate visitors, and so I put together a quick prototype to test that assumption. On testing, 6 out of 6 participants did not enter their email address and when I probed why, the common answer was that it felt premature to ask for such information whilst they were still in the research phase of the customer booking journey. Instead, I decided that this message should be a minimal intrusive nonmodal overlay without a lightbox appearing in the lower left corner of the screen. This takes up a small amount of screen space and the user can still interact with the webpage without the message being dismissed.
Self-Serve Platform Flow
Working from an existing Message Builder framework in which clients were already used to when creating messages in the platform, I adapted it for this message type in a few ways.
I designed a new message type card for Email Capture in which users will have to click to enter the Message Builder. I also added a Learn More tertiary link which redirects users to a FAQ about the feature, in which I worked closely with the Product Marketing team to put together.
Email Capture message type card (Highlighted in green)
I added an input field on the Behaviour tab in which users will have to enter an email address for the collected email addresses will be sent to. On initial testing, the input field header and description read “Target Email Address - What email addresses should the collected email addresses be sent to” but this confused participants and so was changed to “Enter an email address - This is where we’ll send the details every time you capture a customer email address”.
.png)
Email address input field on the Behaviour tab (Highlighted in green)
When a visitor’s email address is collected, we send the following email to the email address entered in the input field through our email marketing provider, MailChimp:
Email sent to client with submitted email address
No changes were made to the contents of the Audience tab where clients can add specific targeting conditions to their messages.
Audience tab within the Message Builder
GDPR Challenge
Within the context of this feature, our clients are the data controllers as they are determining the purposes and means of processing the email address collected, whilst we as Triptease are the data processors as we’re responsible for processing and storing the email address on behalf of the client. We took the following steps to ensure that the client and ourselves will be GDPR compliant:
-
Collaboratively worked with relevant stakeholders within the business to update our privacy policy and contractual agreements communicating that we are storing the email addresses collected from this message.
-
Formulate a piece of text conveying this update and asking existing clients to update their own privacy policy regarding the data Triptease collects as a third party on their website.
-
Designed for a compulsory, irremovable email consent checkbox to be included in the Design tab of the Message Builder which encourages clients to include a link to their privacy policy or terms & conditions.
Email consent section with preview on the design tab (Left, highlighted in green) and tooltip explaining what this section is for (Right, highlighted in green)
Performance Metrics on the Message Manager
Granted that Email Capture was going to be its own message type and so be distinguished clearly in the Message Manager, I added 2 key metrics that would determine the success of these messages. Firstly, I added an Emails Collected column displaying the number of emails collected. The percentage here is in proportion to the Impressions, which is the number of times the message was shown to visitors.
Emails collected column on the Message Manager (Highlighted in green)
I also added a Conversions column displaying the number and percentage of unique bookings that happen on the direct website within 24 hours of a visitor submitting their email address. I had tested this title against “Direct bookers” - On testing, “Conversions” resonated with clients more as it is part of the terminology they use on a daily basis, and the fact that multiple conversions can be attributed to one direct booker. The percentage here is in proportion to the emails collected and the Revenue column shows the amount of revenue attributed to conversions related to that message.
Conversions column on the Message Manager (Highlighted in green)
Visitor Interactions
The video below takes a closer look at a visitor’s interaction with the email capture message on our test hotel website. I designed a confirmation message to appear for 5 seconds (before it dismisses itself) once a visitor ticks the checkbox, enters a valid email address and successfully submits it for reassurance purposes.
Video showing a visitor's interaction with an Email Capture message
Version 2.0
We iterated on this feature a month after releasing the first version, giving hoteliers the ability to download the emails collected from the Message Manager as a CSV file in order to speed up their workflow. At the time, my product team and I decided that this would be the next most impactful iteration based on recent client feedback, assessing the range of possible iterations on an Impact/Effort graph and time constraints.
I added a download icon on the message row which, on hover, triggers a tooltip to appear confirming that a user can download emails from that specific message. I believed the tooltip was crucial because, without it, hoteliers would not be clear on what they are downloading:
Download emails icon with tooltip on the Message Manager (Highlighted in green)
The CSV file contains the email addresses of visitors, the dates and times they were received (UTC time zone) and the URL of the website page that the email addresses were collected on.
Concurrently, the ability to receive an email every time a visitor’s email address is collected was made optional. I added a checkbox that hoteliers would have to tick to show the email address input field:
Email collections notifications checkbox (Left, highlighted in green) and the input field appearing when this is ticked (Right, highlighted in green)
Solution
Here’s a video of the high-fidelity prototyped solution showing a user creating an Email Capture message and choosing to receive notifications when an email address has been submitted:
High-fidelity prototyped solution (Created in Figma)
Impact
As of April 2020:
.png)
Reflection
In order to solve this problem, I had to take the experience of our clients and visitors to their hotel website into consideration throughout the product development process. My knowledge of the main aspects of the two different archetypes informed the design decisions I made - I knew that clients would not create these messages if it required a convoluted set-up process, and that visitors were unlikely to submit their email addresses when prompted by disruptive modals. It was interesting to understand the implications of GDPR for us and our clients, and also served as a reminder about how important it is to be able to adapt to new regulations created by powerful organisations beyond your employer.
I believe the solution was successful as the outcome - An average conversion rate of 4% - exceeded our initial expectations, especially when the hotel industry average for this message type is between 1-2%. Maintaining a small scope for the first version of this release allowed us to focus on building, shipping and gathering feedback on the main job to be done by the client, which was to create Email Capture messages, and see if there would be any technical difficulties sending the collected visitor emails to them. This short feedback loop allowed us to learn that there weren’t any major UX issues with the self-serve flow, no issues with clients receiving the collected emails and helped us prioritise downloading the emails collected per message in the next iteration. This feature also benefited the business as the Sales team were able to increase their win rate percentage, especially when going head-to-head against our competitors.