Customer problem
A traveler who has selected their flight and hotel feels frustrated when they see an error message on the review page; they want to complete their purchase but cannot because they don’t know which errors to fix in order to move forward. How can we improve the error handling experience to keep travelers in the path?
|
Project length
4 weeks |
Tools
Paper & pencil Sketch Zeplin Illustrator |
Process
Story grooming & kickoff Collaborate with content strategist Sketches Wireframes Hi-fidelity mocks Hand-off User acceptance testing |
Team
UX Designer (me) Content Strategist Technology Lead Technical Product Manager |
User flow
What do you expect to happen next after you land on the error?
Shopping for travel is very different from shopping for clothes, for example. Travel is unfamiliar, more expensive, and happens infrequently. For many, going on a major trip is a limited time opportunity that occurs once every years. Since it's typically a special event, most people spend a lot of time discovering, researching, and comparing before they decide to move forward with a flight and/or hotel selection.
On average, users visit Expedia.com 8 times before they book. Each site visit lasts about 30 minutes. Now imagine spending 30 minutes carefully selecting your hotel and flight only to be hit with a red error messaging telling you that Expedia.com is unable to complete your request. What does that even mean?
Approach
|
Shift the tone of voice Instead of delivering bad news with blameful words like, "unable to complete your request" in an alarming red banner, how might we use more gentle, guiding tone of voice to help users forward? |
Put the agent back in How can we alleviate the inconvenience that we may have caused to our users? Where can we step in to help? |
Question the existing user flow Do we have to force our users to start their search all over? What can we be smart about remembering for our users? |
Job of an error message
Notify users of an error |
Help users understand what has happened |
Provide clear info to guide users forward |
Tell users how to resolve an error |
Sketches
Wireframes
How can we leverage existing UI (i.e. enable the change search wizard on the page that the error is thrown)?
|
How can we use the data and inventory we have to provide alternative options to the user?
|
How can we reduce the number of steps for the user? Can we simply do the work for them?
|
How can we let the user be in control of their shopping experience? Can we provide the tools to let users edit their search?
|
Hi-fidelity mocks
|
|
|
|
Handoff
|
A bottom sheet with a primary call-to-action button takes the shopper to the Flight SRP to re-select their flights while retaining their hotel selection so that they no longer have to start from the beginning.
Focused attention A user cannot proceed to purchase since the primary content is out of focus. There's also no longer a mismatch of content on the primary page Friendly, direct message A friendly message helps the user understand the cause of the error and how they can fix it Delightful illustration Lightens the severity of the error occurrence Improved user flow Re-routing to Flight SRP instead of Hotel SRP reduces the number of steps that a user may have to repeat |
|
Overall winner
Reduced call propensity by 12.37% |
Increased conversion by 2.80% |
Annual GP gain by $244.34K +/- $307K |