With the rise of travel booking sites like Expedia, Booking.com, etc.—not to mention Airbnb—hotels have seen a decline in direct bookings, their most lucrative type of booking. And they’re desperate to get those numbers back up. Hotel brands are looking to find ways to create more meaningful relationships with their customers and build loyalty. Our strategy for our client centered on serving up inspirational travel content higher up in the engagement funnel with the aim of making them more than just a hotel.

Bookings were up an average of

22%

Mobile Conversion Increased by

300%

Revenue was up an average of

61%

Best Website: Travel

Best Website: Travel & Hospitality

Best Website Features - Copy or Writing

Best Visual Appeal - Experience

Best Website Features - Structure & Navigation

Best Visual Appeal - Aesthetics

Key Final Screens

Research

Much of our research was influenced by a report by Google published outlining trends they were seeing in online travel booking. The report outlined the four steps users typically move through when considering and then deciding to book travel plans

1. Dreaming

2. Planning

3. Booking

4. Experiencing

The report outlines common user behaviors in each of these steps, what their pain points are and what they’re looking for.

When it comes to transacting, users are increasingly booking through sites like Booking.com, Expedia—called Online Travel Agencies or OTAs. And why wouldn’t they? It’s a one stop shop where users can book everything—flights, hotels, rental cars, even activities. Based on this trend as well as what we were reading in Google’s report we realized our client shouldn’t position their brand as just a local hotel chain. They should position themselves as the Hawaiian OTA.

They’re a local brand. Their staff is local. They have real local knowledge. If they can’t own travel in Hawaii, who can? That became our goal for the project, to prove to our client the value of being more than just a hotel chain.

How Micro-Moments Are Reshaping the Travel Customer Journey, July 2016, Google

Discovery

Loaded with ideas based on the Google Micro-Trends travel report and an internal brainstorm session that went late into the night, we went to Hawaii to kick off. Personally, I had three main goals for Discovery:

1. Help sell our main idea of turning their brand into the Hawaiian OTA

2. Build out the website feature set

3. Identify the five customer journeys I’d ultimately create

Feature Set

The feature set ultimately became an atypically useful document. It became the basis of the development contract.

Customer Journeys

I identified five customer journeys to map out.

1. First Time Bookers

2. OTA (Online Travel Agency—Booking.com, Expedia) Booker

3. Group Bookers

4. Brand Loyalist Return Booker

5. Customers Already On Vacation

We used the customer journeys as opportunities to identify:

• How users would move through the experiences we’re imagining

• How we can meet their needs as users:

  1. Dream

  2. Plan

  3. Book

  4. Experience their vacation

• How we might lose them to other players in the space

• How we can minimize that loss

Information Architecture

The structure of the site was relatively simple. The main section of the site was their listing of hotels, each having a dedicated mini-site. Property mini-sites could be found using a parametric property search or via embedded feature modules across the site. Other main sections of the site included destination information pages, inspirational travel content and offers.

I prioritized their properties in the IA with travel content coming in a close second. And we immediately saw positive results. Destination pages garner a lot of organic search traffic with users moving into property mini-sites.

Taxonomy

Personalization was a central feature of the site and the taxonomy would drive that. A taxonomy was also necessary to be able to intelligently drive appropriate related content to newer users as well as power the underlying logic of the personalization widget.

User Flow Diagrams - Booking

As things started to come together but before wireframing it was important to think through a key transactional flow—how the website will pass users into their third party booking engine. We needed to know how it would work when initiated from different places on their site and with different amounts of user data. We also needed to verify the technical feasibility of these flows on the booking engine side. A few quick user flow diagrams modeling these flows helped us get there.

Design

Design (wireframing, to be more specific) was a constant back and forth between visual design, the copywriter, engineering and our strategist—who drafted the strategic brief and established the vision for content and tone of voice. We designed a little over 20 page templates in five sprints. It was incredibly collaborative with just the right amount of cooks in the kitchen.

Sketching

Sketching was often messy, impromptu and always rapid and iterative. I sketched through ideas for wireframes to validate the direction with the team before beginning actual wires. On this project sketching was strictly internal. We didn’t have the time to open up the process too much with the client. Our main goal was getting V1 of the wires in front of the client to start moving through revisions.

Wireframing

Along with the homepage, the first number of templates we designed were focused on inspirational content. We wanted to create a system that would facilitate pathways across and through different content types regardless of where users entered the site to ensure maximum exposure.

Serving up strategically recommended properties on these templates was the true (yet underlying) objective, while providing valuable content. Following completion of these templates we then worked through the necessary hospitality/booking features.

HOME

We led with the guidance widget at the top of the homepage as a way to immediately get users into tailored inspirational content. We wanted to intercept users higher up in the dreaming/planning phases who weren’t sure what they wanted. Users who had already researched inspirational content or were ready to book could find what they were looking for by swiping farther down the homepage.

