Best Practice Checkout Experience

We have put together a series of articles on ‘best practice approach’, for some of the user experience challenges we run into regularly.

In this first article, we focus on designing the perfect checkout experience.

We assume the customer has added a product to their basket and their intention is to purchase. We walk through each of the touch points from cart page, right through to delivery to the customers door.

Before we begin, there are a few fundamentals that should apply throughout.

• Mobile – Make sure you provide a mobile optimised experience. We’re seeing traffic from mobile devices exceed 25% on most of our client websites. It’s a must-have for any new checkout process.
• Speed – Whether it’s page load times, delivery estimates or customer support response times, speed is vital to delivering a truly excellent customer experience.
• Secure – Security is the #1 concern for online consumers. You need to shout about the measures you have in place to reassure the customer that their details are kept safe.
• Data Driven – Ensure you track every interaction between the customer and your checkout process. This will help you to improve and optimise your processes moving forward.

**Cart Page**

Once a user is on your cart page, the primary objective should be to encourage them to move forward to the first step of the checkout process. As a base, you need to ensure that typical customer concerns are addressed:

• Does the site appear secure?
• Is it clear what payment options are available?
• Have you provided a delivery estimate?
• Is your returns policy visible or easily accessible?

Once these have been addressed, we can start looking at functionality and experience design:

• Is there a clear call to action to move forward into the checkout? (We recommend double proceed buttons, above and below the cart)
• Are the checkout call to actions visually different to all other on-page graphics?
• Have we highlighted any discounted product prices or savings to the customer?
• Is it easy for the customer to update quantities or remove items from cart?
• Is stock availability highlighted?
• Can a coupon code be added or removed easily?
• Can you ‘time limit’ the cart?

Once we’ve addressed these points we should have a design (or wireframe) which we can test the effectiveness of. We recommend running the following tests:

• A Blur Test to verify the CTA buttons stand out.
• A User Test which asks customers to answer the following questions:

• Will the site accept AMEX cards?
• Will I be able to checkout using my Paypal account?
• How long will the delivery take?
• Do I have to pay for shipping costs if I return the item?

Providing all goes well, we would expect to see 20-30% of customers proceed from cart through to the next step in the process. On products with lower price points, we would expect this to be slightly higher, somewhere between 30-50%.

**Login & Guest Checkout**

At this point in the funnel, the customer is committed. You should be focusing on reducing page clutter and looking to minimise exit options.

To do this, it’s important that any questions that pop into your customers head can be answered without them leaving the purchase funnel.

We tend to use an ‘enclosed’ checkout, which hides the main navigation, search and other standard layout features. We include links to FAQs, Return Policy & Customer Services; launching these as overlays or popup windows, so as not to take customers out of the funnel.

We introduce a ‘progress indicator’, so the customer has a visual indication of the number of steps required to complete the purchase, how far along the process they are, and so they have a navigation device they can use to move back to a previous step.

We also like to provide a basket summary on this page. During user testing we found customers tend to like the reassurance of the basket summary. Removing this caused a small percentage to users to click their ‘back button’ to review their cart.

You should never force a user to sign up for an account. We’ve found the best approach is to capture their email via a guest checkout or social sign-in and let the customer know they can create an account on the final step of the checkout process.

Customers who have an account should have the option to sign-in. Once signed-in you should retrieve their previously stored billing and shipping addresses.

A word of warning here: If a customer has forgotten their password (this happens frequently) then you should allow them to go through the ‘forgotten password’ process on the same page and not direct them off elsewhere. We’ve found that the vast majority of customers who leave the checkout process for an external ‘forgotten password’ flow do not return.

Customers tend to view the ‘guest checkout’ option as the simplest and most straightforward way of proceeding through to purchase. In our experience, it’s the most commonly used, so its vital that you provide this as an option to your customers.

As per the cart page, we would recommend you run user testing against your designs or wireframes. Providing all goes well, we would expect to see at least 75% of customers proceed from login through to the next step in the process.

Billing & Shipping Details

At this point in the checkout process the customer is truly committed. Our job here is to ensure the customer can enter their address as quickly and effortlessly as possible, whilst ensuring we have captured all the correct details enabling us to fulfil the order.

It’s important that we remove any duplicate effort, so if a customer’s shipping and billing address are the same, they shouldn’t have to enter these details twice. Introducing a postcode lookup is an approach that can simplify things further, though it’s important to have a fallback in place for cases where a postcode lookup doesn’t return the correct address.

Most modern web browsers support ‘autofill’ forms. If you ensure your input fields are setup to use the ‘autofill’ information, this will go a long way to ensuring the customer can proceed through the checkout quickly.

