Tuyen Truong | Digital Product Designer
  • Home
  • About
  • Projects
  • Résumé
  • Travel
  • Journal

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

Picture
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

Picture
Notify users of an error
Picture
Help users understand what has happened
Picture
Provide clear info to guide users forward
Picture
Tell users how to resolve an error

Sketches

Picture

Wireframes

Picture
How can we leverage existing UI (i.e. enable the change search wizard on the page that the error is thrown)?
Picture
How can we use the data and inventory we have to provide alternative options to the user?
Picture
How can we reduce the number of steps for the user? Can we simply do the work for them?
Picture
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

Picture
Picture
Picture
Picture

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
Picture

Overall winner

Picture
Reduced call propensity by 12.37%
Picture
Increased conversion by 2.80%
Picture
Annual GP gain by $244.34K +/- $307K
© COPYRIGHT 2021. ALL RIGHTS RESERVED.
  • Home
  • About
  • Projects
  • Résumé
  • Travel
  • Journal