The Product and Design team have been working on improvements to the checkout process which was initially informed by two issues Checkout & Next button jumping and technical performance needs around costs in the checkout and finally, from a piece of usertesting research for the Checkout & Next button.
Our key scope/constraints were:
No huge structural User Interface changes to keep front end and back end dev reasonably quick and easy and try to use existing UI as much as possible.
The delivery details, payment fees and any ‘final’ payment summary must happen on different pages between button click to improve performance.
There must be an order summary page and it must be compliant to the “Double-Click-Rule”: EU law requires a checkout process to have an order summary page. Details on this law in the issue here.
We also tried to make these pages more ‘mobile friendly’.
You should be able to view the screens in a design software called Figma here.
Please note there are no changes in the edit basket, shop front-pop-out-checkout and final order confirmation page which is not included in the screens. The info included in delivery and payment sections have been compiled from various UK based OFN stores.
We’re looking for community feedback specifically on:
- Are there any critical problems raised for your instances and/or producers in this work?
- Within these screens, are there any key paths users take that are not covered?
We’ll conclude community feedback in 1-2 weeks depending on how quickly we get responses