General Rules

• If all the criteria for a form have not been met any
submit/continue buttons will remain in their inactive In-active state
state.
• If a user tries to press an inactive button, the form
fields that do not meet the necessary criteria will have
a bed border with a description below the field Active state when all field
explaining the necessary criteria. criteria have meet met.

- Border 1px solid

- Border colour #F57D32
- Label text colour #F57D32

Alexander Foster
 General Rules

Keyboards Active fields

• For phone number text fields always display numeric keyboard only • Active text fields must show a blinking cursor
• For email address fields always display email keyboard • Display a solid 1px border #ED298B
• For date text fields always display numeric keyboard only and use
blocking with slashes e.g 20/06/2020

Alexander Foster
Splash screen

Alexander Foster
 • Upon load of Home Screen – skeleton state
screen skeleton
animation plays
until dynamic
content has been
loaded.
• Four rows of • During skeleton
pagination animation ‘Find a
graphics. flight’ field is
tappable.
• Upon tap user
will be taken to
• If content fails to load due to an ‘Select departure
error e.g connectivity problem
airport’ screen.
• Skeleton graphics will be removed
• Tap triggers
• An error message will be displayed
page transition
• A circular refresh button will be
animation.
displayed which can be tapped. • Screen transition
animation to last
• Tap triggers fly 0.3s
out of floating
navigation menu. • Tap triggers fly
• Contains profile out of floating
functions. navigation menu.
• Animation • Contains main
duration 0.2s menu functions
• Animation
duration 0.2s

Alexander Foster
• Upcoming flight cards
are only displayed if
user is logged in and
has a flight in less
than 10 days.
• Upcoming flight cards
will always be
displayed at the top
of list.
• If multiple upcoming
flights these will be
listed in chronological
order.
• Entire card can be tapped by
user.
• Upon press the destination
card changes to a pressed
state.
• Upon tap user is taken to flight
deal screen.
• Entire card can be tapped by
user.
• Upon press the destination
card changes to a pressed
state.
• Upon tap user is taken to
content screen.
• Tap triggers fly out of
floating navigation
menu.
• Contains profile
functions.
• Animation duration
0.2s
Home Screen – loaded state
• Upon tap user will be taken to
‘Select departure airport’ screen.
• Tap triggers page transition
animation.
• Screen transition animation to
last 0.3s
• On press, colour darkens.
• User is taken to relevant check in
screen.
• Screen transition animation to
last 0.3s
• If check is not yet available
button will be greyed out and in-
active.
• On press, colour darkens.
• User is taken to manage booking
screen.
• Screen transition animation to
last 0.3s
• Tap triggers fly out of
floating navigation
menu.
• Contains main menu
functions
• Animation duration
0.2s
Alexander Foster
 • Upon loading the fly
me from text field is in Search flight form – initial loaded state
selected state.
• Standard text • Default tab is always Return
keyboard will be flight.
• If One-way is tapped the return
available on screen
date field and label will collapse.
load
• If the multi-city tab is selected the
• When text fields are
in their active state additional multi-city will load.
their border will turn (See contents for relevant
screen)
pink and cursor
active.

• If app has geo-positioning

enabled the nearest airports
will be shown above the main
airport list.

• When a user taps an airport the

the airport name will populate the
text field. The keyboard will slide
down and the text field
deactivate.
• Entire row is tappable including
• As the user types the the flag icon.
nearby airports
disappears and
airports in the A-Z will
filter.

Alexander Foster
 • Back button triggers screen
Search flight form – Fly me from entered
change animation. • Default tab is Return flight.
• Animation duration 0.3s • If One-way is tapped the return
date field and label will collapse.
• If the multi-city tab is selected the
additional multi-city will load.
• Upon loading the fly (See contents for relevant
me from text field is in screen)
selected state.
• Standard text
keyboard will be
available on screen
load
• When text fields are
in their active state
their border will turn
pink and cursor
active.

• When a user taps an airport the

the airport name will populate the
• There is no default date value text field. The keyboard will slide
down and the text field
deactivate.
• Default is 1 traveler • Entire row is tappable including
the flag icon.
• Default is Any Stops

