top of page

Hotel Itinerary


Brand Expedia's post-purchase trips system was going through a revamp to migrate it to the new design system. The itinerary (booking detail) is the core of post-purchase. This project is about the redesign of the hotel itinerary as per the new design system. The primary focus remains meeting the travelers' needs. Providing meaningful information to travelers regarding their booking and management options.

Team & Role

I collaborated with 1 UX Designer, 1 UX Manager, 1 PM, and 1 Engineering team. My role included: 

PWA Design



Design System

Component Design


Figma, Sketch, Zeplin, Trello


6 months


The hotel itinerary on Expedia shows the details of the hotel booking made by a user. It includes information such as the stay duration, check-in and check-out time, location of the hotel, contact details, pricing information, change and cancellation information, and any other information that may be required by the user before, after, or during the travel. It also allows users to take actions on the booking such as emailing or printing it for reference, making changes to the booking, or canceling it.

Hotel itinerary - Old


Hotel overview 

Change and cancel

Cars and Activity cross-sell

Check-in and check-out information

Room details

Pricing and rewards

Additional payment information

Change and cancellation rules

Additional payment information

Hotel and customer support contact


Additional room information

Project goal

Migrate the hotel itinerary to the new PWA system. Enhance the user experience on the itinerary, make it unified and seamless across platforms and devices.


Problems with the itinerary

Business and product teams were trying to generate more revenue by increasing the number of bookings on Expedia. The itinerary was overlooked, shopping flow remained the focus until we noticed that the largest number of customer calls was regarding the itinerary. A large number of calls meant large business expenses, and more importantly, a bad customer experience. The primary appeal of an online travel site is self-service, and we were failing at that.

What data says

calls data.png
calls data.png

User impact

  • Unable to easily and quickly view and modify the bookings

  • Increased call wait times and frustration

Business impact

  • Increased call propensity 

  • Dissatisfied users, impact on brand value

The top 3 call drivers are change, cancellation, and reconfirmation.

Problems that users face

"I have to call Expedia or the hotel to cancel and determine the cancellation policies."

"It was difficult to understand if I could change or not without any charges."

"I couldn’t see my check-out day, date, and what type of hotel room I booked. Especially, with family, I need to make sure that I booked proper rooms."

"There was no 'directions or address' only 'maps and directions', and it was very cumbersome to utilize. I never got a proper address for the hotel… just directions."

Research Goal:

  • Understand the user behavior as it relates to the itinerary

    • When a user opens their itinerary

    • How a user checks their itinerary

    • What a user checks from their itinerary

  • Identify elements of the itinerary experience that should be improved to increase ease of use

  • Identify if users can successfully update their itinerary or if a new path needs to be developed to allow users to complete their self-service change

Research method:

  • Remote moderated study with 10 participants

 Key findings: 
  • Participants access their itinerary most frequently to check their travel details

  • When completing defined tasks, participants faced the most confusion changing or canceling their reservation

  • A large number of participants who faced confusion or failed to change their booking faced difficulty completing the task on a mobile device and also believed that getting to the point where they needed to call customer service was not completing the task​

  • Participants find their reservation dates and the location of their hotel as the most critical information when checking their itineraries

  • Survey with 150 respondents

Our analysis



The page lacks a clear job: A lot of mixed content, such as cross-sell, advertisements, additional/secondary information, everything on the same page

Inconsistencies across platforms and devices: Difference in features, IA, and content on web and App


Cancellation policies


Room details

Scattered information: Lack of proper hierarchy and proper grouping, basically improper information architecture

Duplication of effort between the web and App teams, due to the inconsistencies between the platform


Redefined goal and scope

Traveler Trust Pyramid - Post-booking traveler needs

traveler trust pyramid.png

1. Get me there confidently - Confirmation & Travel Details

  • Redesign product detail screens (consistency across LOBs & platforms)

  • Reliable and scalable infrastructure (move to AWS, React)

2. Help me manage change - self-service tools

  • Consistent "Manage Booking" across Web and App

  • More ways to contact Expedia and Suppliers

  • Extend self-service to additional scenarios

3. Inspire me - content and cross-sell integrations

Our goal is to meet these traveler needs. These needs were analyzed with respect to the entire post-purchase system and we found that different parts of the system cater to different needs. On the itinerary, we will try to solve the basic needs (level 1 and 2) as a part of this project.

High-level system map

