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 while enhancing discoverability and management.


I collaborated with 2 UX Designers, 1 UX Manager, 2 PMs, and 2 Engineering Teams. My role included: 

PWA Design



Design System

Component Design


Figma, Sketch, Zeplin, Trello


8 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


Problems with the old itinerary

  • Core page lacks a clear job: Difficult to discover primary content due to a lot of mixed content, such as cross-sell, advertisements, additional/secondary information, everything on the same page

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

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

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

Frame 18.png

The top 3 call drivers are change, cancellation, and reconfirmation. This implies users are not able to do these tasks on the itinerary. But, these are in fact, the primary job of the itinerary.


Improve discoverability and ​relevance of content on the itinerary. Provide a unified experience to Expedia itinerary users.

Competitor analysis

​We looked at our competitors and gathered the following insights:​​

  • Each page has a clear job

  • No repeated pages or jolted transition for a more detailed view

  • Visual styles across platforms are carried throughout the workflow

  • A clear content hierarchy makes it easy to find important travel information as well as secondary travel details


How users feel about the itinerary

We wanted to understand in detail what are the user expectations from the itinerary. For that we looked at:​

  • Customer feedback 

  • Call drivers

  • NPS rating

We also conducted research (done in collaboration with a dedicated researcher) to understand how the itinerary is used.


  • 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 using a desktop computer

 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

  • 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, mix of smartphone, tablet, and desktop users

Redefined Brief

Redefined Brief

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)

  • More trip information available offline on the App

  • 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.

System map

system map.jpg

Job of the page

Trip Folder
Trip Overview
Manage booking
Pricing & Reward

Primary: Show list of upcoming travel, trips should be distinguishable from each other, and users should be able to know products in each folder.

Secondary: Past and cancelled trips.

Primary: High-level product core data.
Secondary: Access to planning tools.
Tertiary: Access to inspirational content and relevant cross-sell to help users plan/build out their trip.

Primary: Core product details that help users get on/to their reservation.

Secondary: Access to secondary itinerary details categorized intuitively.

Primary: Communicate self-service

options available

Secondary: Provide support tools (support content/contact options)



price paid and

amount due



New Hotel Itinerary

D-Hotel base-Hotel details.png
D-Hotel base-manage booking.png

The new hotel itinerary features

image 3.png
D-Hotel base-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. All the 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 presented together along with relevant information that might be required during the call to help users find a quick resolution to their concerns.

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

Your payments and rewards

Legally compliant payment information presented in an easy to consume format, consistent with the payment on checkout so that users know what for and how much 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 useful in that 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

Consistency is the key

Components built using master components which are further made using the standard design library at Expedia. This is to reduce duplication of implementation effort and provide a consistent user experience.



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

The process - how we got to these designs

We followed the Framework for Innovation, where we used the double diamond approach to design and also looked at 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.


Current flow and Heuristic Evaluation

We looked at the current system and found a major challenge with the information architecture and groupings leading to discoverability issues. Consistency and overwhelming content on the page add to the issues, as listed under problems with the old itinerary at the beginning of this project.

Customer feedback and user research

As shared at the beginning of this project, we looked at call drivers, NPS rating, and the research team study to understand the users' primary concerns.

Content teardown

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

content sorting.jpg

Click on the image for content categorization sheet

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. We compiled this into an analysis summary. Looking at competitors' content hierarchy and flow helped us understand the grouping and gaps. The key insights from competitor analysis are listed in the starting sections.


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.

user story

Click on the image to see the complete user story

Content sorting

Based on the user story we prioritized the content that we had initially segregated into different buckets.



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 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 and UI

While these designs were being developed, Expedia's design library was also evolving. We had a new Unified Design System (UDS) which comprised of the building blocks for design which were built using react. The idea was to use these standard components so that there is less custom code for the front end, 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). Mocks with final UI are shared under the new hotel itinerary section at the beginning of this document.

Accessibility annotation & UAT

While making these designs we tried to make these accessible so that all our users' experience is similar. To make sure our designs are implemented as indeed we provided accessibility annotations before design handoff and also did screenreader, keyboard, and general accessibility test once the designs were implemented.

Measure the results

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

What's Next

Next steps

Add missing use cases

Design for remaining scenarios, edge cases, and exceptions.

Add delighters

Since the basic structure is implemented and has proven to be working, time to enter the next phase where we provide notifications, alerts, and more customization options.

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