Demandware - Converting Multi-steps Checkout to One Page Checkout

Overview

Recently, we had a mini project to replace our multi-step checkout page into a new one-page checkout.

Our last checkout process consist of 4 steps. After items are added to the bag, the checkout process as follow.

1. Login or Checkout as Guest
2. Shipping
3. Billing
4. Confirm 

As observed, it is clunky and takes a lot of reading, typing and waiting before one can reach to the end and place an order. In our new design of one page checkout, we optimized all our intermittent calls in ajax so that the overall user experience is smoother. Using only one page to taking care of what we previously can only be achieved by using 4 checkout screens.

Challenges

There were a few challenges and stress points in this project. 

• The consequence of breaking a check out page is high.
• Not many people have done an one page checkout in Demandware.
• I was getting a lot of 500 internal errors thrown within Demandware and there were no logging or error messages available
• Debugger tools doesn't stop at break points when 500 error thrown.
• Our team is relatively new in Demandware.
• And I am relatively new in Demandware too.

Technical Overview

Pipeline

We created a new pipeline to handle our new checkout. Some of the intermittent calls are either reusing existing pipelines or newly created.

Firstly and noticeably in our new pipeline, that the end journey is no longer an Interaction Continue Node nor Jump Node. It is replaced by an Interaction Node. This is because in our isml template, we use a bunch of <iscomponent> to do dynamic include of different checkout steps onto the one page, and these pages will have their own ajax post back.

While we are consolidating our new checkout process, we are also trying not to lose any existing functionalities. For example in our Start Node, we will call the old checkout pipelines like COCustomer-PrepareCheckout to make sure our form is prepared for the checkout process like we used to, then we will call our customized OPCheckout-PrepareCheckout pipeline for any extra functionalities. The pdicts are also updated as we post back our form.

SCM

There were about 120 files changed in our source code. We only created one file for our new pipeline, but still many new files due to template and css changes. We also retrospectively changed some of the exit points in some of our existing call nodes, they are now returning a proper error end node to the calling pipeline, so that all the jump nodes are now managed in one main pipeline only. No more yelling and screaming why an user redirected to an unexpected jump node again. :)

Conclusion

Our conversion rate slightly increased and our checkout funnel drop rate also moderately decreased. Although we have not yet received enough data sampling to conclude anything at this stage, but we are very confident and positive with the new checkout. And, we already receiving some good feed backs from people about the new UX design, and that's winning!!

2017 Updates

Just a quick update on my old post, this one page checkout project has led to more than 10% increase in conversion rate. This is equivalent to more than $1M increase for a business with $10M turnover.