system map.png

New Hotel Itinerary

Hotel details.png
Manage booking.png

Solutions to user concerns

Itinerary details.png
Hotel details.png

Easily find what you need

Hotel details, check-in, and check-out are the most accessed information on this page, hence making it prominent to improve discoverability. Relevant grouping of information. Secondary/ additional information behind a click, to reduce information overload on the page.


We understand plans change

Self-serve change and cancellations to help users manage their itineraries without the need to be on long calls with the call centers.

We are here to help

All the customer support options are presented together, along with relevant information that may be required during the call to help users get a quick resolution.

manage booking mobile.png
Manage booking.png
Mobile pricing and rewards.png
Hotel details.png

Your payments and rewards

Legally compliant payment information is presented in an easy-to-consume format, consistent with the payment on checkout so that users can reconfirm the amount they paid. Rewards with payments so that users know what they have earned on their spendings. Option to print the receipt for reimbursements.


Some delighters especially for you

Contextual cross-sell and special price offerings. Whether it’s insurance or simply a car ride, we would show only those additional products for purchase that are relevant to the booking and the phase of the trip. We would suggest only those add-ons which help users plan their complete trip.

M-Hotel base-Hotel details.png
Hotel details.png
Itinerary details.png
Hotel details.png
hotel details tab.png

Consistency is the key

Consistent UI and features across multiple platforms and devices provide users a seamless experience as they switch between devices during different phases of their trip.

Enhancing design & development process


Reuse rather than reinvent

A design library for the itinerary to minimize duplication of effort and inconsistencies in designs. Library components are derived from Expedia's standard design library to ensure a common design language. Simultaneously evolving Expedia's design system to encourage reuse, saving design and development time.



After launch statistics:

The primary success metric for impact was a reduction in call propensity. Secondary metrics were engagement and self-serve rate.

Web design analysis, initial test for call propensity showed a reduction of 12%, followed by the release on more POS resulting in an overall call propensity reduction of 27% globally. This led to huge cost savings. 

Primary intents of calls that saw reduction:

  • Confirmation calls of booking saw the biggest drop: 66% reduction

  • Change of booking parameters like dates, name of the traveler, room nights: 18% increase in self-serve rate (proportionate reduction in call propensity).

Iteratively we added more functionality to self serve tools which resulted in another 9% increase in self serve rate. In 2020 we launched even more functionality on our virtual agent chat platform, analysis on that is pending.

Engagement metrics: Overall engagement tripled which also resulted in a huge uplift in cross-sell especially for cars, local activities, and insurance products.

Mobile web prototype

Design Process

Design process...

We followed the double diamond approach to design, used the design principles of user-centered design, visual thinking, co-creation, and iteration. We paid special attention to the job of the page, context, consistency, content-first approach, responsiveness, and accessibility. The following sections highlight the steps we took to arrive at the final designs.

01. Discover

Data analysis

We looked at call drivers, NPS rating, and the customer support call center data to understand post-purchase customer grievances. Some notable findings the call center data and the intercept survey:

calls data.png
calls data.png
Top detractors.png

Top call drivers- change, cancel, reconfirm

tasks on itinerary.png

Tasks on the itinerary are highlighted in green

Usability study

As shared under the section, problems with the itinerary, a moderated study, and a survey was done to understand user pain points as they use the itinerary. Key findings:

  • Participants access their itinerary most frequently to check their travel details

  • When completing defined tasks, participants faced the most confusion changing or canceling their reservation

  • A large number of participants who faced confusion or failed to change their booking faced difficulty completing the task on a mobile device and also believed that getting to the point where they needed to call customer service was not completing the task​

  • Participants find their reservation dates and the location of their hotel as the most critical information when checking their itineraries

Current flow and Heuristic Evaluation

We looked at the current system and found challenges with the information architecture and groupings, leading to discoverability issues. Top issues:

  • Mixed content, no clear job of the page

  • Scattered information

  • Inconsistency across platforms and devices

  • Duplication of effort between web and app teams

Competitor analysis

We looked at Airbnb, Google trips, Booking, Make My Trip, and the deck shared by the benchmarking team to understand how our competitors are doing in this space.

Key insights:​​

  • Multipage itinerary with a clear job of each page

  • Visual styles across platforms are carried throughout the workflow

  • A clear content hierarchy, same across platforms (different layouts)

  • Contextual actions upfront


Content teardown

