Overview

How can Expedia help travelers with different needs and interests find the right hotel? Themes.

Themes are a classification system based on location and/or amenities (e.g. family, beach, or business) which helps travelers find the right hotel for them. For example, a family hotel will have amenities like playgrounds, childcare, or cribs. Themes had existed on Expedia for a few years, with one big problem we wanted to solve.

Themes on Expedia

Themes on Expedia

Problem statement

Hotels couldn’t set themes

While themes had existed for a few years, only a few hotels actually had them assigned. A roadblock was that only Expedia support could add themes. Oftentimes, themes were assigned without the hotel’s knowledge which led us to question their accuracy.

Hotels manage their listing through the Expedia Partner Central (EPC) portal. In most cases, hotels weren’t even aware that themes existed. Our hypothesis was if we enabled hotels to set their own themes, we would increase the accuracy and usage of the feature. This would help both travelers searching for hotels and hotels trying to attract travelers. 

Users and audience

Theme selection needed to work for new and existing hotels

There were two key users we needed to introduce the theme selection feature; hotels that are signing up with Expedia for the first time (onboarding), and hotels that already worked with us (EPC users). 

Role and responsibilities

My role: primary UX and UI designer

I worked with the content strategist, product manager, UX designer and a team of engineers. I led the project’s UX, including clarifying the business requirements, creating wireframes, user flows, visual designs and icons.

Scope and constraints

Fitting themes into the existing onboarding and amenity pages

Going into the project, we had several constraints: 

  • Don’t add unnecessary friction to onboarding

  • Fit in with the existing amenity settings in EPC 

  • Prevent hotels from selecting themes that don’t apply to them. We had existing guidelines about what amenities a hotel needs to qualify for a theme. The guidelines also set a maximum of 3 themes per hotel. 

  • Work on any screen size. EPC has a growing number of mobile users that need to be able to use this feature.

  • Meet WCAG accessibility guidelines   

  • Use the existing list of themes

  • Zero budget for user testing 

Process

Design explorations

There were open questions I had starting this project:

  1. How can themes fit in with the current flow? 

  2. What pattern would work best?

  3. What do we call ‘themes’ and how can we explain their value to hotels?

  4. For hotels that previously had themes assigned by Expedia support, how do we explain why? 

  5. How can we validate that a theme is appropriate for a hotel?

The first step I took was to explore a few ideas with wireframes.

Round one: wireframes

With these rough wireframes, I wanted to see how a list of checkboxes and a list of pills would look. I was also exploring the idea of showing hotels what the top themes in their area are. 

Onboarding wireframe using the pills pattern

Onboarding wireframe using a list of checkboxes pattern

Onboarding wireframe using a list of checkboxes pattern

Themes in Partner Central using pills. For existing hotels, I looked at the cases where the maximum themes were already selected and the case where none were selected. I also included a sidebar with stats explaining why it’s a good idea to select themes.

The feedback I got from the stakeholders highlighted a few problems. 

  • One early idea was to include popularity data telling hotel users how often the themes are used by other hotels in their area. There was a business concern that this would tempt hotels to select the most popular themes instead of the themes that most accurately fit their hotel so we scrapped that idea. 

  • Through these explorations, I realized there was a chicken-and-egg problem. Should themes be selected first, and that determines which amenities we ask users for? That was the assumption so far, but another possibility would be to select amenities first, which would allow us to suggest the most relevant themes for the user to select? I continued to explore the flows for both options.

Round two designs: focusing on placement in onboarding

  • I focussed on onboarding first since it has the most constraints.

  • Trying different placements in onboarding

    • A step before amenities

    • The same step as amenities

    • A step after amenities

    • Not visible at all (automated behind the scenes)

  • Adding an icon grid pattern

  • Moved to a higher fidelity

By placing them before amenities, the theme selection can affect what questions appear on that step. The grid of icons adds visual interest that was missing before.

Since there is a close relationship between amenities and themes, I explored including them on the same page.

Another approach could be to select amenities first. By knowing the hotel’s amenities and location the themes could be automatically selected in the next step.

If we had a smarter way to know which amenity questions are relevant to a hotel, we might not need to specifically ask them for a theme. It could be set automatically.

After another round of feedback from stakeholders and a bit more research, these were the outcomes from round two:

  • To help decide which should come first, I looked into how themes mapped to the amenities in onboarding (which are a subset of the amenities in EPC). I realized that the onboarding amenities were generic and would apply to any theme so selecting them first wouldn’t reduce the number of amenities. We could still ask for the theme first and then add on extra amenities to that step, but one of the key goals of onboarding is to be simple and quick so that wasn’t a good option. 

  • If a hotel has X amenities, it qualifies for Y themes. Asking for themes first feels backward with that model. 

  • We also reconsidered the question about the priority of themes compared to the other content in onboarding. It is actually less important than core amenities like Wi-Fi and parking. 

  • The idea of making themes automatic and invisible to users turned out to be out of scope. We didn’t have a service to reliably set all the themes. 

