VRBO Checkout Flow

Design updated for the VRBO Checkout flow.

In this page

Important

Agreement Section

I had several discissions with Jonna regarding the agreement section.

  • VRBO House Rules
  • Classic Vacations Rules & Regulations
  • Classic & VRBO Understanding

Jonna emphasized the importance of confirming that the user has read (or recognized) the items in the list above. We have completed a design that meets the requirements from Jonna.


Checkout Step 1: July 03

General

In this iteration, we focused on AGREEMENT section of the Checkout Page. How we do we display 3 items of rules, regulations, and understanding in an elegant fashion; and most importantly, a positive user experience.

Agreement Sections

  • We elegantly arranged this section into two compartments.
    • VRBO
    • Checkout
  • The compartments are indicated by a blue border.
  • The checkbox has a blue border to provide visual visibility

Blue Checkbox

Per the business owner, Jonna, directions. We have produced a design to 'encourage' the user to read each compartment. We have elegantly achieved this with an modal window that requires the reader to scroll down to Accept the Rules & Regulations.

  • User must click on the VRBO and Classic Vacations checkbox.
  • THe UI displays Alert Messages if user has not checked the checkboxes.

We have included several alert changes. This screenshot shows the states.

Revised Step 1 for Checkout flow:

SEE REVISED PROTOTYPE

Checkout Step 2: July 03

General

We understand an iframe will be utilized to display the credit card formy VRBO. The Step 2 UI shows the layout and positioning for the iframe. In addition, there a few CSS style elements to note.

Revised Step 2 for Checkout flow:

STEP TWO PROTOTYPE