On mobile checkout flow should product details be shown on review order/summary step?

Question

I am working on the checkout flow for the mobile device, and it has 3 steps, Step 1- shipping details, step 2- payment details, step 3- order summary and confirm to buy. The flow starts with cart page where user can see product info, edit it, apply coupon code etc and from here can proceed to checkout. Is it a good idea to show product info again (product image, colour, size, quantity) in the 3rd step of checkout considering the fact that checkout funnel starts with cart page where all the products with full details are shown. I am wondering if the summary page would be overwhelming with too much information to digest thus defeating the purpose of the step? Suggestions?

Answer 1

I agree with Roel in part that Cart Summary > Delivery > Payment is fine. I just wonder if you can make all 3 accessible at all time so it is sequential but you can jump back if you want? Something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

So if a user has finished the Cart section and hit 'next' or something then they can still tap the 'Your cart' tab to jump back but preserve the data that has been entered in the later tabs.

Answer 2

I think that your checkout process is clear enough without the order summary as an additional "check" for the customer. The most common process would be the following:

1. Cart Summary
2. Delivery
3. Payment
4. Confirmation/Thank you

Lots of people use their online shopping cart as an informal shortlist. They are basically curating the contents of their order after putting it together and then decide to act on it or not. If they do, you want to roundup the process as smooth as possible:

Delivery > Payment > Confirmation

Answer 3

I second @dnbrv in the comments. Just do a one page checkout experience, and minimize the fields. Always keep in mind that any checkout experience is a stressful experience (need to put in sensitive information, need to get the address correctly, etc), and you need to do what ever it takes to make it an easy checkout experience.

Amazon implemented an interesting flow: You just need to confirm the your order and pay then and there. They skipped everything else (mainly because they already have everything saved, but this gives you an idea of minimizing the friction).

If you implement a one page checkout experience, I would highly suggest firstly to show the products that they are buying front and center (with the price breakdown and how much it will cost them in the end with taxes, shipping and other fees). Then break it down with shipping information, billing information and finally a confirmation section (summing up everything).

Best of luck!

Answer 4

Best thing you can do, is

1) Give users brief description/photo and price of the product, which will takes them into Product details screen if they want to - after click

2) Prepare prototype/mockups of the checkout process and just take few rapid usability tests - it will answer your question even better then any declarative studies/surveys etc.

Good luck ;)

Answer 5

It's a good idea to give a quick summery on the confirmation page as the user will want at this point an overview of the transaction and to know what is being paid for. this is in fact the goal of this page.

However as Baymard Institute's excellent Check Out Usability Study recommends

Keep the elements around the checkout form to a bare minimum so customers can focus on paying for their products.

This is how Amazon does it

Answer 6

NO need to show all details. Just Product thumbnail, name and quantity.

Customer has already made up his mind to buy something and that is why he has put it in his cart. Also showing too much information may distract the customer.

This is my opinion. You can consider A/B test. I was doing this study and research for more than 3 months for my company and finally designed a new one which is delivering more business.