Improving conversion rates with map based discovery and reduced complexity for travel booking at Marriott.com

Person browsing the Marriot website at a desk on an iMac

Date Completed

February, 2018

Overview

Marriott is the world's leading lodging and contract services company. However, reservation booking and rewards program abandonment rates remain high. Overly crowded pages with poor structure and too many options are not delivering for the companies core brand messages 'Travel Brilliantly' and 'Life is Beautiful.

To increase revenue and improve customer loyalty I developed a revised information architecture supporting users with minimalistic visual navigation and map-based discovery.

I led the entire project and consulted with a network of other UX professionals on questions related to building peak experiences in online travel planning and booking.

Metrics Goals

  1. Increase hotel bookings via digital properties by 10%
  2. Increase reservations for their luxury and lifestyle collection hotel categories
  3. Gain 10,000 incremental members of the Marriott rewards loyalty program
    in the first quarter after the redesign
  4. Decrease by 20% the reservation abandonment rate
  5. Increase by 5% the number of people choosing a hotel and flight package verses just booking their hotel alone
Current Site
Screenshot of the prototype and a closeup
1
2
3
4
5
6

Process

learn

To better understand Marriott as a business and a brand, I started the initiative with domain research and business model analysis.

Business Model Analysis

Marriott is the largest hotel chain globally with over 30 brands, 81 hotels, and $25.1 billion in assets.

Primary model, asset heavy

Marriott has 6,500 properties offering over 1.2 million rooms across the globe. Being the largest ensures it enjoys the full benefits of economies of scale. Operations fall within two primary business models, both of which find profitability from loyalty and repeat business.

Secondary model, loyal buyer

Marriott drives conversions: bookings and stays with strategies and innovation focused on a loyal buyer. A segment of Marriott’s customers will not even consider switching to any other hotel. The company has nurtured one of the most loyal customer bases using various strategies, including one of the most extensive loyalty programs.

Online Survey

Researching Marriott, travel accommodations and booking aggregators provided a good understanding of the different experiences users encounter when booking travel and informed the development of user survey questions.

Survey Questions

I wrote multiple choice survey questions surrounding travel and booking experiences. I wanted to learn...

  1. How people feel about the experience of online travel booking
  2. If they have abandoned booking experiences
  3. If they have been drawn to travel by marketing
  4. If they prefer desktop over mobile for booking travel
  5. If an option for connecting with a travel agent would prevent abandonment
  6. What kind of positive experiences people might share about travel
  7. What are the most sot after improvements in planning to travel
  8. What Marriott can offer business travelers that would drive conversions
  9. What Marriott can offer leisure travelers that would drive conversions
  10. What travelers see as the related jobs to be done
understand

With a better understanding of the company and its customers I planned conducted and documented in person interviews and task-based usability testing of the current site

Interview Questions

  1. I would love to hear any stories you have, positive memories you have, from traveling and hotel, stays in the past.
  2. Tell me about your relationship with getting things done online, with finding, evaluating, and selecting products and solutions?
  3. Have you ever planned the perfect vacation and hotel stay? If so, tell me how you made it all come together. If not, tell me what you think might have helped.
  4. Have you ever given up on finding and choosing hotel accommodations at a hotel website? Tell me how you felt about the situation at the time if you have.
User Interviews

Findings

Three frequent leisure travelers were interviewed in person in their own homes.

  • I worry about getting lost
  • Travel is about sightseeing and making memories
  • I have had problems with unexpected expenses when booking travel online
  • I have never downloaded a hotel app but have downloaded apps like Travelocity
  • I have have had good experiences working with travel agents in the past
  • I plan for travel extensively
  • I like to consider nearby attractions and dining options when selecting a hotel
  • I like to Airbnb. I try to avoid big hotels and tourist destinations when I can
Task Based User Testing
Findings

Three frequent leisure travelers were asked to use the online booking page of Marriott.com to book accommodations.

  • Pricing is displayed in a confusing way
  • Faceted sorts of destination results were overlooked
  • Price based sort was needed but not found
  • A link for google maps was wanted to facilitate quick travel route and duration understanding
  • Map view was used to weigh price options for accommodations near the travel destination
  • Map based user flows were seen as non-working
  • I like to consider nearby attractions and dining options when selecting a hotel
  • I like to Airbnb. I try to avoid big hotels and tourist destinations when I can
Observations

Marriott’s usability problems are in no small measure simply a visual design problem. Destination results pages lack a clear hierarchy of elements with harmonious spacing and alignments. The top of the visual hierarchy may be the black check box for available hotel sorts. The heuristic, "visibility of system status", in this context would make the confirmation that the page is displaying listings for the geographic location entered in the previous step a requirement that is missing. A direct answer for this process tracking question is often provided as a breadcrumb pattern at the top left of the page.

