With the Shopping Cart functionality added to our prototype, we are now ready to create our checkout flow with interactions. Our check out flow will provide a progress indicator with three states and an additional confirmation page. To accomplish this, we will create a Check Out dynamic panel with four states.
In this chapter, you will learn about:
Creating our Individual Form Field master
Defining the Check Out dynamic panel
Designing the SignIn state
Designing the PaymentAndShipping state
Designing the PlaceOrder state
Designing the Confirmation state
Our Check Out dynamic panel will contain a streamlined header. The streamlined header will only have our logo and a process indicator. The goal for the Check Out page and dynamic panel is to remove visual clutter thereby reducing distractions. This approach allows the user to focus on completing our checkout flow.
We will create an Individual Form Field master to reduce the complexity of building our forms...