The checkout… it’s the proving ground for your eCommerce shop. Everyone enters with products they want to buy, but only 32% of them actually buy them. Don’t worry! Today we have 3 in-depth case studies and effective checkout examples to help you conquer the design of your checkout page.
Survival depends on raising that number. But there’s always some anxiety, even slight, that comes with eStore purchases, perhaps because we’re not face-to-face with our vendor. For this, eCommerce sites must go the extra mile to make their customers comfortable.
The three sites below mix traditional and original strategies to maximize how effective their checkout processes are. Let’s take an in-depth look at what they’re doing right, and how you can implement the benefits on your own site.
The fashion-forward, all-in-one eShop Fab appeals to designers with its application of cutting edge techniques, including its checkout. A site dependant on chic, their checkout need to charm users as much as their products.
Their user-focused design starts right when users add an item to the bag (cart), with a right pullout displaying products with their pictures, checkout CTA, individual and total prices, estimated arrival date, and a teaser about free shipping.
Click Checkout and the bag becomes the first step in the checkout. Smart, because they chose a single-page checkout, and the more steps they remove from the final checkout page, the better.
When logging in, shoppers have the option of using their Facebook login. Also, notice the security seal in the corner, which also appears on the following page. Put the security seal on every page — it’s not that big, and it’s a proven way to build trust.
Fab takes opts for the single-page instead of the multi-page layout, but they take a clever approach to it. They gray out future sections until the shopper completes the current one. This retains the benefit of the user seeing all their steps. They can gauge the amount of time completing checkout will take and know their progress, much better than having them guess.
There’s also a save feature — accidents happen, but no one likes to fill out the same form twice. The save button also doubles as the button to proceed.
The final confirmation gives a last chance to review the order. They fit a lot in this window, including a reminder of what’s in the cart, again with estimated arrival dates. This is a little extra reassurance to the user, and can sometimes remind them of an item they forgot.
Also, notice the “FREE” shipping fee is written in caps and red. Highlight any discounts or extras you’re giving to the shopper, i.e., if an item’s on sale, include the original price crossed out, and even the savings
Highlight any discounts or extras you’re giving to the shopper, i.e., if an item’s on sale, include the original price crossed out, and even the savings Click To Tweet
The mobile version follows the same format, almost exactly, with the security seal, estimated arrival, and red “FREE” for shipping.
To compensate for the smaller screen, the single-page checkout becomes three pages, with a navigation bar at the top. They even save purchases so shoppers can complete a purchase on multiple devices without refilling forms.
These days, there’s always a demand for ironic, nostalgic, geeky T-shirts, and few know it better than Busted Tees. With a business model leaning on impulse buys, they need to keep their top notch checkout to keep their millennials happy.
BustedTees has a nice cart screen, with a lot going on, but the abundant empty space makes everything easier to find and comprehend. Empty space is a common trend with checkouts to reduce the amount of visual stimulation and therefore anxiety. In fact, decluttering is useful on every page, not just on the checkout.
… But not too much empty space. They fill their right side with promotions for other products, even a brightly colored call-to-action for putting it directly in the cart — an eShop equivalent of candy at the register.
Let’s take a closer look at the Click for Live Help! tab…
Direct links to support or at least FAQ is almost mandatory. Users will often have questions or concerns, and if answers aren’t readily available, they’ll almost certainly leave. BustedTees adds a beautiful and innovative bonus: they add a personal touch by giving the helper a name. “Lisa” is a lot easier to talk to than a generic window.
BustedTees also goes with the single-page checkout. The boxes section off areas to avoid overwhelming the user with forms and not one but two CTAs stand out in bright green. Notice that to the bottom right; they also display the cart contents. And Lisa’s still in the corner if you need her.
The pre-populated input forms also save shoppers a few seconds, with clear instructions of what kind of data goes where.
In lieu of the security seals, the page simply puts “Secure Checkout” as the page title, with the familiar icon. Also, just as a reminder, be sure to include credit card and PayPal logos, if you can.
One final touch is the friendly feedback alert to explain a seemingly problematic issue. This explanation, in red to be noticed, answers a user’s potential question, fosters trust through transparency, and may even save the sale.
The mobile version is severely scaled down to only the bare essentials. The checkout page handles the risk of overburdening their shoppers by reducing each section to an expandable form, which also serves to show the shopper their position and progress in the entire process.
We took these considerations in mind when we designed our Slate Store Theme, one of our template checkout offers that can be further customized to your specific needs. The Slate Store, in general, has a minimalist style to give it a modern vibe, a challenge we took to the checkout.
Slate uses minimalism to remove distractions and create a cleaner, calmer screen. Users see their options clearly and usually don’t need help with directions. The black, white, and gray scheme enhance this, as any color would immediately draw all the attention.
The theme brings a mobile approach of expandable sections to the desktop, combining the advantages of both single- and multi-page checkouts. Like the other sites, this one also uses pre-populated forms and displays the cart contents at the right.
One feature the Slate theme offers that the others don’t is the mirroring, real-time typing between the billing and shipping address (as long as the box is checked). While not necessary, this pleasant micro interaction delights the user at a time when they may be stressed, plus gives the appearance that they’re saving time by not typing the same data twice.One feature the Slate theme offers that the others don’t is the mirroring, real-time typing between the billing and shipping address Click To Tweet
The checkout page first begins to use color, with a safe but attention-grabbing green for the final CTA, as well as the “COMPLETE” markers for the previous tabs.
Another useful feature that many sites can benefit from the browser’s back button takes the shopper to the previous section, not the previous page. This can save a lot of frustration, especially if reloading the checkout page means retyping the date.
The mobile version follows a similar visual style but includes some extra features exclusive to mobile versions. For example, the phone’s number pad is activated automatically when the shopper enters the credit card field.
Mind the details during checkout — with its naturally high abandonment rate, every little piece helps. UX and UI tactics are especially important to smooth over any loose edges. Don’t be afraid to experiment with new ideas you think your shoppers will like, but don’t reinvent the wheel if a pre-existing tactic works better.
And when in doubt, conduct some user research to determine the exact area where most shoppers are abandoning their carts (try Crazy Egg). A small explanation of a single form field could save you millions!