EXPEDIA.COM
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
UX
UI
Design System
Component Design
Tools
Figma, Sketch, Zeplin, Trello
Timeline
6 months
Context
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
Cross-sell
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
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
Cross-sell
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
Pricing
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
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
New Hotel Itinerary
ITINERARY DETAILS
MANAGE BOOKING
PRICING & REWARDS
Solutions to user concerns
ITINERARY DETAILS
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.
MANAGE BOOKING
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.
PRICING & REWARDS
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.
CONTEXTUAL CROSS-SELL
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.
STANDARD DESIGN COMPONENTS
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
STANDARD DESIGN COMPONENTS
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.
Impact
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...
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:
Top call drivers- change, cancel, reconfirm
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.
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.
Goal:
-
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
Method:
-
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
02. Define
Goal & scope
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
ITINERARY DETAILS
Primary
Core product details that help users get to their reservation.
Secondary
Access to secondary itinerary details that are categorized intuitively.
Provide options to print/share.
MANAGE BOOKING
Primary
Self-serve change and cancellation options.
Secondary
Provide support tools (support content/contact options).
PRICING
Primary
Communicate price paid and amount due totals.
Secondary
Provide options to print/share.
03. Develop
Wireframes
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
Documentation
Taxonomy
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.
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.
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.
Learnings
I gained two major learnings from this project.
-
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.
-
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 tanyaswami1@gmail.com • Connect on LinkedIn