Last impressions matter.
The order review page is the final stage before checkout. And it’s important nothing spooks potential customers before checkout.
That’s why we wrote this guide on how to design an effective order review page to cross that last hurdle and convince your customers to make a purchase.
In this blog, explore:
10 examples to inspire your order review page design
9 elements of a convincing order review page design
4 order review page design mistakes to avoid
What is an order review page in eCommerce? An order review or order summary page is the final stage right before a customer goes ahead with a purchase.
At this point, customers have probably browsed through the eCommerce store, done their research, compared competitor products, understand the pricing and other product details, and are ready to buy.
The order review page offers a summary so that customers can review and assure themselves that the information they selected and provided is accurate.
Why does the order review page matter? Often overlooked, the order review page is one of the most important steps of a user-friendly checkout experience. It’s almost the final stage right before checkout.
The order review page offers customers assurance that they are making the right decision. If customers are not provided with all the relevant information, doubts will creep up leading to a higher cart abandonment rate.
All other customizations will be in vain if the order review page doesn’t build trust and assurance to click the ‘place order’ or ‘proceed to checkout’.
10 examples to inspire your order review page design 1. Hermès - use subtle personalization What you can copy:
The layout and font speak luxurious sophistication which is exactly what Hermès offers to its clientele. Sometimes, eCommerce brands just apply a template to the order review page and go ahead. While creating your order review page, make sure the branding is consistent across it. We love the detail of ‘The Orange Box’ – the iconic Hermès packaging that is as treasured as the product itself. This lets customers anticipate the product delivery and subtly directs them to a FAQ page. Also, it adds a pop of color. 2. Kohl’s - prompt for more savings What you can copy:
Kohl’s order review page has a free shipping prompt banner with a dropdown that can help customers explore discounts for the cart.
The discount prompt is highlighted by the red text which states how much the customer is already saving. It compels customers to increase their savings further.
3. Birchbox - set up repeat purchases What you can copy:
Aside from the simple and cute layout, we love the auto-renewal feature Birchbox applies to their monthly memberships. Wondering how this can help you if you don’t have a subscription-based model? You can ask customers to sign up for product replenishment reminders or monthly replenishment programs.
4. B&H Photos - customize delivery What you can copy:
Yes, free shipping might be a conversion driver. But considering the brand’s preference for quality packaging, and long-distance or international deliveries, it’s often not possible to offer free shipping. B&H Photos offers their customers to select their preferred delivery route from next-day delivery to extended dates.
Hey, you'll also like: Is Free Shipping Still a Conversion Driver in 2022? 5. Everlane - offer conscious orders What you can copy:
With changing consumer behavior trends, there are many customers – millennials and gen z – who focus on buying mindfully. Everlane skillfully considers this with their sustainable shipping program which customers can opt for with every order.
Furthermore, see how Everlane adds a layer of security with the optional save your information section. So, the next time the customer shops with them, they don’t have to go through the process of adding their info and skip directly to checkout.
6. FreshDirect - cross-sell within the cart’s price range What you can copy:
FreshDirect's order review page is sort of like a one-page checkout page. It spells out all the information neatly and lets customers select their preferences with minimal effort. They also take the opportunity to cross-sell products relevant to the cart. For most customers, grocery shopping is based on real-time preference (looking at the hunk of cheese I bought on a whim), it’s easy to increase the average order value through clever cross-sells.
Read: How to cross-sell on product pages without being pushy 7. Hayneedle - give directional cues What you can copy:
Often, navigating eCommerce stores can be confusing and distracting. Perhaps, a customer has noticed information that needs to be revised on the order review page. But, they are afraid to click the back button in case they lose their selections and have to start all over again.
Hayneedle offers clear directional cues so customers can go back to edit info and choose the right shipping method.
Hey, you'll like this too: 20 UX principles for higher conversions 8. Musician’s Friend - lend support through multiple channels What you can copy:
Purchasing an expensive product throws up many questions. Will the product be delivered safely? Can the product be returned or exchanged with no questions asked? Is the product authentic? Is the payment gateway secure? Is this the best price?
Musician’s Friend, which supplies music instruments and equipment factors all this into account and has designed its order review page to solve customer problems through multiple channels such as live call and chat features, and FAQ links regarding returns and secure payment methods.
9. Newegg - make a long-term connection What you can copy:
It’s all about extending a customer's journey even after making a purchase. Since customers are known to abandon checkout because they have to create an account, eCommerce brands often offer guest checkout. Newegg does the same. And during order review, it adds a sign-up prompt for future shopping experiences. It also offers exclusive promotions through email opt-in. This way it ensures a way to contact customers and keep them interested in the brand.
10. Shop Apotheke - reassure customers with security and info What you can copy:
It’s a given that all eCommerce transactions should be secure and protected. But it doesn't hurt to show it and reassure customers. Shop Apotheke does it visually with trust symbols for secure payments. It also adds copy that their data is protected under regulations and won’t be disclosed. Also, product stock alert tags immediately assure customers that they will get the products as soon as possible.
9 elements of a convincing order review page design The order review page design has evolved greatly over the years. Earlier, eCommerce brands had a standard template they would refer to. However, now, with changing consumer behavior habits, brands are customizing the order review page to elevate the shopping experience.
Let's explore 9 basic elements that MUST be there on an order review page:
1. Order summary (mobile vs desktop) Typically the order summary is positioned on the right side of the order review page.
The order summary should contain:
list the name of the product/s, thumbnail image of the product quick product information, product quantity of each product, total product quantity, price of each product, and total price summary including shipping fees, taxes, convenience fees, and discounts. While it’s advisable to stick to the right side of the webpage for desktop, the positioning of the order summary depends on the layout and design. On mobile and other screens, use a collapsible design to create an interactive experience.
2. Shipping information (show visually) The most asked question before and after placing an order is ‘when will it be delivered?’.
That’s why it’s important to show accurate shipping information so that customers can get an estimation and make a purchase. eCommerce brands can also offer different shipping methods, from localized next-day deliveries, expedited deliveries, or even extended deliveries.
Show the shipping and delivery information visually in a tracking format with expandable touchpoints. Highlight text such as ‘free’, ‘next day delivery’, or ‘delayed’ in a different color or text.
3. Payment information (show just enough info) Show all the payment information including the payment method, details entered by the customer about the payment method, applied discount codes, and the option to use promotional offers.
Customers need to feel safe while making a purchase, especially if they are first-time buyers. Let customers review payment information with secure transaction details so that they are reassured.
Read more: How do I increase my website’s checkout rate? 4. Address (shipping vs billing) Yes, as eCommerce business owners you know what both means. But customers are often confused and sometimes enter the wrong addresses, especially if they are sending the products as gifts or internationally. Therefore, it’s important to list both shipping and billing addresses separately even if they are the same.
5. Editing feature (tappable) The order review page is the last page before checkout.
That’s why it needs to account for editing. Customers should be able to edit everything without loss of information, so let customers edit information, and apply or remove customizations as per their preference.
Make the edit option tappable so it’s easier to change the information.
6. Order personalization (don’t go overboard) Offer options to let customers send products as gifts with messaging, split payments between two and more customers, and share the cart through email or messaging. Such types of personalization might seem cumbersome but for customers, it shows the online brand is conscious of different needs.
Hey, you'll like this: eCommerce personalization: 20 revenue generating examples 7. Navigational cues (improve interaction) With different themes, layouts, and newer customizations, customers are often confused by navigation. Customers worry that pressing the wrong button or a random click can make them lose all the information and do the checkout process all over again.
Here are some navigational cues to add to an order review page:
tappable links to go back in the checkout process, sticky CTA buttons to place an order, support feature with chat widget or calling through an app, tappable links to FAQ pop-ups or pages, use of pop-ups to provide additional information, text such as click here or pointers, and prompt text in the input fields. 8. Security (clear away doubts) Customers want to feel safe to go ahead with the checkout, especially for first-time buyers. They don’t know you, they don’t trust you, and they’re hesitant to buy from you.
That’s why it’s important to convey trust.
Add links to the privacy policy and return & exchange policies that customers can easily locate on the order review page.
Trust seals like McAfee, Norton, and e-trust badges signify that a secure checkout process can be trusted.
9. Important messages (highlight it visually) Relay essential messages regarding the order so that customers are aware and not caught off-guard. These messages can be about delays in shipping and delivery dates, product stock alerts, packaging, savings, terms, and conditions, or payment method verification.
4 order review page design mistakes to avoid Since the order review page is the last step before checkout, it’s important to avoid making any missteps.
Avoid these 4 order review page design mistakes:
Mistake #1. Not allowing customers to edit data directly at the ‘order review’ stage Customers at the ‘order review’ stage often find errors in their order information, which they naturally want to edit before finalizing the order.
If you send customers back in the checkout flow, they might make additional errors, which they had already completed the first time around. If they can edit the information right there, then it’s easier to take them to the next step seamlessly.
Furthermore, it should be obvious which “Edit” link belongs to which block of information.
Have the “Edit” link for each semantic group, and place the “Edit” links next to their information groups at the “Order Review” step. This way, it’s clear from a quick visual scan which “Edit” link belongs to which information group.
For example, even if ‘Billing Address’ and ‘Payment Methods’ are handled at the same checkout stage, they’ll require separate ‘Edit’ links to align with user expectations.
Mistake #2. Not positioning ‘place order’ to keep it top of mind Sometimes, customers often mistake the order review page design for the ‘order confirmation’ page. It isn’t surprising that the ‘Order Review’ and ‘Confirmation’ pages are often more or less identical. They both contain product information, a cost summary, a summary of the customer’s billing and shipping address, and the selected shipping method.
One of the main differences between an ‘Order Review’ step and the ‘Confirmation’ step is the presence of a ‘Place Order’ button.
The end goal is to convert and compel the customer to make a purchase. Everyone will tell you to keep it above the fold. Use a sticky CTA which remains top of mind for the customer even as they scroll and is easily accessible when they’re ready to act.
Mistake #3. Not optimizing the ‘order review’ page for skimming Customers often skim, rather than thoroughly read the information and options presented at the different ‘Order Review’ stage.
Draw attention to relevant information with graphically highlighted text or elements that required interactions (such as buttons and empty form fields).
Mistake #4. Not displaying just enough details on the ‘order review’ page Displaying too little information can confuse customers. And showing too much information can just distract or overwhelm them. That’s why it’s important to show just enough information to help customers take the next step.
Wrap Up Order review pages like all the other pages need to be designed to maximize conversions. However, if you’re still struggling to get sales, then make sure to run A/B tests. That way you can truly optimize for more conversions. Start by requesting a free site audit from ConvertCart today .
.svg)
.svg)
.svg)
.svg)
.svg)
