VRBO Checkout Flow
Design updated for the VRBO Checkout flow.
In this page
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
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.
- We elegantly arranged this section into two compartments.
- The compartments are indicated by a blue border.
- The checkbox has a blue border to provide visual visibility
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
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