We gathered all the content pieces, broke them apart, and thought about the value  of each piece. And followed with a card sorting exercise to put information into categories where they naturally belong. 

content categorization.png

Click on the image for content categorization sheet

Content prioritization 

Using a content prioritization survey, we prioritized the content on the itinerary as per the user rating.


  • Learn how Expedia users rank the importance of various pieces of hotel itinerary content 

  • Look for differences between US and UK, desktop and mobile, business and leisure


  • Intercept survey (n=958) on US and UK itinerary detail

Key findings:

  • Customers ranked booking details as the most important, such as date/time, confirmation number, room type, and pricing breakdown.

  • Respondents consistently gave low importance rankings to items such as rewards and points information, insurance, link to receipt, and customer support information

content prioritization.png

02. Define

Goal & scope

travelers needs.png

We gathered that the most important task for users, on the itinerary, is reconfirming their booking, followed by managing that booking. Buying additional products, or making a new booking on the itinerary is a tertiary requirement. Hence, we made a traveler needs pyramid (similar to Maslow's hierarchy). This helped us limit the scope of this project to solving the problems lower in the hierarchy first before we look at opportunities at the top level.

Story Map

We created a persona (Frank Funston) with a specific user story to help us focus on a smaller scope. Thinking from Frank's perspective, at each step, what does he want from Expedia, and how should Expedia respond to the user's need. Writing down that conversation helped us to identify the job of each page.


Click on the image to see the complete user story

Job of the page


Core product details that help users get to their reservation.


Access to secondary itinerary details that are categorized intuitively.

Provide options to print/share.


Self-serve change and cancellation options.


Provide support tools (support content/contact options).


Communicate price paid and amount due totals.


Provide options to print/share.

03. Develop


Based on the findings, we started wireframing different hierarchies and flows. It was an important step to understand how the pages will work with actual content.


Visuals & prototypes

Visuals help in better understanding and getting feedback on the designs. When we reached a solid point we made prototypes of how the new hotel itinerary would look like.


Design library & UI

While these designs were getting explored, Expedia's design library was evolving.  We had a new Unified Design System (UDS) based on React. The idea was to use the standard components so that there is less custom code, and any design upgrades would reflect automatically everywhere without the need to modify each instance. To maintain consistency across the breakpoints on the web, we made our custom component library (using the standard components) for trips (hotel itinerary is a part of trips). Certain components needed for the itinerary design were missing in UDS. This led us to conduct an audit and add new components to UDS. Adding components to the standard library involved thorough audit, validation, and documentation so that these could be used in an intended way, by everyone using UDS.

A glimpse of the component audit, documentation, and taxonomy in UDS:

Audit & use cases5.png




Taxonomy & explorations11.png


04. Deliver

Design documentation & handoff

We compiled the final designs in a Figma file, looked at various scenarios, and added more use cases. We onboarded the engineering team to the new designs. We then worked with the engineering and product team to understand the fallback scenarios for missing use cases.

file structure.png

Roll-out & test plan

We worked with the product management and engineering team to define a roll-out and test plan. We did an AB test of the new itinerary with the old itinerary. The primary metrics we were looking at were call propensity and gross profit.

Accessibility & UAT

While making these designs we tried to make these accessible so that all our users are able to accomplish the intended tasks with ease. To make sure our designs are implemented with accessibility considerations we provided accessibility annotations with the handoff file. We also did a screenreader, keyboard, and general accessibility test once the designs were implemented. Issues found during UAT were compiled, assigned severity, and shared with the engineering team for fixes.


Measure the results

Used data and feedback to identify how the new page is performing, made required amends and ramped up traffic to all POS.

What's Next

Next steps

Design for remaining scenarios, edge cases, and exceptions. Since the basic structure is implemented and has proven to be working, enter the next phase where we provide notifications, alerts, and more customization options.


I gained two major learnings from this project.

  1. When working on a complete redesign, it's easy to get lost in a pool of ideas. It is important to narrow down the scope and focus on key areas. Fallback options should be considered while designing for specific scenarios.

  2. It's not restrictive but more creative to work with a standard design system. It's a craft to create standard components that are well defined and can be used by the whole organization. Using a design system significantly reduces inconsistencies, and the time spent in achieving a common design language.

View this site on desktop for more details on this project.

I'd love to hear from you

Email me at  •  Connect on LinkedIn

bottom of page