UX Case Study: Improving hotel booking microcopy

So, picture this: you're about to complete the final step of booking your room on a hotel booking site. Everything is going smoothly, and you are reaching for your bag to fish out your credit card... but instead of a single green 'Pay now' button, you see two green radio buttons: 'Pay now' or 'Pay at the hotel'?

Slightly perplexed, you debate for a few seconds because it isn't very clear how these two options differ. Now, a few seconds of cognitive dissonance may not seem like much, but in the world of UX, a split second of hesitation signals an additional layer of cognition the user is engaging in. Whichever option the customer decides on, it is likely to affect the business financially and in terms of customer experience. Even if a small percentage of users face this dilemma, if you're the world's largest hotel booking site with millions of users, this number ends up being in the thousands.

Customers are not always clear on the distinction between 'Pay now' and 'Pay later'

Problem analysis:

Users unsure whether pay now or pay at the hotel

Inspired by my moment of indecision, I decided to run a mini User-Centered Design Sprint, focusing on UX microcopy on the final payment page.

My task is to help the customer understand the difference between the options: 'Pay now' and 'Pay at the hotel'.

From the business’s perspective, immediate payment is beneficial (better cash flow, less risk of cancellation) compared to getting paid later (increased risk of cancellation, losing business from other customers due to occupancy being ‘at capacity’).

While the business’s goals are important, the copy on the payment stage needs to align with the end user’s needs and goals. From the user’s perspective, paying now involves taking a risk and is less beneficial (if plans change) than paying later (less risky).

Because I am carrying out this mini project in the span of one weekend, I will be following a condensed version of the Design Sprint.

A modified version of a Design Sprint which can be carried out in a weekend

Understanding the user:

What do the users desire and need? Understanding the user’s motivation will help shape the messaging, especially if we want to motivate them to take an action they may view as risky i.e. paying in advance.

Since I embarked on this sprint based on my experience alone, I needed to gather more user data to understand broader user motivations and needs.

A good starting point would be to gather secondary data available from online trend reports and industry surveys. I found some relevant user survey data regarding online hotel booking payments.

One survey suggested that the three most important things for customers booking hotels online are: price, perks and peace of mind. According to the survey, one in five customers is influenced by these three factors. However, some factors hold more weight than others. Such as price.

Since hotels decide on price and perks, the only factor the messaging can communicate to the user is peace of mind. But can peace of mind be a strong enough motivator?

I decided to run a quick mini-survey online to see which of these three factors (price, perks and peace of mind) would rank №1.

So, to realistically simulate our user research study, I have these defined:

A hypothesis: Users value 'peace of mind' equally or more than the 'price' factor when booking a hotel on the hotel booking site.

An audience: Users who book hotels online.

A success metric: A higher % of respondents rank 'peace of mind' above the 'price' factor.

Online survey to gather data on user's expectations when booking a hotel

Since this is a mini sprint The sample size was under five people, but the single most interesting insight gathered from this exercise was that, while 100% responded that they would prefer to pay at the hotel, 75% ranked ‘peace of mind’ higher than ‘price’ as the most important deciding factor to complete their booking.

So, now armed with some data we can draft the messaging. Thus, the payment page microcopy should be around communicating peace of mind.

I decide to go with the main copy and sub-copy format to keep distractions on the payment page to a minimum. So the main copy should always be a direct instruction.

Solution design:

‘Pay now’ copy

I created three versions of the sub-copy to go under ‘Pay now’. The length of the UX microcopy was a consideration. There were a couple of iterations of this messaging that I considered.

Hotel check-ins can take anywhere from five to 15 minutes, and travellers would like this step to be as quick as possible. This wait time would be prolonged if you have to pay at the property. So, I wanted the micro-copy to hit home with the message that paying upfront will mean less waiting, or a quicker hotel check-in experience. The phrases considered were ‘stress-free’ or ‘hassle-free’. But would the word ‘stress’ conjure up negative imagery instead? The only way to answer this question would be to get some user feedback.

'Pay now' subcopy options

Option 1: Guaranteed confirmation, quick hotel check-in

Option 2: Get instant confirmation and stress-free hotel check-in

Option 3: Get instant confirmation, booking support and quick check-in

I created a mockup on Figma of the three options to share and get feedback from some users who have booked hotels online.

‘Pay at the hotel’ copy

I wrote three versions of UX microcopy to go under ‘Pay at the hotel’. My objective with these versions was to communicate the benefits of paying at the hotel, i.e., easy cancellation and easy payment at the hotel, to the user.

Options 1, 2, and 3 are very similar. For Option 4, I wanted to consider users who may prefer paying in cash, as not all users have access to a credit card they can use for foreign transactions.

'Pay at the hotel' sub-copy options

Option 1: Pay nothing upfront, cancel your booking anytime

Option 2: Cancel anytime, a no-commitment reservation

Option 3: Get a no-commitment reservation with easy cancellation

Option 4: Pay by cash or card at the hotel, cancel the booking anytime

User Testing the UX microcopy options:

For ‘Pay now’ copy

The feedback was interesting. While all three options were rated as clear, no single clear winner emerged. One user preferred Option 2, particularly because the term ‘stress-free’ made her instantly connect to the messaging, as she recalled an instance when she had opted to pay at the hotel but during check-in, she was denied as the hotel was overbooked during peak season. Another user preferred Option 1 because it was short and ‘to the point’. There was one vote for Option 3 as it was seen as ‘very comprehensive and clear’.

For 'Pay at the hotel’ copy

Feedback from users in the case of ‘Pay at the hotel’ messaging was somewhat unanimous, though the sample size was less than five. Option 2 was preferred for its brevity.

My final UX microcopy options:

Pay now

Get instant confirmation and stress-free hotel check-in

Pay at the hotel

Cancel anytime, a no-commitment reservation

Current (left) payment page without UX microcopy, and after (right) adding my microcopy

I created a quick mock-up of the page on Figma so that it's easier to visualize the messaging.

Conclusion and my notes on implementations and testing

While my information-gathering survey and UX copy feedback sessions were run through a very small sample size (3 people), with more time and resources ideally a sample size of 5-10 users is preferred.

Once the UX microcopy has been implemented, running a few A/B tests with the sample group would be ideal to measure efficacy. Looking at the percentage increase or decrease in either option compared to pre-implementation data will give the stakeholders a better idea and help streamline the payment page.

What do you think of my modified Design Sprint and my choice of UX micropy? What would you have done differently - let me know in the comments. Thanks for reading!