Expedia + Vrbo
Reservation details redesign
User Problem:
How might we simplify reservation management and reduce cognitive overload for property managers, with the right information at the right time?
Business Goal:
Reduce customer service contacts by property managers and increase responsiveness to guest messages, while migrating to a new design system and consolidating overlapping flows for Vrbo and hotels
Skills:
Content audits, wireframing, component creation, high fidelity mockups, prototyping, interaction design, agile development
Overview
My role:
Sr. Product Designer
Platforms:
Android, iOS, desktop, mWeb
Duration:
6 months (2022)
Collaborators:
Kailyn Lim, Katie Stavros, & Steve Marsh (Design)
Lisa Holter (Content)
Zelda Barrett (Research)
Tools:
Figma, Miro, JIRA, Usertesting.com
Background
Expedia Group is a holding company founded in 1996 that historically owned websites for booking hotels (ex: Expedia, Hotwire, Hotels.com). In 2006, they entered the market of vacation rentals when they acquired Vrbo.
There are many similarities between the hotels and vacation rentals, but also unique differences. For example, both have check-in/check out dates. But only hotels have front desks, and only vacation rentals have cleaning fees.
Organizational JTBD: Converging Vrbo and hotel reservation tools
The hotel brands and Vrbo operated completely separately for 16 years. When I first joined Expedia Group, my scope was limited to hotels. But in 2022, the two design and development teams finally merged, and I combined forces with three other Vrbo designers who were working on similar tasks and flows.
The reservation details page is the #1 most visited page for property managers of Vrbo’s vacation rentals and hotels. Leadership challenged my team to find the overlap between the two, and merge the two brands into a single experience with one API and UI.
Our goal was to reduce complexity and duplication by converging flows and content. However, content and branding still needed to adapt to the user type.
User insights
Personas
These personas were provided by our researchers based on interviews and quantitative data. Hotels operate at a much bigger scale than Vrbos.
Vrbo property managers/owners
Expertise: “Side hustlers” looking to supplement income or defray living costs
Size: 1-2 properties
Revenue: $2k - 20k per year
Guests: 5-60 per year
Hotel property managers and staff
Expertise: Hospitality professionals
Size: 5-20 employees and 20-100 rooms
Revenue: $500k - $4M per year
Guests: 600-10,000 per year
Heuristic analysis:
From annual benchmarking studies, we knew we were behind our competitors, Booking.com and Airbnb, on task completion for core tasks like checking in a guest or editing a booking. From user interviews, we learned many of the issues were coming from the reservation details page.
Cognitive overload: As you can see below, the reservation details is a LONG page of heavy content. Both Vrbo and hotel property managers find the page overwhelming, especially for modified or canceled reservations.
Discoverability & context switching: Messages were also getting lost. For hotels, messages were buried down the page, and users had to respond in a separate window. Vrbo’s users couldn’t find the button to open messages, because the affordance (an unlabeled carat icon) wasn’t clear.
“There’s so much unnecessarily complicated information. Why is it so hard to figure out how much someone paid, or how much they owe? I’m always hoping I charged the right amount”
“It’s not easy to tell when you have a message. Then when I try to open this message and answer it, this clunky window cuts off half the messages and makes me go to another page.”
“I end up calling customer service pretty often if I need to change or cancel the booking in any way.”
Project kickoff
Our team met to align on three goals: How might we…
Better integrate messaging and reservation details, so that property managers can easily manage reservations and respond to guests with enough context?
Simplify content so that it’s less overwhelming, but offer the right level of detail at the right time?
Converge identical feature sets and content for Vrbo and hotel property managers to their least common denominator using shared UI and a themable design language?
UX Convergence
Analyzing convergence opportunities for core tasks
I examined the key flows for both Expedia hotel managers and Vrbo property managers to find the overlap between the two:
Feature audit
I also compared the current reservation management experiences of Vrbo and hotels, and audited all existing features:
Newly converged flows
Content and features to converge
I then audited all the content to look for convergence opportunities. The Vrbo reservation management tool had many features hotels didn’t have (and vice versa).
During this audit, I found several opportunities to create feature parity (shown below with green “$” signs), because the feature would benefit both hotel and Vrbo property managers.
Wireframing
Interactions
Card components: I grouped ~80 data points relevant to reservations into 10 different card components, grouped by affinity.
Progressive disclosure affordances: “see more” expanders and “see details” links/buttons. From each card, hotel and Vrbo property managers could also drill into details or modify the reservation using a mix of action sheets, full sheets, and bottom sheets depending on the task.
Converged, themable patterns: Anywhere the user needs and flows were identical, I used the same fundamental components and patterns for both Vrbo and hotels. However, I adapted the content within each pattern to account for differences between the two. Using a Figma plugin called “Themer” created in-house by our design system team, I would later be able to “theme” the shared components and patterns to layer in the right typography, color, spacing, etc. for both the Vrbo and hotel brands.
Wireframe testing through user interviews
Zelda, our user researcher, conducted 60-minute interviews with six hotel managers and nine Vrbo property managers. During the test, she also tested several other flows for other designers, such as the messaging experience, although they were not directly related to my work. Here are my converged prototypes for the test:
Vrbo wireframe prototype
Hotels wireframe prototype
Wireframe test findings and System Usability Score
The test revealed that we were on the right track with a SUS score of 83.
Overall, users felt the reservation detail page was intuitive and easier to understand, although I had oversimplified/removed certain content that I didn’t realize was important to maintain. Two users still complained the design was overwhelming or complex.
“I like being able to see the details for the payments [from the summary view]. ”
“It’s better...but I’d still rather use Airbnb. They make it easier to edit the booking.”
“ Flipping to his messages is helpful.”
Final Hotel UI
I used the findings to make final decisions on high-fidelity designs, and aligned with product and engineering on the following decisions:
Content simplification
Removed data labels to reduce total content
Created a summary view of payment amounts, with ability to drill into payment details as needed
UI improvements
Ability to tab between messages and reservation details without losing context
Visual treatment for accessibility requests
Skeuomorphic card design for credit cards
Visual treatment for timeline
New features
Added Vrbo’s commission to increase transparency and comprehension of payouts
Contact info made available without requiring MFA
Final Vrbo UI
Content simplification
Removed data labels to reduce total content
Simplified payment schedule using expandos to hide/expose details
Consolidated all payment actions into a single action menu
UI improvements
Reduced use of color and badging in payment schedule for payments that were paid or being processed to focus attention only on overdue payments
New features
Ability to drill into payment details as needed and get further granularity
Converged results
Simplified content with one UI for two brands…plus, faster development in the future
Through this project, I was able to reduce cognitive overload for both hotel and Vrbo property managers, making it easier to manage reservations.
By creating UI using consistent card and sheet patterns, I standardized the experience across both brands, leading to faster development time. Designing for both will also be faster in the future.
High fidelity hotel prototype
High fidelity Vrbo prototype
Success metrics
As of September 2022, I have been working with a PM, TPM and 5 developers using an agile methodology to build the new reservation details experience. It’s set to launch at the end of Q1 of 2023.
The primary success metrics will be:
Reduction in customer service contacts
Increase in messaging responsiveness
Do no harm: cancellations
Finally, the Product team estimates we’ll reduce future design and development time by 30% by having a single UI and API for both hotels and Vrbo.
Learnings & next steps
Balance customization and standardization:
Some content and flows can be fully converged for different users, but sometimes the user needs are distinct and the experience must reflect it.
An organizational pivot can be an opportunity for the user experience:
Merging teams and When redesigning both the front and back end of an experience, there’s a lot of room to challenge the status quo. Rather than just copy old content and try to converge it, I had an opportunity to pursue feature parity and eliminate/simplify content.
If I could do this project again, I’d…
Challenge the scope and break it into smaller releases
It was a huge undertaking to merge two businesses, migrate to a new design system, and simplify content all at once.
I’m currently working on the screen reader documentation for this project, which is another learning experience for me.
More projects
