Proprietary + Confidential

Designing for Uncertain Times

Design Principles & Recommendations for Travel

March 2020
 Proprietary + Confidential

Why do this?
To be there for your users
This is an unprecedented situation for everyone and it is
likely to be stressful too. Be there for them during these
uncertain times by delivering the best user experience and
boosting their trust in your brand

To meet user needs

Online became even more important. It is where you can
connect with all your customers, give them assurance and
provide them useful information

What this deck is and what it isn’t
What it is
Guidance on UX best practices for uncertain times
● It proposes different ways to set customer
expectations about upcoming journeys
Suggested design principles for uncertain times
● It suggests overarching principles to consider while
designing for uncertain times (color, tone, messaging)
Recommendations illustrated by mock-ups
● It visualizes recommendations through mock-ups (for
illustrative purposes only)
Proprietary + Confidential
What it is not
Exact design templates or prototypes
● It includes mock-ups for illustrative purposes only.
Designs and content for your site should be
customised to suit your own customer needs
A set of must-dos
● It provides inspiration that might help address your
own business need. Choose what seems most
useful for you and test it if possible
An industry-specific guide
● It provides inspiration for all sites in the travel
industry, including transport, accommodation,
package holidays, etc. It contains limited mockup
examples for brevity
 Executive Summary
8 main recommendations for the full user journey
Homepage
Information banner
- Display an info banner
- Make it visible, informative, &
empathetic
- Link to more detailed info
Product Details Page
Display relevant
travel advice
Display relevant location-based
travel advice or a banner asking
users to check relevant info
before booking
Click on blue link to jump to a section
Product Listing Page
Highlight refund conditions
specific to the situation
- Communicate the situation-specific
change policy per product
- Have a policy banner if your policy is
one size fits all
Situation-specific Info Page
Communicate priority info
- Briefly & clearly communicate latest
updates
- Communicate & pre-expose main info
categories like updates & travel advice;
Cancellations & refunds ; Precautionary
measures
Product Details Page
Communicate your
precautionary measures
If you’ve enhanced your cleaning Display a cancellation policy banner
procedures tell your customers
about your great efforts
Situation-specific Info Page
Allow safe exploration
Build easy navigation to
facilitate getting around with
minimal physical and cognitive
load
Proprietary + Confidential
Product Details Page
Communicate cancellation
policy clearly
or add a disclaimer next to the
booking CTA
FAQs/Help Center
Include a section for
situation-relevant FAQs
Cover all FAQs that are not frequent
enough to be stand-alone
categories in your main info page
 Table of contents
Proprietary + Confidential

We have provided design principles & recommendations across the full user journey, including:

Design Principles
Homepage
Product Listing Page
Product Details Page
Situation-Specific Info Page
FAQs / Help Center
Other ways to keep users updated

Click on blue link to jump to a section

 Proprietary + Confidential

Design Principles
Your Goal: Set customer expectations about upcoming journeys

Color Tone Message

Calm Caring Informative

● Use calming color choices, like
blue or green
Visible
● Ensure the content is visible to all
users. Use colors that are
different to others on your site
Coherent
● Use a coherent color palette. To
attract attention you can use
complimentary colors (colors
directly opposite each other)
● Show that you care for the ● Focus on information first;
wellbeing of your users be brief and to the point;
show actions taken to
Calm ensure health and safety
● Use calm and neutral language
Positive
Authoritative ● Use simple language and
● Use credible sources; own the focus on what users can do
narrative
Accessible
● Advisory information applies
to everyone.
 Proprietary + Confidential

