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 while enhancing discoverability and management.
Role
I collaborated with 2 UX Designers, 1 UX Manager, 2 PMs, and 2 Engineering Teams. My role included:
PWA Design
UX
UI
Design System
Component Design
Tools
Figma, Sketch, Zeplin, Trello
Timeline
8 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
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
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.
Brief
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.
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 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
Traveler Trust Pyramid - Post-booking traveler needs
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
Job of the page
Trip Folder
Trip Overview
Itinerary
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)
Primary:
Communicate
price paid and
amount due
totals
New Hotel Itinerary
ITINERARY DETAILS
MANAGE BOOKING
PRICING & REWARDS
The new hotel itinerary features
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. All the 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 presented together along with relevant information that might be required during the call to help users find a quick resolution to their concerns.
PRICING & REWARDS
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.
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 useful in that 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
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.
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
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.
Discover
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.
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.
Define
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
Content sorting
Based on the user story we prioritized the content that we had initially segregated into different buckets.
Develop
Wireframing
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
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.
Deliver
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.
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 tanyaswami1@gmail.com • Connect on LinkedIn