It’s common to see customers change their delivery country at this stage. You need to ensure that if you have multiple stock locations, the product the customer has add to their basket is available to ship to their newly selected country. There is a huge amount of complexity that can be introduced by this country switch and this is why it’s really important that they have the correct country selected early on in the purchase process – ideally before a customer has add a product to basket.

We’ve often made use of tools that try to automatically figure out where the user is from. It’s important to tell the customer that you’ve done this and given them the option to change, such as in the example below:

**Payment**

Once the customer has hit the payment page, we can have a high level of confidence they are committed to the purchase. We’d expect to see exit rates of less than 10%: anything above this would suggest technical or serious user experience issues.

The focus on this page should be capturing the customer payment details as smoothly as possible. It’s sensible to offer multiple payment options: we tend to use a single credit card processor, Paypal and sometimes Google Checkout.

It is important that customers are reminded exactly how much they will be charged before they enter their payment details. Many customers are wary of additional costs such as shipping or taxes being added unexpectedly, so it’s important this total is shown. We tend to favour a basket summary throughout the checkout process. Should this not be available, we would show a payment total at the top of the page.

It’s important that you only show the payment fields necessary for the type of card the customer is using. You shouldn’t confuse the customer by asking for fields that are only applicable to specific card types. One approach we like is to get the customer to enter their card number and to automatically highlight the card type after the first four characters have been entered , and then hide the unnecessary fields. There is a well known formula for determining the card types.

Inline validation and form helpers are critical on this page. Customers will need the CVV number explained and the format for the expiry date etc. We tend to run an initial set of validation in the cart before the order is submitted to the payment gateway which helps to pickup any typos or issues before they are processed.

It’s important that you bear in mind your security responsibilities when processing cards. There are a number of regulations (in particular PCI compliance) which enforce rules about how you process and handle card numbers.

Providing everything goes to plan, we would expect to see at least 90% of customers complete the payment step. We would recommend that you track any errors closely and feed these through to your data analytics systems for regular review.

**Summary & Confirmation**

Now the user has placed their order, we should show them an order summary and confirmation page. We should provide reassurance around delivery times and a quick and easy to way to get in touch if they have any questions.

It’s not uncommon to see customers get to this point in a checkout process and realise they have made a mistake, so providing a telephone number and support email address enables them to reach out easily.

It’s at this point where you may want to introduce the option for a customer to sign up for a full account. By going through the checkout process the customer will have already provided all the details needed to create an account, so providing a quick and easy way to convert this into a full account is a good option.

You could also provide the customer with the option to to ‘social share’ their recent purchase. This technique can be particularly successful if a customer is excited about the purchase (think tickets to a gig or an expensive piece of furniture).

We’ve also used this step of the checkout process to ask for customer feedback, upsell alternate products and offer a discount on the customers next purchase.

You may also want to make the page easy to print out or save as PDF.

**Order Confirmation Email**

The main purpose of the order confirmation email is to provide customers with a ‘hard copy’ of the order information. It’s important that customers have a record of the transaction arrive quickly within their inbox as it provides them with additional reassurance that everything has gone through correctly.

It’s also important that the confirmation email is sent from a ‘real’ email address. Do not use a ‘noreply@domain.com’, as it makes a bad impression on your customers: it’s unfriendly and uninviting. Why shouldn’t they be able to reply to the confirmation email? A better approach is to have the order confirmations (and dispatch notifications below) sent from a customer services email address, so when a customer does reply it can be picked up by your support staff.

**Dispatch Notification Email**

Once an order is ready to ship to the customer, you should send out a dispatch notification. This notification should include a tracking code which will enable the customer to track the delivery progress. It should also include a summary of the products being delivered, which is especially important if the order is being sent in multiple shipments.

As the dispatch notification is the last communication before the products arrive, it’s important that the customer can easily find the contact details of the logistics provider, as they may need to get in touch to re-arrange delivery.

At this stage in the process it’s generally too late for a customer to cancel any of the items being dispatched, but we recommend including details of the returns policy within the email. Explaining what steps the customer will need to take to send the product back and how long they have before the returns policy becomes void. Being upfront and clear at this stage helps the customer to have a good overall experience with your brand.

**Arriving Today SMS**

Finally, on the day the product is going to be delivered, it’s important you provide the customer with a delivery window. A two-to-three hour time period in which the product will arrive. This helps the customer to plan their day and enables them to re-arrange the delivery if they are not going to be in.

We’ve seen businesses use delivery text messages as a way for customers to re-schedule their timeslot. e.g. ‘Text FRI’ to reschedule the delivery for Friday. We think this is a great approach and something that should be adopted by more online retailers.

About the Author