InPage 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 - 2020. 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 team.
Research
Early on in this project, I learnt that Google had started penalising mobile websites with pop-up and overlays, ranking them less highly in search results as they provide visitors with a poor experience. In the interest of our clients, this meant that simply enabling our current suite of messages (which were all overlays) on mobile could not be considered as a viable solution. Instead, a new message format would be required, one that would be completely embedded onto the hotel website and so my research centered around what we termed as InPage Messages.
To help gather more insight on this feature proposition, I designed a Highlight Card that was placed at the top of the Message Manager (An interface within the Targeted Messages part of the platform showing performance metrics related to published messages, separate by message type) to maximise its visibility. When clicked, clients were directed to a Google Forms survey to complete. The aims of this survey were to engage further demand, understand what content clients would want to communicate in this format and get feedback on the potential placement of the messages.
Highlight card that was placed at the top of the Message Manager
.png)
Early feedback from the survey showed that clients were interested in displaying messages communicating direct booking benefits, general discounts & promotions and mobile specific discounts & promotions on their mobile site:
Early feedback result from the survey
This pattern remained the same once I analysed the results of 50 respondents.
Early feedback also showed that clients preferred these messages to appear in different places throughout their mobile site - Underneath or above existing content:
Early feedback result from the survey
On analysing the final results, this pattern had changed as the majority of clients actually preferred having the message at the top of the site.
I arranged calls with 5 of the clients that had completed the survey to acquire further insight into their answers and find out more about the problem in general. My main takeaways from the calls were:
-
A massive, current pain point for clients that were integrated with a Synxis or iHotelier booking engine (which was the vast majority of our clients) was that they discontinued their capability to offer mobile-only promotions and rates in their updated versions, hampering the chances of our clients converting mobile visitors.
-
There was a collective desire to increase traffic and subsequently conversion on their mobile sites.
-
They believed that having the the InPage message at the bottom of the page could block important CTA (Call-to-action) buttons e.g Book Now.
I also analysed other products that had a similar offering (including competitors) in which the insights gathered helped this build:
-
The entire surface area of the InPage message should be clickable as it's appearing on a smaller screen.
-
On clicking the message, new content either appears in a new tab or dynamically changes the content of the same webpage.
-
Visitors shouldn’t be able to close or dismiss these messages unless it's discussing privacy policies and terms & conditions.
-
Where applicable, the content of the InPage message on mobile should be the same as the InPage message on desktop.
InPage messages mood board (Messages highlighted in green)
Through our internal tracking methods, I observed that the APAC region registered the highest percentage of mobile sessions (61%) over the first 6 months of 2019 which was, on average, 20% more than any other region. Within the same period, APAC also registered the highest percentage of conversions on a mobile device (26%) compared to EMEA (20%) and NORAM (15%).
Secondary research also showed that almost 70% of APAC travellers visit travel websites via mobile or tablet and most of their bookings are done through OTAs and in-app. To the detriment of our clients, 90% of APAC online travel bookings are made via OTAs, in which 88% are done on mobile. The OTAs had already been dominating this space and so devising a solution that empowers our clients to compete with them on mobile was clearly going to be highly impactful and enhance the value that we provide to our clients.
Establishing Requirements & Scope
One of the questions asked in the survey was whether hoteliers would be interested in trialling out this new feature. The purpose of providing hoteliers with early access to this feature was to gauge an understanding of how it would perform once live. For those interested, a beta version would be implemented on their mobile site. I worked closely with the Product Manager to define the requirements of this beta version:
-
A banner displayed at the top of the landing page communicating similar content to their best performing Nudge message (A subtle, small message type available to clients that “nudged” visitors to the booking engine).
-
This banner would have the same targeting conditions set on that respective Nudge message.
-
The hotelier’s brand.
-
No self-serve elements in the platform as we would manually design and set up these messages on the behalf of clients.
-
No performance reporting in the platform Message Manager but we would provide ad hoc performance reporting to clients.
The success criteria for this stage would be positive client feedback & performance data (Click-through and conversion rates).
Beta Version Design
For the trial, I decided to create one banner InPage message per client and have this at the top of the initial landing page to maximise its visibility. This will take up the full width of the mobile interface without a fixed height. This ensured that it would be flexible enough to communicate messages of varying character lengths and be clickable with a thumb to avoid “Fat Finger” problems. The content of the message would be that of their current best performing Nudge message, under the assumption that their best performing Nudge message on desktop would perform well in this InPage format on mobile. The entire surface area of the banner is clickable and once clicked, would redirect visitors to the same link in which that respective Nudge message redirects users to on desktop, which was invariably the hotel’s booking engine. The message is also non-dismissible in line with common InPage message best practice. To limit scope for this version, I didn’t design for any animations to be included, instead the banner would simply appear on the page at the same time as the rest of the content.
Above or Below the Navigation?
The differences between hotel sites meant that adopting a generic process to place these messages onto the mobile sites required some thought. Placing the InPage message below the navigation surfaced a potential risk of the message covering the client’s mobile site header if it was using a fixed CSS position, or vice-versa if the client had a sticky navigation. Placing the InPage message above the navigation proved less risky, especially if the client has a sticky navigation, so we pivoted in this direction.
InPage messages below header (Left) and above header (Right)
Branding
Using a key learning from the Branding project, I decided that the styling of the InPage messages should match that of the hotel’s brand so it would seamlessly fit on the webpage, increasing trust with visitors and increasing the likelihood of them booking directly on mobile. For legibility purposes on mobile, I also increased the font size of the text to 16px and the line height compared to what was on the Nudge message displaying on desktop.
InPage messages using the client's brand
Mobile First
I adopted a mobile first approach when designing these messages, ensuring that the attention of visitors would be focused on the essential information needed to convert them. The message would therefore definitely include the body text & a tertiary CTA link to inform visitors that the message is clickable and will help provide clear attribution - The title would only be added if necessary. For legibility purposes, I also ensured that there was no more than 40 characters per line. Including images at this stage was not vital given recent research we did which concluded that adding images in our messages had a negligible impact on performance.
InPage message adopting a mobile first approach
Trial & Impact
We were able to get one client live with a beta version and, after a month, the message produced some impressive results:
Trial: Beta version of an InPage message on a client's mobile site
InPage Price Check
Whilst the trial was ongoing, my product team and I received a client request to develop & implement an InPage version of the Price Check message. Key stakeholders in the business approved this request due to the client’s ACV (Annual Contract Value), and so this gave me the opportunity to start designing an InPage Price Check message, an iteration which we had originally planned for a later date.
Here is what the Price Check message had already looked like as an overlay on mobile:
Price Check as an overlay collapsed (Left) & expanded (Right)
To devise a quick, bespoke solution for mobile that comprised of a small enough scope to build within a pre-determined deadline, I had to consider a few things:
Content
The content on the InPage Price Check message will remain the same as on the overlay version excluding the visitor’s search criteria, the banner section above the OTA prices to communicate member rates & the ability to see more information after clicking Verified by Triptease.
Collapsed & Expanded Views
The overlay Price Check appears collapsed once loaded. I decided to stick with this pattern for the InPage message so it wouldn’t feel intrusive on an interface that is already limited on mobile. However, I improved it a bit further by adding one OTA price and changing the headline to “View full price comparison & benefits” to entice visitors more into viewing the price comparison. Visitors can expand the message by tapping on it anywhere to show the full price comparison, direct booking benefits (provided by the client) and the Verified by Triptease text. The headline of the expanded message changes to “You’ve found the best price” to reflect the result of the full price comparison.
UI
I included the brand colours as provided by the client and this was hard-coded by the Engineers. I also slightly adapted the font hierarchy of the OTA currencies and prices by reducing the font size of the currency which, in turn, would add more prominence to the prices. I didn’t include the client’s font as the capability to do this for the message type as an overlay wasn’t already available and so this would have been a new feature that would have increased scope and wasn’t vital for this work.
Bespoke InPage Price Check collapsed (Left) & expanded (Right)
Reflection
Due to new business challenges, setting up more clients with the beta version of InPage messages and exploring a self-serve flow in the platform enabling clients to create these messages themselves was deprioritised and not picked up again whilst I was at Triptease. Nevertheless, I still enjoyed the research phase of this project and leading the design of a feature that was forecasted to have a significant impact for our clients. Providing one interested client with early access to this feature and observing the positive metrics instilled confidence within my product team and I that this would have the aforementioned effect. The product design and technical build lead time required to implement an InPage message on a client’s mobile site was short therefore it wasn’t an expensive trial to set up.
Given the ubiquitous nature of mobile bookings taking place in the APAC region, attempting to solve this problem especially allowed me to strengthen working relationships with my colleagues based in the Singapore office, and learn more about our clients in this region developing greater empathy towards them in the process. This project was also a great opportunity for me to refamiliarise myself with the design considerations when designing for mobile and I look forward to developing my skill set here further in relevant, future projects.