• Until all form criteria have been

met the search button will
remain in the in-active state.

Alexander Foster
 Search flight form – Select destination airport

• Upon tapping the Fly

me to text field the
screen contents will
shift so the label Fly
me to is 12px below
the tabs.
• As a user types the
airport A-Z list filters.
• Airport lists are
always listed in
alphabetical order

• When a user taps an airport the

the airport name will populate the
text field. The keyboard will slide
down and the text field
deactivate.
• Entire row is tappable including
• Regular QWERTY keyboard is the flag icon.
displayed for Return flight field
• When an airport is selected the
textbox will return to normal
state. Keyboard will slide away
and airport list will disappear.

Alexander Foster
 Outbound calendar UI
• Dates with no flights will be
shown in a lighter grey text.
(#cdcdcd)
• If there is no availability on a
particularly day then will also be
greyed out and not possible to
• Upon tapping the select.
date field the date
picker UI will be
displayed on a flyout
that slides up from
the bottom. • Cheapest flight available for that
• Time of animation day.
0.2s

• The current month is always

shown.
• It is not possible to navigate to
previous month • If a date isn’t selected the ‘Apply’
button will remain in inactive
state.

Alexander Foster
Outbound calendar UI Selection

• When the user selects a date a

pink circle background will
appear and the text will change
to white colour.

• Once a valid date has been

selected the Apply button will
enter normal, pressable state.

Alexander Foster
 Passenger flyout UI

• Background of previous screen

becomes translucent.
• Background blur amount 6,
opacity 26%

• Upon tap the Traveler flyout UI

• Default value is 1 Adult. Minimum
will slide up from bottom.
value is 1. Maximum number of
• Animation duration 0.25s
adults is 8.
• If value is 1, minus sign will not
be visible.

• As the number of passengers is

increased the app must check
the cloud app to see how many
seats are left. The user cannot
exceed number of remaining
seats.
• Default values for children and • If so a OS native warning dialog
infants is 0. It will not be possible will appear stating ‘Due to current
to proceed with a booking if there seat availability you cannot add
are no adult passengers. any more additional passengers
to this booking.’

Alexander Foster
 Number of Stops flyout UI

• Background of previous screen

becomes translucent.
• Background blur amount 6,
opacity 26%

• Upon tap the Number of Stops fly

out UI will slide up from bottom.
• Animation duration 0.25s

• Default value is Any Stops.

• It is only possible to select one • Apply button will never be in in-

option. active state on this screen/

Alexander Foster
• Upon load of Flight results skeleton
screen skeleton
animation plays • Triggers passenger number fly • Upon tap OS native share
out UI. Animation 0.25s functionality is triggered.
until dynamic
content has been
loaded. • Triggers number of
• Four rows of stops fly out UI.
Animation 0.25s
pagination
graphics. • Upon tap the save icon will fill
pink. On additional tap icon will
return to default state. Both the
icon and text label are tappable.

• If content fails to load due to an

error e.g connectivity problem
• Skeleton graphics will be removed
• An error message will be displayed
• A circular refresh button will be
displayed which can be tapped.
• If no flights are available a
notification will be displayed.

• Filter button is greyed out and

not tappable unless more than 2
search results load.

Alexander Foster
 Flight results screen
• Triggers passenger number fly • Upon tap OS native share
out UI. Animation 0.25s functionality is triggered.

• Triggers number of
• Flights are always stops fly out UI.
sorted by lowest price Animation 0.25s
to highest price

• Upon tap the save icon will fill

pink. On additional tap icon will
return to default state.
• Upon tap the ‘card’ will expand. Animation
duration 0.2s.
• Once the card has expanded the the • User proceeds to next stage by
tapping a flight.
additional information opacity changes
• This triggers a screen transition
from 0% to 100%. (Duration 0.1s)
(0.3s)
• As the card expands the chevron in the
circle rotates 180 degrees and the
accompanying label changes from ‘More
Details’ to ‘Show Less’.
• On further tap the animations reverse
using the same time scales.
• Filter button is greyed out and
not tappable unless more than 2
search results load.

Alexander Foster
 Flight summary screen

• Animation 0.25s
upon load

• Currency is default • Upon press launches

based on user’s Luggage selection UI
phone settings e.g £ • Animation duration
for GB user, Euro for 0.25s fly up from
Ireland user bottom
• User can change
• Upon press
currency defaults in
navigates to
app settings which
passenger
must reflect here
information screen
• Screen transition
duration 0.3s

Alexander Foster
 Passenger details screen
• Fixed UI elements that stay on top when user
scrolls.
• If a user presses back to look at the flight
summary, what they have entered into the
form will be saved for this session.
• If a user is logged into the app the lead
passenger details will be auto filled.

• When a text field is active the border will be

pink. The screen will auto scroll so the the text
field and keyboard are visible at the same
time.

• There is a section for each passenger. E.g 1

passenger – 1 section, 3 passengers - 3
sections. • Numeric keyboard
• On type chunk numbers in the given format
and add the slash (/) after the date and month
have been entered.

• These fields uses a numeric keyboard

• Validation occurs after cursor has left field,
when input does not match standard phone
number format. Error message: “Please enter
a valid phone number”.
• On press drop list of countries is displayed.
(Standard OS list)
• Countries are listed in A-Z except for the
user’s locale which is obtained from the
device which will always appear at the top of
the list.
• When in active state border will be pink.

Alexander Foster
 Passenger details screen – continued

• Continue button will remain inactive until all

the form fields have been completed correctly.
• If the user tries to press the button in this
state, all relevant fields borders will highlight
red with corresponding error message
underneath.

• When all the fields have been filled correctly

the continue button will revert to default
pressable state.
• The continue button is fixed in position at the
bottom of the screen regardless of how the
user scrolls the form.
• Upon pressing continue there is a 0.3 second
screen transition and the user is taken to the
payment screen.

Alexander Foster
 Payment Screen (user logged in with saved card)

• Page transition animation 0.3s

ease in and out.
• Price must be in user’s currency.

• Upon tap show

Payment break
down elements.
• Animation duration • Display email keyboard.
0.3s ease in and out. • Ensure an email address has
been entered using a valid
format.
• If not display message ‘Please
If user is signed in autofill enter a valid email address.’
first + last name and email
address
• If user is signed in a valid in-date
card has been saved to the
account display the ‘Use Saved
Card’ UI elements.

• Payment button inactive on load.

Alexander Foster
 Payment Screen (not logged in or no saved card)

Errors:
• If payment was unsuccessful display
orange label below ‘Card Details’ label • Price must be in user’s currency.
stating. ‘Payment was unsuccessful
please try again.
• If payment was unsuccessful display
orange label below ‘Card Details’ label
stating. ‘Your card was declined, please
try another card.’ • Display email keyboard.
• Ensure an email address has
been entered using a valid
format.
Numeric keyboard only. • If not display message ‘Please
Use card auto formatting for Visa/Mastercard or
enter a valid email address.’
Amex (15 / 16 digits).
After the user has written the first four digits
determine if the card is Visa/Mastercard or Amex.
Then grey out the other card icons.
Upon deactivating verify the card number format. If it • Display numeric keyboard
is incorrect display in a text label below ‘Please enter • If Visa/MC only allow three digits to be
a valid card number.’ entered
• If Amex allow four digits to be entered
• If CVV is invalid upon submit highlight field
in orange and display error label ‘Please
• If an expired card date is entered enter a valid CVV number.’
displayed the error label below
the text field ‘Please use a valid
in date card.’ • Payment button inactive on load.
• Display a numeric only keyboard.
Use blocking and automatically
add the / between mm and yy

Alexander Foster
Booking complete screen

• Animation on page load 0.25

seconds

• Display email keyboard.

• Ensure an email address has
been entered using a valid
format.
• If not display message ‘Please
enter a valid email address.’

• If user is signed in a valid in-date

card has been saved to the
account display the ‘Use Saved
Card’ UI elements.

• Always active.
• Upon press return to Main
Screen, animation duration 0.3s

Alexander Foster