Trip summary
The trip summary pattern is used to show an overview of a trip in a detailed scenario. It includes the flights themselves, status scenarios such as on time, delayed and cancelled and other flight attributes if necessary.
Anatomy
Flights and trips
On BA.com, there is a difference between flights and trips. This pattern should give the flexibility to show all of these in a scaleable and accessible way.
- Flights (or legs) are a single sector of a trip. Flights are assigned a flight number, route, departure/arrival times and status.
- A trip is made up of multiple flights, be it multi leg or a return (sometime referred to as round trip). These are demonstrated in the example below. It is not uncommon for trips to have 3+ flights in them.
The way we demonstrate all these features in this pattern can be seen below.
Flights
1024+
320 - 1023
Connection or stopover
Anatomy of a connection or stop can be seen below. Add any additional context that the customer might find relevant.
X hours XX minutes until your next flight
In {City}
Trips
A trip may be made up of multiple flights, with multiple connections. Various examples are shown below.
Showing a flight with reduced or unavailable attributes
Should information about a flight be unavailable, hide the required information when necessary to reduce cognitive load. Please note, the status of a flight is always “scheduled” until at least 24 hours before the flight.
Showing a trip - with stops or connections
To demonstrate a stop or connection, use a card with ba-media-object in between each flight.
2 hours 30 minutes until your next flight
In Singapore
Showing a trip - with important information
Should there be important information about their journey that we need to convey to the customer, such as a change in airport, or a long connection time, use the ba-message component to demonstrate this.
2 hours 30 minutes until your next flight
In Singapore
Your next flight departs from a different airport
You will need to transfer to another airport for your next flight. This transfer is not included in the price of your fare..
Showing disruption
Delayed flights
In the instance of a delayed flight, use the error tag to show the estimated departure and arrival time in red.
Cancelled flights
In the instance of a cancelled flight, use ba-message and the critical error tag to convey this. Remove any irrelevant information of the cancelled flight and replace it with messaging about rebooking and cancellation.
If one leg of a multi stop flight is cancelled, use only one card. This is because if one leg is cancelled, so is the other one. See the example below.
Your flight to Sydney on Thursday 11 June has been cancelled
We’re sorry but this flight has been cancelled. We couldn't find new flights automatically which might be due to limitations in our booking services. Please use our service to search for alternative flights.