Flight: Roundtrip

The most sophisticated component within our Travel Itinerary system.

In this page

August 15^th, 2025

Chronologically Refined

Challenge

Specifically engineered to address the unique complexity of roundtrip flight bookings. Unlike other travel components that exist as standalone entities, roundtrip flights present a fundamental design challenge:

1. They are purchased as a single booking
2. Must be experienced as two distinct travel moments separated by days.

Solution

The solution is to elegantly decompose these unified roundtrip bookings into separate, contextually‐aware cards that maintain their logical relationship while allowing each flight segment to appear at its appropriate chronological position within the itinerary flow.

August 15^th, 2025

Core Design

Contextually‐Aware Cards

This approach transforms how travelers interact with their roundtrip bookings—instead of viewing departure and return flights as a monolithic block at the top of their itinerary, each flight segment now integrates seamlessly into the natural timeline of their trip, with departure flights launching the journey and return flights providing closure to the travel experience.

UX Innovations

These design patterns will ensure the traveler will be able to scan the flight data within long itineraries while preserving the integrity of complex flight booking relationships.

• Route Badge System ‐ The "FCO → LAX" and "LAX → FCO" badges provide immediate directional context, allowing users to quickly distinguish between outbound and return segments without reading detailed flight information.
• Shared‐trip Visual Connection ‐ The "ROUNDTRIP TO ROME" tag creates a clear semantic relationship between separated cards, ensuring users understand these flights are part of a single booking despite their physical separation in the interface.
• Contextual Photography ‐ Strategic image selection reinforces the directional narrative of each flight segment: the DEPART card features an aircraft ascending through clouds, symbolizing the beginning of a journey, while the RETURN card shows an aircraft in descent, communicating the conclusion of travel.
• Reference Bar Treatment ‐ The reference text ("For total cost and details, see LAX → FCO flight above") on the return card establishes a clear hierarchical relationship, indicating which card contains the primary booking information while maintaining visual consistency.
• Information Architecture ‐ Each card maintains complete flight details (times, airports, connections, traveler information) to function independently, while strategic visual cues preserve the logical relationship between segments.

August 30^th, 2025

Depart Card

Gateway to the Travel Experience

Featuring an ascending aircraft image that symbolizes departure and adventure, this card contains all essential flight details while setting the visual and informational tone for the entire trip. As the primary card in the roundtrip pair, it houses the complete booking information, confirmation details, and total cost.

August 30^th, 2025

Return Card

Elegant Closure to the Travel Narrative

This design treatment acknowledges the card's secondary role in the roundtrip relationship while ensuring users can easily navigate back to the primary booking information when needed, creating a cohesive end‐to‐end flight experience within the broader itinerary context.

August 30^th, 2025

Expandable Section

The expandable section reveals detailed passenger information. The passenger cards elegantly combine essential travel information‐full names, age categories (Adult, specific ages for children), and assigned seat numbers‐into cohesive visual units.

August 15^th, 2025

Download Photos

Contextual Photo for Depart

Contextual Photo for Return