Homepage
3 main recommendations for your homepage
Your Goal: Validate user concerns + Show action + Set expectations + Facilitate navigation to needed info
Information Banner
● Include main updates in an info
banner & link to a dedicated page
● Be empathetic + informative. Use
clear & detailed sentences to provide
reassuring content; provide details
about precautions being taken
● Make it visible. Place it where it will
be seen, with minimal disruption of
your current template. Use calming
but distinctive colors
● Use distinct CTAs. Link to a
dedicated page or take users to an
actionable step (e.g. refund form)
● Closable: allow users to close it if
they wish
Info section in 2nd fold
● Include key sections of the current
situation FAQs immediately below
the fold. Including latest updates &
advice, refund/cancellation
information, safety measures being
taken, FAQs
● Break the fold so users know to
scroll down to this content
● Link every section to the appropriate
point on the dedicated page
Proprietary + Confidential
Global Navigation
● Include main info page in global
navigation
● Include in hamburger menu all
sub-sections as secondary
categories (high priority)
● Include main category in footer
navigation (lower priority)
 Proprietary + Confidential

No alarming
Information Banner colors
Closable
When to use: General design recommendations Empathetic

applicable at all times X

Quick access
to key CTA
When users are distressed they might engage more in
Informative redirecting to
some behavioral patterns like satisficing and might be (suggests wherever you
more aggravated by findability issues you’ve taken have more
precautions) details
+
Address user concerns as soon as they land on your Linking to info Location: in
page via an empathetic and informative banner with page center of
easy CTA access page, not in
blindspot

To grab users’ attention. You can use complementary

or other attractive colors from your palette. Avoid
using alarming colors that might add to users’ stress
 Proprietary + Confidential

Information Banner Use official

