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
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
Sketches
Wireframes
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 |