Expedia
Message center redesign
Overview
Integrating reservation details into the message center to improve response time
Challenge:
How might we improve response times from hotel staff and help them get the information they need to quickly and accurately answer guest questions?
Goal:
Redesign the existing message center to reduce context switching and improve hotel staff’s response rates
Solution:
Integrate reservation details into the message center and migrate existing functionality to a new design system
Skills:
Design sprints, competitor teardowns, visual design, wireframing, high fidelity mockups, prototyping, interaction design, agile methodology
My role:
Sr. Product Designer
Platforms:
Desktop, mWeb
Duration:
1 year
Collaborators:
Kelsey Stapleton & Whitney Lacey (Content Strategists), Aurelie Blaise (Research)
Tools:
Figma, JIRA
Definition of the problem
Hotel staff who receive Expedia bookings often get questions or requests from guests. To accurately answer questions, they need context about the reservation such as the stay dates, number of guests, room type, and cost of the booking.
Expedia’s old message center didn’t provide this information - instead, hotel staff had to navigate to a separate page, which made messaging cumbersome.
Additionally, the page was in an old design language. It had discoverability issues with message templates and filters, and comprehension issues with read receipts.
Feature audit
User Research
Competitor benchmarking
Using a site intercept, we conducted a survey of 1,713 hotels to evaluate their satisfaction (yellow) with the conversations experience on compared to Booking.com (blue).
Teardowns
Then each team member chose a competitor or best-in-class chat or email platform to audit and get inspiration:
Airbnb:
Booking.com:
Generative research
Aurelie, our user researcher, conducted 90-minute interviews with twelve hotel managers to dig into the quantitative survey results. She validated several key issues in the current experience:
Task completion
Time-consuming to manually and individually respond
Difficult to understand which messages to respond to
Discoverability
Filters and template creation/management settings not found
Context switching
Context switching and multiple tabs required to get important reservation details
“I wish I could see the guest information if needed and not have to exit the message center to do so.”
Design workshop
My team held a design workshop, which we used to align on user stories, the user journey, and a few ideas we wanted to pursue. Here’s what we landed on:
User stories: As a hotel employee I want to…
Answer all messages and requests from guests quickly and efficiently, so I can improve guest satisfaction.
Set up scheduled messages or automatic responses, so I can save time.
Tailor my messages to guests, so I can provide a personalized experience.
Know when a guest is arriving, so I can have rooms ready at the right time.
Be sure that a guest has seen a message when I send important information, so I don’t have to follow up offline.
Confirm a reservation, so I can keep track of it along with other bookings.
User journey
We mapped the messaging experience in relation to the lifecycle of the reservation, both from the traveler perspective and that of a front desk manager. We narrowed our audience to front desk managers messaging guests who had yet to arrive (“pre-trip”).
Top concepts to move forward with
We then created paper prototypes and dot-voted on the best ideas:
Wireframing
After our design sprint, armed with the insights from our research, I began wireframing:
Wireframe research findings
Our researcher conducted five user interviews with hoteliers. The design solved issues with context-switching and comprehension, but we still had work to do with discoverability for search, filters, sending a new message, and bulk actions.
Here are some excerpts from the readout deck I created with our researcher Aurelie:
“It’s important to know that a guest got my message. I can tell which ones they read.”
“I don’t have to go back and forth between
the reservations and the messages.”
High-fidelity design
Challenges of a new design system
I began explorations at high-fidelity using our brand new design system, called Ferris. There was a learning curve to the system, and many of the theoretical decisions around the system had yet to be tested in real life.
In particular, the system defaults for badges and avatars were creating cognitive overload and visual dissonance in the message list. The pastel palette for avatars conflicted with the earthy and saturated badge palette. I worked with the design system team to add a neutral avatar color and redefine the badging system to create a simpler, more unified color palette.
Layout explorations
This was an extremely content-heavy page with three core sections:
List of all guests who’d messaged
Details for each reservation
Conversation with each guest
It was a challenge to balance visual complexity and cognitive overload with the amount of data and content partners were asking for.
I explored several layouts below. V1 and V2 used a two-column layout (reservation details above the conversation). V3 used a three-column layout with the reservation details to the right of the conversation:
Contributing chat UI to the new design system
The Ferris design system didn’t have any chat UI so I created patterns for guest messages, partner messages, and system events, along with the UI to play back attachments.
New reservation details to reduce context switching: room type, bed type, payment method/amount, rate plan, guest count, and contact info
More intuitive read receipts and treatment for unread messages
New filter for unanswered to prioritize messages needing a response
Desktop UI
Taller message composer with adaptive height to fit longer messages
Conversation events for ETA, in-house feedback, and post-stay reviews
Ability to add multiple attachments to a message
Lazy load scrolling
Final UI
Features added during the redesign
Mobile UI
Agile development process
I collaborated with 5 developers for this project. We had daily stand-ups and used JIRA to track stories. I also held a weekly design review to finalize each set of mocks and and ensure technical requirements had been met.
Results
+5% response rate, +6% template usage
We launched the new message center using an A/B test. Responsiveness was our key metric, and it jumped from 61% to 64% (+5% vs. control). Template usage also increased by 6%, which meant they were more discoverable.
We also monitored several other do-no-harm metrics, such as cancellations, and monitored the feedback link on the page to ensure that we hadn’t launched any bugs or unintended frictions.
Before
After
Learnings & next steps
Through this project, I learned to design for users who need a TON of information to do their jobs. I got feedback repeatedly throughout the process that the designs were “busy,” and despite several attempts to streamline the UI, remove content, or use progressive disclosure, my users wanted all the data in one place.
Although we did see a notable jump in responsiveness and template usage because of this project, the overall numbers are still lower than we would hope. In future design work, we will focus on improving the email and push notifications that go out to notify property managers about new guest messages. Additionally, we will work to surface these messages in other parts of the partner experience, particularly the home page.
More projects