The user is faced with six sections of information above the fold. Combinations of text and icons are used for both interactive and non-interactive elements. Sorts are presented as dropdown menus and buttons in sections marked out by color as navigation and results.

The interface designer seems to have reached a point of frustration and thrown up his hands when placing a large arrow on the page pointing to the filter for brands. As if to say, here is an important function.

Screenshot of marriot.com search results page
define

I planned the analysis phase by establishing relationships between high level questions, rationals and the methods for organizing insights

High Level Question

What aspects of searching and browsing for hotels and rooms are contributing to bounce rates?

Rational

Searching is a fundamental feature of digital tools that often frustrates users. Our goal is to design a solution that is so usable as to be completely forgettable.

Method

Analyze materials gathered from task based usability testing and interviews with categories of basic psychological needs established within self determination theory.

High Level Question

What do travelers report as peak positive and negative moments of planning and engaging in travel?

Rational

As Chip Heath points out in “The Power Of Moments,” there are cognitive features of our experience and memory essential to understand and use when designing the systems and information at work in everyday experiences like booking for travel.

Method

Organize and analyze materials gathered from task based usability testing and interviews for themes based on psychological principles: the peak end rule, and duration neglect.

High Level Question

What are the functional, social and emotional jobs to be done for travelers who are hotel patrons?

Rational

By understanding in detail what that “job” entails, companies are far more likely to create and market solutions that succeed in the marketplace.

Method

Writing job statements for functional, social, and emotional jobs to be done when planning and selecting travel accommodations.

Analysis of user feedback was facilitated by first transcribing, and then deconstructing transcripts and notes from interviews and user testing. To translate these observations into user interface affordances, I organized them in tables by categories from cognitive psychological theory.

an info graphic showing the basis of analysis

With opportunities for peak positive experience identified, I began the same analysis based on the psychological principles of self determination theory

Self determination theory focus on how social and cultural factors facilitate or undermine people’s sense of volition and initiative, in addition to their well-being and the quality of their performance. Conditions supporting users experiences of autonomy, competence, and relatedness are argued to foster the most volitional and high quality forms of motivation and engagement for activities, including enhanced performance, persistence, and creativity. In addition, SDT proposes that the degree to which any of these three psychological needs are unsupported or thwarted within a social context will have a significant impact on wellness in that setting.

Infographic for the self determination theory

Participant #1

Participant #2

Participant #3

With coding completed I collected my observations and sorted them by concepts from both methodologies

Table of finding for power of moments methodology

For the final summarization I identify interview and user test observations by their design discipline

Research findings sorted by design discipline
ideate

To organize the ideation process I began by defining alignments between Marriott's goals and identified opportunities to improve user experience

Marriott Goals

  1. Increase hotel bookings via digital properties by ten percent
  2. Increase reservations for their Luxury and Lifestyle Collection hotel categories
  3. Gain 10,000 incremental members of the Marriott Rewards loyalty program in the first quarter after the redesign
  4. Decrease by 20% the number of people starting and then abandoning a Reservation
  5. Increase by 5% the number of people choosing a hotel and flight package (vs. just booking their hotel alone)

Remove Pits

  • Price and map view were mentioned by several users as problematic. Visual hierarchy and page structure contributed to bounce rates for at least one user.
  • Bring the lifestyle collection up to the landing page, and Integrate a map view surfacing nearby dining and attractions.
  • Reposition rewards program copy above the fold, and message a clear benefit for new subscribers to the rewards program.
  • Improve visual design of search results pages with improved hierarchy and use of whitespace. Price sorts should be easy to see and use. Keep the user oriented by integrating map views with the results page.
  • Populate search results with price sorted flight information. Make adding flights as easy as checking one radio button.

Build peaks

  • Expand functionality to include booking based on surrounding attractions. Produce at a higher level of fidelity that represents the core brand message of positive experience through a combination of decreased page load times, seamless fading transitions between page content, use of whitespace, and video.
  • Implement content strategy for traveler based tours and reviews. Focus on building a sense of relatedness throughout the customer experience as a tourist.
  • Implement content strategy using storytelling to express the value of travel in concrete human terms. Focus on relatedness with stories of accomplishments, friendships and family.
  • Travelers expressed the importance of dining, activities and attractions near their hotel. Do the work of organizing this information and incorporating it in the user flow for selecting a hotel. This information should be organized down to the activities by the dates of their stay.
  • Implement an autocomplete like functionality for the cheapest flight package and package with the travelers preferred airline if logged in.

Visualizing potential solutions began by creating a user flow for booking and a sitemap

The booking user flow is so linear that it lends itself to an onboarding like, constrained step by step solution. Solutions like Typeform came to mind. When considering the workflow in this way it presented the question of weather the booking process should be organized less like an e-commerce experience and more like a series of questions as steps in a process. To look more closely at this I decide to consider contexts of use mentioned by research participants.

Considering contexts of use led to a revised flow map for booking reservations