With those things in mind, the next version aimed to reduce the prominence of themes. 

Round three designs: make it smaller

After receiving feedback from stakeholders and peers, I realized themes should come after amenities. They are also closely related to amenities so a separate step didn’t make sense. This version was:

  • Less prominent visually

  • Placed at the end of the amenities step since adding another step to onboarding was not ideal. The onboarding flow needed to stay as streamlined as possible.

The ideal placement in the flow, on the same step as amenities but at the bottom of the page.

Pills at the bottom of the Amenity step. As themes are selected, the related amenities appear below. Since themes are selected first, this could lead to an error state when the user doesn’t have the correct amenities.

Expandable list at the bottom of the Amenities step. This version removes the ability to select themes directly. Instead, if a user expands a section and selects the amenity, the theme will be added behind the scenes.

I presented these versions to stakeholders and UX peers and while this was getting closer there were still some concerns:

  • Still takes up a lot of space

  • This version still wasn’t letting the user select theme-related amenities first.

  • I learned from the engineers that we had a service to check a hotel’s location to see if it is near a beach, natural attraction, city, or ski area. 

Round four designs: smaller still

  • Finalized onboarding version

  • Location-specific amenity questions

  • Theme and amenity selection were separated

There are a few questions we can give higher prominence based on a hotel’s location. I moved them up to the same level as the main amenity questions.

Final version for onboarding, combining aspects from both previous versions. This version is collapsed even more. There is an expanding list for the amenities related to each theme and instead of asking users to toggle on each theme, we add them automatically in a separate section. Users can then remove any themes they don’t want.

We increased the limit of themes from 3 to 5. This is the UI for enforcing the rare case when a hotel qualifies for more than 5 themes.

All the stakeholders were happy with this version of onboarding. 

EPC designs 

With the onboarding UX done, I moved on to the EPC version. Since making themes a separate page in EPC wasn’t a problem like it was for onboarding, that is the direction I decided to go. I brought back the icon grid concept since it was the most visually interesting of the patterns I tried for onboarding.

Trying the grid of icons pattern from earlier explorations.

I like the grid layout visually, but there is a disconnect between the selected themes and the related amenities below. I was worried that users wouldn’t see the amenities appear below when selecting themes. The next idea was a list of toggles.

To make the theme-amenity relationship more obvious, I changed the themes to a list of toggles so the amenities can appear inline. I didn’t like the way errors were handled with this pattern.

Being able to show amenities right below the theme was a big improvement, but the way that users could end up with errors felt clumsy. If at all possible, I wanted to prevent the hotel from making errors in the first place. The problem was that the toggle was serving two purposes, selecting the theme and showing the related amenities. For the next iteration, I separated those two functions. Each theme could be expanded to reveal the amenities and the toggle to activate it. 

Instead of a list with toggles, an expandable list allows the theme toggle to be after the amenities.

Separating the expand and toggle controls had a few advantages:

  • Users could preview what amenities are related to each theme without adding the theme.

  • It better reflects the hierarchy since amenities need to be set first.

  • The toggle could be disabled with an explanation about why. The user can’t make an error, making for a less frustrating experience.

  • Since there is no error checking, changes can be saved instantly.

One problem with having the theme toggle hidden when the section is collapsed is that there is no way to tell which themes are active. To solve this, I divided the list into sections for ‘Your themes’ and ‘Additional themes’.

And we need a few Icons

EPC had an icon set already, but it didn’t cover every theme. I designed the missing icons following the same style for golf, winery, ski, romantic, casino, hot springs, and spa. 

Outcomes and lessons

Outcomes

  • Adding themes led to a 9% decrease in onboarding time which we think can be attributed to helping hotels find the appropriate amenities earlier, rather than having to look through the full list later.

  • The number of properties with themes set increased.

  • The average number of themes per hotel increased.

  • As the usage of themes increased, customer-facing brands could start implementing features to help travelers find the best hotels.  

  • The feature was well received at Expedia’s annual partner conference.

Lessons I learned

  • How important it is for design to be included in the project definition. Had I been involved from scoping, I would have pushed for an automated system.

  • This was the first project where I used Figma. While there was a bit of a learning curve at first, realtime collaboration was a great way to work with the other designer. 

  • Not assuming that all stakeholders are involved and aligned on the solution. Sometimes it is best to level-set with everyone before starting work.

Demonstrated skills

  • UX and UI design

  • System-level thinking

  • Dealing with complexity and ambiguity

  • Icon design