Flight Results Prototype
Requirements
Encompass all existing features of the flight application, specifically surrounding fare tiers, policy, dynamic filtering, and fare comparison. The design should be modular to allow for easy updates and maintenance. The design should also be responsive, ensuring a seamless experience across various devices and screen sizes.
Research
Reviewed Google Flights, American, Alaska, Southwest, Delta, and United airlines' customer-facing websites. Additionally, reviewed third-party consumer sites such as Expedia, Kayak, Kiwi, and others to gain further insight into the user experience.
The Challenge
Provide an experience that surfaces pertinent information in a simplistic, cohesive manner which minimizes any potential confusion. The intent of each flight object is to direct the user to make the appropriate choices based on corporate and personal needs.
Complex Flights
Displaying complex flights where more than one connection is possible, it has multiple carriers, or flight tiers that deviate from the selected or contracted fare needed to be displayed within a single flight object. This required a robust approach to meet the various scenarios that could arise for a given flight. The solution was to present the user with a clear hierarchy of information that is easy to digest, while providing an intuitive way to display additional information as needed.
Wireframes
Research & Results
Research cues came from Google, Delta and Alaska Airlines that inspired the final design.
Filters UX
Acceptance Criteria: Add option for displaying fare tier, stops, flight times, and, other filter options that could be configured to be displayed above the flight objects. The chevron icons (< / >) are used for stepping of predefined values. The user also has the option to select the filter when hovering the filter title to expand the available options.
User Experience: When a user hovers over the filter title, the filter options will expand to display the available options. The user can then select the desired option and the flight objects will update to match the selected filter. The user can also use the chevron icons to step through the predefined available options. The filters should float as the user scrolls down the page, allowing for easy access to the filter options at all times.
Flight Times UX
Acceptance Criteria: When a user has selected a specific time stepping (e.g. 06:00 - 08:00), the flight results will update to display the available flight options.
User experience: Let's assume the user is going to update the flight time for departure. The user makes their changes and the flight objects update to match the selected range while others not matching would be hidden from view. The user can always reset the filter to view all available flight options. They can also use the chevron icons to step through the predefined available time ranges that are from the original search results data.
Complex Flights
To enhance the user experience, informational icons, textual color treatments are used to convey important details such as a burnt yellow text style indicating an alternate arrival or departure airport than originally selected, a red "out of policy" ban icon (), and a red extended layover warning icon () to alert the user of potential issues with their flight selection. These visual cues help users quickly identify important information and make informed decisions when selecting their flights.
Enhancements
- While displaying the pertinent flight info, organize the available flight tiers below the main flight info.
- To maintain a version of the existing experience by displaying flight tiers at the top, but enhance the UX by the use of font color and font weight to be a visual indicator, thereby showing which fare tier best matches their search criteria, as well as the fare contract if applicable.
- Increase separation of the flight item results using whitespace, the flight item should be expandable to display additional information such as amenities, flight times, layover(s), while maintaining the ability to show more flight options to the user, reducing the need for scrolling through multiple page results.