top of page
Expedia Conversation Design

Payment Card

Conversation design experiences for Expedia's Virtual Assistant Chatbot that enables users to make payment for post-booking changes to their hotel and lodging.

payment_types.png
P2.png
Goal

Enable users to confidently and quickly make payments. User experience should be responsive and provide feedback, guiding the user on the next action they should take to complete payment submission. 

Approach

— Designed chat user experience and interaction model to payments collection.

— Design thinking contributions to product roadmap for project phases.

— Identified use cases for both customer self-service and calls handled by contact center agents.

— Creation of design spec and flow diagram. Identification of payment errors and success responses.

— Product managers provided field requirements and design considerations.
— Worked with developers on interaction and field behavior and content strategist on text strings.
— Integrated feedback and guidance from user experience researchers on test script and user considerations. 

— Conducted usability testing in Lisbon, Portugal on 10+ participants (call center agents represented different languages - English, German, France, Russian, Italian, Finnish for international locale considerations.) with an interactive prototype that tested the old payment form approach with the updated version. Collected user feedback on value and usage of different payment methods. Results influenced roadmap of feature prioritization.

GOALS

— Increase the number of 


Customer Needs
• Improve user experience and increase user confidence. Make it easy and efficient for 

Business Goals

 • Reduce

Design Process

— Conducted research on how different companies collect payments and what users liked and disliked when paying online and in person.

— Evaluated payment collection on Expedia's multiple brand sites and partnered with payments designer on booking path to get feedback.
— Informed working team on best practices in form-field design for both mobile and desktop and considerations for international markets.
— Identified design goals and guiding principles to determine interaction affordances (usage of text field over drop-downs to reduce mode switching) for team to align to. 

— Worked with product management, content strategist, developer/engineers in global customer operations.

— Cross-group collaboration with the the finance, payments, and ordering management teams for understanding backend considerations.
— Evangelized usage of design pattern to other designers working on customers intents (Change Lodging and Change Flight) that involved making payments.

Design Deliverables

Created an html index page for the designs. Planned for a design schedule that took into consideration the multiple design iterations with usability testing as well as feedback from reviews with business owners.

User Scenarios

Identified key scenarios and use cases. Created wireframe screens in Sketch. Built out multiple prototypes in Axure for usability testing.

User Task Flow Diagram

I delivered scenario flows for the different use cases and handed off design for the following screen deliverables:  S

payment-flow.png

Research

 • Observed and interviewed call center agents to understand their workflow and escalation process.

Focus Group Session

Agents prioritized most common used tasks they use in Voyager Flights. 

Prototype

View Prototype  (password: usability)

Interaction-2.png

APPROACH

— Made user experience

Usability Testing

 • Created usability test scripts and identified demographics of the test participants. Reached out to service delivery team to obtain call center availability and participants. 

payment-research.png
outcome-payment.png

UX Reviews

 • Held weekly UX design reviews (Product Management, Design, Content) to work on deliverables.

 • Reviewed designs with Expedia.com designers who were working on flight booking to knowledge share.

 • Reviewed designs with SMEs and business owners from impacted groups and updated designs per feedback received.

 • Held design-tech meetings with development and test teams for tech feasibility checks on different ui design options.

 • Worked with Learning & Development teams to provide screenshots for training materials. Presented designs 

Select Flights & Travelers Page

Technical Scope & Development Constraints that required design consideration

 • Not able to build out all search parameters during the first phase of the project. Made recommendations for which search parameters would have the most user benefit to build out.
 • Error messages were not all identifiable. Needed to anticipate and address most common problematic ones.

 • Not able to support less than all travelers on a flight exchange.
 • Not able to build out new progress bar design due to shared code and resource time limitations for testing.

 • Not able to update the payment widget due to legacy code with unknown dev dependencies that could be problematic. 

 • Needed to leverage existing visual and interaction style guide and flight itinerary page that was already created. Introduced new styles to compensate and fill in gaps.

 • Certain use cases could not be supported in the mvp timeline. (Example: No infants, minors, or basic economy fares can be exchanged. No multi-destination bookings.)

 • Not all fare rules for all booking types were parseable.

 • Not able to display the relevant policies or hyperlinks to the knowledge base.  

Design to Development Hand-off

 • Participated in sprint story planning and user story writing sessions with PM, Content, Dev and Test.
 • Deliverables were agreed on and planned out in 2 week cycles for the next four months.  

 • Daily standup meetings with dev team to answer design questions or adjust designs based on backend issues and time constraints.

Interaction design spec

Final Design

 • Delivered final mockups, prototype, and annotated interaction redlines for the different use cases.

 • Worked with css designer for hand-off of html code to developers.

 • Buddy-testing meetings and side-by-side review of coded designs with developers. 

 • Participated in build reviews and bug prioritization meetings with PM, Dev, and Test.

 • Partnered with pm/dev/test to determine process and severity levels for filed bugs.

Impact

 • — Designs contributed to meeting the goal to enable customers to self-service 80% of travel post-booking intents.
— The payment card is included in the platform SDK for both internal and external brand partner to use.
— Customer and agent feedback has been positive. 

Future Design Thinking

Upon completion of the flight exchange initiative, I went

IMPACT
Designs contributed to a decrease in the average handling time of agents. Tracking transactions over a year after the initial release showed business revenue increase and savings in decreased operations costs. There was positive feedback from the survey results of agents using the tool that the new design improved their work. 

bottom of page