Checkout design is the last in our series of posts covering design best practices for different parts of the Ecommerce customer journey. Previous posts include discussion and examples and potential design elements to test for:
Checkout is the most critical part of the conversion path in some ways since it throws many challenges, due to the multiple stages, with each step influenced by the previous one. It is further complicated since it's not necessarily linear; so there is no standard path from start to finish and so this depends on the user's profile, where some steps can be skipped.
In the Smart Insights Ecommerce design guide, I focus on 3 stages:
One size doesn't fit all for the checkout flow, and the art of the template design is in masking the complexity of the logic and process flows behind an intuitive and user-friendly page design - not an easy challenge. In our experience, it takes rigorous testing to find the optimal flow for your website.
The wireframe below outlines the core elements for the checkout funnel, though UX/UI design patterns can vary across websites. Please note that in the checkout we recommend a custom header & footer that is different to the standard site header and footer we discussed in step 1 of this guide. This is because it’s widely accepted that unnecessary navigational elements like mega menus and footer links can distract users from the core goal of completing an order.
Instead of separating new and existing user checkout (the classic Amazon approach), the user is asked to enter an email address, then select whether or not they have a password. We like this UI design because it reduces the complexity of the page and doesn’t force users to make a tacit decision about which box they fall into. Some of the big multichannel retailers like House of Fraser adopt this approach. You’ll notice how the standard header and footer are used throughout the checkout, which goes against good practice advice.
Finally, here's a checklist for a process to review and test your checkout;
In the full guide for Expert members I go into much more detail on individual page elements and look at more examples of how these apply in practice from UK and US-based retail sites.
Use our wireframes and examples to test and create more persuasive Ecommerce designs to boost retail sales.
Download our Ecommerce Design Bible.
By James Gurd
James is an Ecommerce consultant and owner of Digital Juggler, an E-commerce and Digital Marketing consultancy helping retailers develop, execute and evolve E-commerce strategies and optimise their digital channel. With a background as a Head of E-commerce and also agency side as Head of Client Development, he has experienced life on both sides of the fence. He has helped companies like A&N Media, Sweaty Betty and Smythson to manage RFP/ITT proposals. and been lead consultant on high profile projects for Econsultancy, Salmon and Greenwich Consulting. He is a guest blogger for Econsultancy, for whom he also writes best practice guides, regularly contributes to industry events and co-hosts #ecomchat, a weekly Twitter chat for e-commerce knowledge sharing. For e-commerce advice and support, connect with James on LinkedIn and Twitter.
Turbocharge your results with this toolkit containing 9 resources
The E-commerce/retail toolkit contains:
Start your Digital Marketing Plan today with our Free membership.
Recommended Blog Posts
Create a co-ordinated ‘always-on’ digital marketing strategy for the whole customer lifecycle to boost conversions and retention It’s no secret that engaging your customers is crucial to achieving continued sales, and it’s also well known that it is usually far …..
Personalized marketing, as we know from our experiences as brand-lovers and as marketers, is the make or break of any e-commerce marketing strategy in a competitive environment Personalized marketing is all about offering improved user experience (UX) by serving relevant …..
E-commerce conversion rate and lead generation landing page stats for desktop and mobile devices for benchmarking averages across different industries As you will know, conversion rates are often used as a KPI to review the effectiveness of e-commerce sites. Naturally, …..
