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.
We explored what other checkouts do in terms of user expectations, specifically around how many steps, where users can edit sections and what is needed in an order summary. Most of these aspects were talked about in our user testing research so we had qualitative evidence to inform our design approaches.
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