I have a location already planned for travel and need to find a hotel nearby

This user is well served by the most common solutions for booking. A list view of results with basic information is all that is required to make a selection. Options for more closely looking at nearby dining and attractions are useful but not the focus.

I am more interested in price and or what is nearby my hotel

This user is looking for the lower price or some balance of location and surrounding attractions. The information they need is easier to consider in a map view where distances and attractions are all represented.

I am at my destination and need to find a hotel nearby

This user is looking for an option to browse a map of his current location to find hotels near by. A list view presorted by nearest hotels displayed on the same page as the map would provide the full set of options.

Revised booking user flow

The landing page

  1. Three of Marriott’s five metrics can be improved by limiting the information above the fold to search and rewards program membership.
  2. To improve rewards program conversions, message a clear reason why, and pair it with a learn more modal with details and input fields.
  3. To improve reservation conversions, and reduce bounce rates, support map list and grid views of search results from the form submit button.

Search results

  1. Most user are interested in the lowest prices for rooms. Make price sorts instantly intelligible.
  2. Support the browsing of hotel details and room configuration pricing with visually clear modal style open and close operation.
  3. Drive hotel and flight package bookings by matching the affordances found on travel booking aggregators such as soonest to latest and price sorts.
Hotel details
  1. Allow editing of everything selected in the previous step in this step to prevent backtracking.
  2. Support the users room configuration decisions with a grid of lightbox image cards.
  3. Ensure that payment processing forms support auto-complete card population across browsers.

To organize my decisions and rationales around principles of cognitive design, I referenced the text "Designing With The Mind In Mind"

When people navigate through software or a Website, seeking information or a specific function, they don’t read carefully. They scan screens quickly and superficially for items that seem related to their goal. They don’t simply ignore items unrelated to their goals; they often don’t even notice them. To design for users who will be scanning the page one challenge can be to limit the number of elements on the page, and create a clear hierarchy that takes advantage of how human perception is optimized to perceive structure.

The primary task of users who visit the Marriott site is finding the right hotel and making reservations for their travel. The workflow for this task breaks down into three steps which are commonly represented on three separate pages. Before sketching or prototyping I looked closely at how these pages could be optimized for scanning and intuitive use.

prototype

With the landing page flows and sitemap established I felt ready to jump into prototyping

Map views, browsing and autocomplete

During the prototyping process I found that by adding form options for country and city displayed in a map view, browsing could be supported for all Marriott destinations worldwide. As an asset heavy business working to maximize throughput, this works toward Marriott's goals without adding much in the way of visual complexity. This single addition allows customers to browse the chain of rich media in google maps and imagine and fall in love with the idea of traveling to some far away place they might not have otherwise.

The importance of browsing should not be overlooked. The question companies should always be asking in the age of digital media is, where can I find value in experience with what I can access without having to build it myself. Google maps is one perfect example, and as a company dealing in global destinations, this is low hanging fruit for customer experience.

Screenshot of redesigned reservation search form

Utilizing video for emotional impact

To express the beauty and joy of travel, video that captures the company's core brand message was combined with subtle animation and placed at the beginning and end of the user experience as part of the strategy of building a peak positive experience based on the principle of duration neglect. The booking experience opens with an animated slider of background video transitioning with scaling and fading to express the refined aesthetic Marriott represents. The selection of images is emotional and instantly communicates relatable moments travelers enjoy.

For the final step in the booking process I edited a fast paced series of clips together that captures the excitement and joy of travel. This "big finish" works toward the goal of leaving the user with a several minute long overview of what an exciting, beautiful and comfortable experience they can look forward to when they reach their destination.

Using interactivity for visual navigation

Visual navigation works to make the gulfs of execution users commonly face from page to page more intuitive. Using a design familiar to users of mobile apps goes one step further than breadcrumbs at the top left of a page by communicating where the user is in the process of booking visually through the animation of those steps. Studies have shown that tool-like interactivity can support the users sense of competence in ways that contribute to an overall positive experience.

This solution moves the user through the process with zero page load delay and half second animations from page to page. The process of booking is made into a clear progression while allowing for errors and moving back a step. Editing choices made in a previous step are intuitive. Simply close the current panel, make changes and continue th process without using the browser back function.

The landing page of the Marriott prototype

Reflections & takeaways

This initiative’s goals are among the most common for digital properties, and the user centered process worked out several opportunities to improve customer experience. Implementing affordances for browsing opened up the experience for map based exploration in ways that are consistent with the joy of travel. A mobile pattern based solution for booking free from page load delays works together with animation and video to express a higher fidelity digital property.

Feedback from user interviews generated more potential directions for building peak positive experience through content strategy than reducing negative experiences in usability. To meet the target goals for Marriott of improving conversion rates for booking, luxury and lifestyle collections, and rewards program memberships, producing original content may be key to success.