Flight Booking Experience

    Premise: Increase business conversion (sales) of casual travelers by providing better booking and check-in experiences


    Goal: A booking/check-in console that accounts for indecision


    Challenges:

    1. Lack of data caching when switching between flight, hotel, car, vacation tabs

    2. Overwhelming amount of icons and links

    3. No clear separation between "booking" and "check in/modify reservation" activities


    Challenge #1 - No Data Cache


    When attempting a booking, switching the type (for example from flight to vacation), entered information such as date/location are lost.


    BEFORE: Info entered under Flights doesn't carry over to Vacation packages

    Additionally, switching between the booking tabs (flight/hotel/etc.) triggers different entry field layouts. The user is forced to re-enter data but is also disoriented by the new location of the fields.



    Solution to #1


    I kept the entry field layouts consistent and the entered info cached between tabs for a seamless experience. When users are switching between different types of booking, they are not being punished for the indecision.


    AFTER: Smart data saving allows user to continue browsing without re-typing

    Issue #2 - Too Much Decor, Not Enough Context


    Sporadic use of icons is an effective way to direct attention to certain areas but the original booking simply has too many icons and too much going on.


    BEFORE: Too many links, icons, options

    Solution to #2


    For better accessibility, I replaced the shadow borders with a light gray box to create better contrast between the box and the background of the container


    AFTER: High contrast for the entry fields and helper text direct the users' attention

    In addition to helper text in the entry fields, I added auto suggestions upon typing to give further guidance.


    AFTER: Location suggestions

    Issue #3 - No Clear Difference Between Booking and Checking


    At this point, the user either has already booked with Southwest or is only interested in checking a flight status so having the additional car/vacation booking here is irrelevant.



    Solution to #3


    I combined Check In and Modify since both actions required the same fields of information. This layout allows for the decision to check in or modify be made after the information has been entered.


    Before

    After