Booking Wizard: VRBO

A new and improved wizard that leads the users through a series of well-defined steps.


In this page

New

Floating Labels

With the mandate of UX clarity and the reducing UI clutter, we are switching from Top Align Labels to Floating Labels. This change will reduce the number of elements on the UI: therefore, the user will be able to process the data on the page easier and faster.

Datepicker

IMPORTANT The datepicker on the prototypes is NOT how it should function. GO to Annotations at the bottom of this page for clear instructions.


VRBO Adjustments: June 26

General

We made important adjustments to the booking wizard. The latest enhancements will propel the wizard to the level of the Expedia booking wizard.

Labels

  • Code adjustments have been in Bootstrap with classes.
  • The labels now have proper spacing for visual effectiveness.
  • See code instructions in the card below.

Field Behaviour

We now have proper user behaviour for the input fields. This is leaps and bounds from the current booking wizard on Classic Vacations.

  • Click anywhere on the field and it the blue border appears letting user know it's ready for inputting information.
  • Date picker fields: Click anywere and the date picker appears.
  • See code instructions in the card below.

Date Picker

We enhanced the date picker experience for optimal effectiveness. See code instructions in the card below.

See the difference!

  • Date Picker Fields
    • At the initial visit of the Date Picker, the 'Check Out' field will be disabled. This encourages the user to begin with the 'Check In' field.
    • In addition, when user refreshes page, the 'Check Out' field will be disabled.
    • User clicks anywhere on the Date Picker fields
      • The calendar icon changes from gray to blue
      • The Date Picker appears
  • We have enhanced the styling of the calendar widget.
    • White spacing for a more elegant appearance
    • New arrows implemented
    • Font adjustments
    • Close link added
    • Blue caret (upright arrow) is positioned elegantly on calendar
Code & File Instructions
Instructions: Files

jquery-ui.js

  • Line: 8266
  • Line: 9216-9
  • Line: 9226-9
  • Line: 9236-7
  • Line: 9236-7

cc_booking_wizard.js ha_booking_datepicker.js

  • Line: 20-22
  • Line: 37-39

jquery-ui.css

  • Line: 10-18

datepicker.1.7.css

  • copy whole file

style-booking-wizard.css

  • Line: 546-553 button
  • 150-164 label/icon restyling

Regarding the Floating Labels

(icon is moved in with the label)

                  <div class="form-group float-label-control">
                      <label for="Checkin_Date">
                      <span class="label">Check In</span>
                      <i class="far fa-calendar-alt" ></i>
                      </label>
                      <input autocomplete="off" name="Checkin_Date" id="Checkin_Date" type="text" placeholder="mm/dd/yyyy" class="form-control required" value="" required data-datepicker="startRange"/>
                      </div>                 
                  
                

Quick note: By moving the label text and the icon tag inside the whole label div, this will make both clickable on and part of the input. But some restyling will have to be done to put the calendar icon back. Make sure the label for attribute (for=””) is equal to the name of the input for this work as well.

  • 84-88 (same as above) for the calendars in the expand hotel part of stay

Color
  • #245abc -- vrbo blue
  • #f18141 – classic orangee
  • #90949A – grey of font awesome icons
  • #007bff – expedia’s blue

The VRBO Booking Wizard prototype is completed and uploaded:

SEE REVISED PROTOTYPE