Order summary page for B2B
e-commerce
Order summary page for B2B
e-commerce
Order summary page for B2B
e-commerce
The order summary is like a one-stop shop for all the important stuff about a customer's order. You can find out the status of your order and payment, see what you ordered, and even track your shipments, all in one place!
The order summary is like a one-stop shop for all the important stuff about a customer's order. You can find out the status of your order and payment, see what you ordered, and even track your shipments, all in one place!
The order summary is like a one-stop shop for all the important stuff about a customer's order. You can find out the status of your order and payment, see what you ordered, and even track your shipments, all in one place!
Design brief
Order summary is a single-view for a customer order comprising of:
Order details (Order status, order number, order date, order total amount)
Seller details (seller name, seller pickup address in case of seller pickup)
Payment summary (Order total, ledger balance used, total amount received, payment due now, credit amount used, advance payable, taxes, freight charges, etc.)
Make payment (Order total, payment method choice, ledger balance check)
Delivery details (Shipping method, shipping address, billing address)
SKU details (variant, quantity, per UoM and total ordered price, delivery timeline (in case of shipping method = delivery))
Shipment details (SKU, quantity to be shipped, scheduled departure date, shipment value)
Order summary is a single-view for a customer order comprising of:
Order details (Order status, order number, order date, order total amount)
Seller details (seller name, seller pickup address in case of seller pickup)
Payment summary (Order total, ledger balance used, total amount received, payment due now, credit amount used, advance payable, taxes, freight charges, etc.)
Make payment (Order total, payment method choice, ledger balance check)
Delivery details (Shipping method, shipping address, billing address)
SKU details (variant, quantity, per UoM and total ordered price, delivery timeline (in case of shipping method = delivery))
Shipment details (SKU, quantity to be shipped, scheduled departure date, shipment value)
Use cases
Core use-cases that we wish to solve for the MSMEs
Accessing order summary with on-screen notification to make pending payment
Allow for downloading the order summary PDF
Order summary PDF shall contain the most recently update order, payment, delivery, SKU, seller and customer VAN details
Order summary PDF shall not contain the shipment data
Allow for sharing the order summary PDF to any other email recipient
Manual check for ledger balance in case auto-reconciliation failure
Automatic order placement (make payment section gets hidden) if ledger balance > order amount payable
View multi-seller SKUs on the order summary
View shipments under each seller along with shipment documents that can be downloaded from the order summary
Allow customer to add delivery instructions as part of the order
Core use-cases that we wish to solve for the MSMEs
Accessing order summary with on-screen notification to make pending payment
Allow for downloading the order summary PDF
Order summary PDF shall contain the most recently update order, payment, delivery, SKU, seller and customer VAN details
Order summary PDF shall not contain the shipment data
Allow for sharing the order summary PDF to any other email recipient
Manual check for ledger balance in case auto-reconciliation failure
Automatic order placement (make payment section gets hidden) if ledger balance > order amount payable
View multi-seller SKUs on the order summary
View shipments under each seller along with shipment documents that can be downloaded from the order summary
Allow customer to add delivery instructions as part of the order
User flow
Competitive analysis
Amazon
Our current website has a similar flow as amazon eg- My orders - view order details
Amazon is using different terminology. As per our ongoing discussion regarding order summary, Amazon uses My order to show order listing of different orders as per SS below
Our current website has a similar flow as amazon eg- My orders - view order details
Amazon is using different terminology. As per our ongoing discussion regarding order summary, Amazon uses My order to show order listing of different orders as per SS below
Your orders consist of
Search your orders with a search bar & search CTA
Search your orders with a search bar & search CTA
Tab structure for switching between Orders, Buy again, Not yet shipped, canceled orders (Good to have feature)
They also show how many orders you have placed in a particular year (Good to have feature)
Tab structure for switching between Orders, Buy again, Not yet shipped, canceled orders (Good to have feature)
They also show how many orders you have placed in a particular year (Good to have feature)
Clicking on view order details takes us to that particular order details page which has information like
Ordered on
Order number
Shipping address
Payment Method
Order summary (Payment details)
Invoice which has invoices/documents based on the products
Write a product review
Buy again button
Clicking on view order details takes us to that particular order details page which has information like
Ordered on
Order number
Shipping address
Payment Method
Order summary (Payment details)
Invoice which has invoices/documents based on the products
Write a product review
Buy again button
They have different card types for both “Your order” & “Order details”
They have different card types for both “Your order” & “Order details”
Wireframes
Final design
Explanation:
With the new flow, when customers add products to their cart, instead of immediately redirecting them to the payments page when they click on 'place order,' we now create an order summary page. This page displays all the necessary information upfront, including payment details, item details, and order information. To provide a clear overview, we have adjusted the design accordingly.
With the new flow, when customers add products to their cart, instead of immediately redirecting them to the payments page when they click on 'place order,' we now create an order summary page. This page displays all the necessary information upfront, including payment details, item details, and order information. To provide a clear overview, we have adjusted the design accordingly.
Reason behind changing the flow
We noticed a high drop-off rate on the payment page when we used to directly redirect users to it. However, since implementing the order summary, the order is now created and can be found in the "My Order" section. As a result, we have observed a decrease in the drop-off rate.
We noticed a high drop-off rate on the payment page when we used to directly redirect users to it. However, since implementing the order summary, the order is now created and can be found in the "My Order" section. As a result, we have observed a decrease in the drop-off rate.
Some of my latest work
More from my portfolio
More from my portfolio