Closable
campaign
When to use: If you’re facing a high demand colour to build
of cancellation requests fast
recognition
Provide a link
If your business is facing very high demand for to specific
info page.
cancellations, consider adding the cancellation button CTA Add a good
in your information banner to facilitate findability and help padding area
offload customer service calls for touch
targets to
facilitate
You can use the official campaign color (#FFEB01) for fast Create CTA for hitting the
recognition if your site palette permits key actions, target link
make sure to
create strong
Avoid using any alarming language or signs (like Location: in
contrast
exclamation marks) that might increase stress the center of
the page, not
in blindspot
Allow users to close the banner if they wish. If a user closes
it > 2 times, consider keeping in closed during the user
session. Do show it again on the next day or when you have
new updates
 Proprietary + Confidential

Information Banner
Avoid using alarming colours, like red

Red is commonly associated with errors. It is alarming and

worrying. Try to communicate important messages using
calming colours

Avoid using alarming icons like exclamation marks

 Proprietary + Confidential

Information Banner
When to use: If you have to stop bookings &
can’t allow pre-booking

If you have to stop all bookings and can’t allow pre-bookings, Integrated
you can repurpose your site to notify users when their service banner + link
of interest is back to more info

You banner could be more integrated to your site since info

about the situation is currently your main message

Always remember to have an empathetic message and link to

Repurpose
more info your site to
notify users
when they
can book
 Proprietary + Confidential

Information Banner You can use a

When to use: When the situation changes small banner with a
link to main info
page. Make the
When the situation changes but is still fresh in a user’s whole banner a
touch target
mind, you should still address it

You can place less emphasis on the banner, but bear in

mind that the situation could be different in different
locations and that individuals recover at different paces.
But make sure you
Always be considerate and empathetic still address key
questions on the
Make sure you still address key questions & concerns homepage
as they evolve even after the situation is contained

Make you banner touch targets/CTAs 16-19mm to

facilitate hitting the right target
 Proprietary + Confidential

Info section in 2nd fold

To make sure users don’t miss any important information, add
a solid fallback option that pre-exposes the most common
info categories they might be interested in
Include:
Updates &
This is also a secondary entry point to your dedicated info Advisory,
page. Link every section to more info on your dedicated info FAQs,
page Cancellation
& refund, &
precautionar
Include key sections, for example updates & advice, refunds y measures
& cancellations, precautionary measures, FAQs, etc

Break the fold so the content will be visible enough to

Break the
encourage a user to scroll down for more fold (very
important!)
Keep dates current if using them (including weekends)
 Proprietary + Confidential

Global Navigation
To facilitate discoverability, have a 3rd entry point for
your dedicated info page (or wherever you have your
dedicated situation-related FAQs)

Include your dedicated info page in your hamburger

menu (high priority)

You can also include it in your footer navigation (lower

priority)

Link in footer Link in hamburger

navigation menu
 Proprietary + Confidential

Product Listing Page (PLP)

3 main recommendations for your PLP
Your Goal: Clarify refund policies + Give users control + Set expectations + Facilitate decision making
Highlight refund conditions
specific to the situation
● If your policy is one size fits all,
display a banner on the PLP
● If your policy varies by price, make
sure to communicate it early
● Recommend/highlight options
that are flexible if that is the best
option during the current situation
Facilitate social sharing
● Offer alternative actions for users
who are not ready to book
● Enable social sharing to facilitate
sharing across different channels
and getting personal advice while
planning with friends and family
Proprietary + Confidential
Facilitate return visits
● Allow users to easily come back to
content of interest
● Allow users to add page to home
screen to monitor prices or sign up
to get update notifications and
price alerts
● Capture the state of a site or app
in the URL that can be saved or
sent to other people. When loaded,
it restores the state of the app to
what the user was seeing
● Save recent searches to make it
easier to find the PLP again
 Proprietary + Confidential

Highlight refund conditions

specific to the current
situation
When to use: If there’s one size fits all, display a
banner on the PLP

If the new policy can be applied to all bookings, use a

small banner to notify users to give your users a feeling Cancellation
of security policy banner
 Proprietary + Confidential

Highlight refund conditions

specific to the current
situation
When to use: If your policy varies by price, make
sure to communicate that early & clearly

Highlight a clear situation-specific cancellation policy next

to the price of every product. Be clear in your message Different &
clearly stated
about what the policy means for the user cancellation
policy per
Remove flights that have been cancelled from the list or product
disable the option to book them
 Proprietary + Confidential

Facilitate return visits &

social sharing
Users need longer time to confirm travel plans in uncertain
times. Help them by:
- With the current volatility of changes & updates,
Enable
facilitate user returns & re-engagement so they can social
pursue their travel plans as soon as possible. You sharing
can allow adding the PLP to their home-screen so
they can reload their search faster, get
situation-specific notification updates/price alerts,
or get email updates Offer
notification
- Facilitate social sharing via sharing options to allow
updates / price
users to share the decision making process with alerts to
their travel-partners facilitate
- Capture the state of a site or app in the URL that decision
making and
can be saved or sent to other people. When loaded,
re-engagement
it restores the state of the app to what the user was
seeing
 Proprietary + Confidential

Product Details Page (PDP)

 4 main recommendations for your PDP*
Proprietary + Confidential

Your Goal: Clarify refund policies + Convey value proposition + Facilitate decision making

Communicate your Communicate Display relevant Facilitate return

precautionary cancellation policy travel-advice visits &
measures clearly social sharing

● Your hygiene standards ● Highlight refund & ● Link to official sources ● Facilitate social
and precautionary cancellation for up-to-date travel sharing via sharing
measures are key value conditions as part of guidelines options
propositions so make value proposition ● Display location-specific ● Capture the state of a
sure to display them close to the CTA travel advice site or app in the URL
● Link your message to ● Embed a cancellation ● Display a banner asking that can be saved or
more resources policy banner or a users to check location sent to other people.
disclaimer next to specific advice before When loaded, it
your booking CTA booking restores the state of
the app to what the
user was seeing

* Airlines and other transport solutions may not have product details pages. In that case, these recommendations should be included on the product listing pages as well
 Proprietary + Confidential

Communicate your
precautionary measures
If you’ve enhanced your procedures tell your customers
about your great efforts:
- Make it visible, communicate it close to other value
propositions
- Link your message to more resources (your
dedicated info page) for users who would like to
learn more Empathetic
message
about your
precautionary
measures
 Proprietary + Confidential

Communicate cancellation
policy clearly
This is one of the most critical pieces of info that users
look for when booking during uncertain times:
- If your CTA is above the fold, you can embed a
cancellation policy banner within your service
details/description section
- If you are using a sticky CTA, consider adding a
disclaimer next to the booking CTA

Cancellation policy Disclaimer near sticky

banner CTA
 Proprietary + Confidential

Display relevant travel

advice
Displaying relevant location-based travel advice within your
PDP can save users a lot of time searching for this info on
the web or on your site
- Make it visible, communicate it within your product In a visible
location
details/description section and not as a banner

- Link your message to more resources on your site

Link to more
(eg your dedicated info page) for users who would resources
like to learn more

- Link to official sources for up-to-date travel

guidelines

- If this is not possible, display a banner asking users

to check location-specific advice before booking
 Proprietary + Confidential

Facilitate return visits

& social sharing
Users need more time to confirm travel plans in uncertain Enable social
times. Help them by: sharing
- Facilitating social sharing via sharing options to
enable users to involve their travel-partners in
decisions Allow saving
- Capture the state of a site or app in the URL that for later
can be saved or sent to other people. When loaded,
it restores the state of the app to what the user was
seeing
- Allow saving for later/saving to wishlist so users
can view their preferred items later when they can
pursue their travel plans
 Proprietary + Confidential

Situation-specific Info Page

3 main recommendations for your situation-specific info page
Proprietary + Confidential

Your Goal: A one stop shop for all info that users need

Communicate priority info FAQs & Contact Us Allow safe exploration

● Communicate & pre-expose main
info and common FAQs first
● Main sections that need elaborate
info:
○ Updates & travel advisory
○ Cancellations & refunds
○ Precautionary measures
● Add a regular FAQ section for all
other situation-related info
● Communicate secondary info lower
down on the page
● Consider creating a summary video
to reduce cognitive load
● Add FAQs & Contact Us sections at
the end
● These sections should be included
as fallback options if users don’t
find what they’re looking for or need
more personalized consultations
● Place a Contact Us section below all
other sections to allow users to read
first and reduce your customer
support load
● Build easy navigation to allow
safe exploration (ie: getting
around with minimal physical and
cognitive load) to facilitate
discoverability
● Add main categories in page
navigation so users can navigate
easily and freely
Communicate priority info
Proprietary + Confidential

Latest Updates
Briefly & clearly communicate latest updates detailing how
your services are being affected

Clearly state & update the date so users can rest assured that
these are the latest updates & refresh your updates daily
(including weekends). You can add a CTA for users to get
notification updates

Consider creating a video to reduce cognitive load. The video

could walk users through what to expect on their journey &
your key precautions (don’t add details that are likely to
change fast so the video won’t become outdated)

Allow users to insert their destinations & give them

destination-specific travel advice rather than listing vague
advice for all destinations or overwhelming them with advice
for irrelevant destinations. Include info about: entry
restrictions, exceptions, quarantine measures, etc
 Proprietary + Confidential

Communicate priority info

Cancellations & Refunds

Emphasize your new cancellations policy

Display different support options depending on trip

timeline. Offer customer support details only for clients
with urgent enquiries and upcoming trips to reduce
pressure on your support centres

Prompt users to enter their booking reference online to

validate their trip timeline and allow dialing if their
timeline matches your criteria

Offer alternative solutions to other travellers (discussed

in the next slide)
 Proprietary + Confidential

Communicate priority info

Cancellations & Refunds

If you have an online service to change or cancel trips, use

these as your primary CTAs (make them prominent)

Always have fallback options to mitigate the risk of one

broken service. For example, the fallback option for
travellers with upcoming trips could be a Call button while
the one for less urgent queries could be an Email button

Set user expectations according to the service. If it’s

phone, then let them know it might be a long wait. If it’s
email, then let them know you will respond in <x>
business days

Ease the users’ urgency to cancel now via assuring them

that you’ll get back to their enquiries in due time and you’ll
process their request even after their trip date
 Proprietary + Confidential

Communicate priority info

Precautionary Measures

Communicate & update all precautionary measures that

you have taken to ensure user trust

Communicate all your efforts including sanitization, air

filtration, maintaining social distance, special assistance
to vulnerable groups, staff safety attire, measuring
temperature before check-in, etc

Include personal hygiene tips from official guidelines to

ensure the safety of all travellers
 Proprietary + Confidential

FAQs & Contact Us

These are the 2 sections that should cover all the
non-critical pieces of info you didn’t cover in the main
info page

Place the Contact Us option at the end of the page to

allow users to read through written info first and reduce
your customer support load while having it in an
accessible place

Set user expectations if there will be long call or chat

waiting times
 Proprietary + Confidential

Allow safe exploration

Pre-expose all your main categories to allow users to
easily navigate and safely explore this section with
minimal physical & cognitive load (minimum clicks and
thinking)
 Proprietary + Confidential

FAQs / Help Center

4 main recommendations for your FAQs/help center
Proprietary + Confidential

Your Goal: Facilitate access to all situation-specific FAQs

Include a section for Allow searching for Use credible Satisfy need for more
situation-related relevant FAQs sources info
FAQs

● Be exhaustive and ● Use a search bar to ● Mention the source ● Offer to send
cover all FAQs that are enable users to search of your information emails/notifications to
not frequent enough to for and find relevant ● Use credible keep users updated with
be categories on your information within the sources to build info that could facilitate
dedicated info page FAQ page user trust their decision making and
● Link to more resources ● Include search ease their anxiety
whenever relevant suggestions based on ● Collect feedback about
● Have a Contact Us frequent and past the usefulness of your
fallback option at the searches or user FAQs
end of the page to location
allow users to read
content first
 Proprietary + Confidential
Include FAQ in
Include a section for hamburger
menu with 2
situation-related FAQs subcategories,
one of which
is situation-
related FAQS
Be as exhaustive as possible in covering all FAQs that
are not big enough to be stand-alone categories on
your dedicated info page Search bar

Highlight the most popular questions first

Categorize
Don’t be afraid to cover FAQs when the answers are
already covered in the dedicated info page and link to
Can use same Separate
it whenever relevant
color between
situation-spe
You can use the same color code as a visual cue for cific FAQs
and all-time
faster recognition
FAQs

Use a search bar to facilitate searching for and finding

relevant info
 Proprietary + Confidential

Allow searching for

relevant FAQs
Single-step
breadcrumbs
Use a search bar to enable users to search for and find
relevant information Suggestions
based on user Search bar
Include search suggestions based on frequent and past location
searches or user location

Allow easier navigation by implementing single-step

breadcrumbs

Other
If your FAQ page is long, use a sticky search bar or a
suggestions
‘scroll to top’ button based on
user history
 Proprietary + Confidential

Refer to credible sources

Mention the source of your information - make sure Enable social

it’s credible to maintain user trust sharing
share

Reduce cognitive load by highlighting key info

Credible Highlighting
If text is too long, use a navigation summary to source key pieces of
info
facilitate easy exploration and try a bullet point format
where relevant

Enable sharing specific FAQ sections

Use a
navigation
summary
 To get feedback on
usefulness Proprietary + Confidential

Satisfy need for more info

There is no better time to offer information than when a

user is already seeking it

Keep users connected, facilitate their decision making and

ease their anxiety by offering to keep them updated via
emails/notifications

Collect feedback about the usefulness of your FAQs. You

can use this feedback to make your FAQs more useful

Ask for feedback if user

To keep users updated
did not find info useful
 Proprietary + Confidential

Other ways to keep users updated

Two other ways to keeping users updated
Your Goal: Serve users relevant updates before being asked
Send Regular Booking Updates
● Allow users to receive notifications with booking
updates
Proprietary + Confidential
Send Emails
● When sending email notifications about cancellations
communicate all info that users might care about
including updates about frequent flyer miles, how they
will be refunded, any steps they need to take, etc. Also
inform them if they do not need to do anything else.
● Include CTAs linked directly to relevant URLs. For
example, a button to “get refund” should link straight to
the refund form
● Update messaging to reflect user changes. For
example, users who choose to cancel a booking should
not receive a check-in email reminder
 Proprietary + Confidential

Communicate booking
status at all times

If the status of the booking gets changed, communicate

the booking status clearly within your UI

Make sure to list necessary links for users to learn more

details and contact the property/call centre, if required
 Proprietary + Confidential

Thank You
We’d love to hear your feedback, please submit your feedback here