GUIDANCE WIDGET

Initially we wanted the guidance widget to be easy to get through, engaging and visually immersive using background video and large images. The widget would recommend up to three destinations for a user based on their responses and upon tapping into a destination the user would see a mix of tailored inspirational content along with properties best suited to them.

DESTINATION & ITINERARY

We knew destination pages for each of the locations our client operates in would make for great landing pages to serve up dreaming and planning content alongside properties and brand-specific content. We also knew destination pages would help boost SEO. The itinerary template was one of the most fun templates we worked on. As they are purely inspirational content (with no direct attempts to sell hotel nights), they added authenticity to our client’s content library.

ACTIVITY

Activity pages allowed us to start to get really specific about what to do and where to go. We were also sure to cross link to other related activities as well as destinations to offer a robust browsing experience. Activities also sparked one of the bigger disagreements on the project—whether we can/should feature certain properties over others at times.

PARAMETRIC SEARCH

Parametric search was the primary feature on the site that would level our client up with the OTAs [online travel agencies—Expedia, Booking.com, etc.] Our client managed a little over thirty properties in four different locations so we needed to ensure search would never over-filter results. In addition to creating a usable, intuitive experience, we also wanted to ensure users were always seeing properties even if the properties were booked for their dates or didn’t match their filters.

PROPERTY LANDING

Property landing pages would see a lot of entrances so we wanted them to act like their own little homepage. However, we didn’t want to overplay our hand in terms of inspirational content, so that content played a smaller role on property pages to keep the user focused on the task of finding and booking a room.

BOOKING WIDGET

We knew the “happy path” booking flow involved users searching for and finding a hotel that’s available for their desired nights, navigating to and deciding on the room that matches their budget and then booking their stay. But what other shortcuts could we offer to enable users book with less effort? We knew we wanted to offer booking from the property landing page. Could we offer the ability to book from anywhere on the site? This was our solution.

Visual Design

My role in visual design was pretty standard, work with the visual designers, provide feedback and ensure any changes being made still worked from a usability standpoint while fulfilling the overall strategy of the project. My primary role, however, during visual design was to create prototypes in InVision to fully convey functionalities and user flows.

After the first couple rounds of feedback in sprint 1, we found out the client wasn’t happy with the homepage. So we took it back and the visual designer, Erica Randhawa, and I redesigned a couple modules and she updated the visual design language.

Reimagining the homepage, while time consuming, proved invaluable. So much so that our internal team discussed doing that on every project going forward—create a fully formed idea and then throw it out and start all over.

HOME

The redesigned homepage departed from the wires in that we wanted to create a more immersive, inspiring experience. Previous modules that felt more utilitarian were replaced with modules using larger images, that put a greater focus on inspirational content and offered a more curatorial feel.

DESTINATION

The Destination pages are perhaps the central inspiration pages. These pages act as jumping off points where users can browse dreaming/planning content as well as view hotels.

PROPERTY LANDING

The focus on property landing pages was more transactional, keeping users focused on the task of finding a room and booking.

Personalization Strategy

The client didn’t quite understand how personalization would work on the site or how the software would work. They were looking to us to gain clarity but also establish some ideas for how to best to begin the program.

My starter ideas for personalization took into account potential user behaviors on the site that would somehow indicate user preference or segment, cross referenced with reasonable expectations for the content offering at launch to ensure we could provide an equal experience and content offering regardless of user segment or preferences.

Analytics & Optimizations

Following launch on a monthly basis we’d work with our Director of Analytics—who pulled the numbers, created the charts and tables and analyzed the numbers, to come up with a selection of optimization ideas that we believed would improve their metrics. We’d present what we were seeing in the analytics along with low-fi wireframes representing a potential solution to gauge their interest.

Challenges

• Like most projects the budget was a constraint with real consequences—features were simplified and cut and some facets of the project had to be left in a less than desirable

• Getting inside the client’s head to understand what they’re looking for as well as the specialized knowledge they hold about their business should be the first task on any project. It’s easier with some clients. We struggled at times in this regard and probably made our lives a little more difficult than they needed to be.

• This was the first time we created a large amount of content for a website and while we knew what we needed to end up with, we weren’t entirely sure about how to get there. But we made it work.

Learnings

• Design QA of the final site is incredibly important to ensure the code matches the annotations and functions to the right degree of precision

• Ensuring continued investment in content creation well past launch must be part of the first conversations on the topic—creating a site that heavily features content requires content maintenance and additions

• Creating content for the web and the templates the content lives on is a nuanced process that must involve designers and content creators at a minimum and the content and templates should take shape concurrently

• Swimming in the ocean on the North Shore of Oahu is no joke

Renters Insurance Sign Up Made Easy

A New Customer Journey

A Craigslist for Emerging Markets

Agency UX

The Archive

Home