These 11 Tips Will Help You Design Successful Checkouts

Designing a positive checkout experience that perform well above average is something you cannot learn over night. Many A/B tests in which your shopping cart is failing against competitors, may lead you to a succesful final one. This is what I call a great story of improved progress.

The more layouts you design, the closer to producing greater ones you are.
You can’t get to quality without first going through quantity. Sean McCabe

You need to learn things like conversion rate, cart abandonment, billing information, payment methods specific to different countries and many other practicable things.

Our goal is to make the shopping experience easy and supportive for client’s customers. They’ve learned to expect the worst when shopping online and we must avoid that and show them the contrary.

Think more, design less

This isn’t a piece of work with a unique appeal, that we plan to post on dribbble, to get more likes and followers. It’s about numbers, profit, sales and the most important thing is: to create a perfect environment that allow income growth to occur.

Before we dive in…

Here are a few suggestions for when you’re designing checkout flows:

1. Study the Audience

Designing for the user is a concept that seems to get lost so often, and we fail to remember that, a user is a human. Get disciplined and study your audience. Establish a meeting with your client, or send him a questionnaire.

Make sure you touch some common topics like:

  • What problems his customers encountered so far, within the actual checkout process?
  • What are their special traits and needs?
  • What is the cart’s abandonment rate?
  • In which category his products fit in: electronic delivery or physical goods?
Get aligned with the goals and voice of the company and you’ll be able to create a superb checkout design, that works most effectively for its audience.

For example, a checkout design for a company who sells software, is different than the one for a company that sells clothes. In the first example you don’t need to fill a physical address input, in order to receive your product, because an electronic key can be sent via email.

2. Provide Progress Map Indicator

A progress map indicator above the entire form, can visually inform our shopper that he is on the right track. I don’t encourage you to break a smooth and linear process, by inserting a mandatory sign up form in the middle of it, that holds nothing back but our user, from completing his purchase.

For a better understanding, I will show you a checkout design, that I did for my website. Here, the flow is structured into three simple steps and it looks like this: Shopping cart > Checkout > Finish

This image describes well at what stage of the checkout process our user is at, and how long there is left to go.

There are more alternatives of checkout purchase flows, that you can follow:

a. Shopping Cart Checkout

This is the standard flow, that almost every user is familiar with. Once you agreed with your selected products, you’re ready to proceed to the checkout page. If your payment is authorized, you can review your information on the thank you page. This is what I’ve used in my example.

b. One Page Checkout with Review

If you want to speed up the purchase experience, this is the perfect flow. A landing page with all of the three sections: shopping cart, billing & payment form. Add a different background on the payment form, to visually separate this two areas (billing from payment). Take a look at my landing page, for a better understanding.

The Continue button is the main call to action in this case, that redirects you on the review page, where you can hit the Place order button in order to finalize your payment.

c. One Page Checkout without Review

This is the shortest purchase flow with only two steps (checkout & finish). Very similar with the above one, except one thing: the place order button is on the same page. No review page required.

3. Don’t Use Any ‘Update Button’ to Modify a Value

There is an entire anatomy behind an effective shopping cart, but how can we actually build an effective one? Let’s start with the update button.

Every customer wants to simply adapt things within their cart, especially by increasing or decreasing the quantity of his desired product. Make it easy to modify and use AJAX for getting quick and real time results, without refreshing the entire page.

We all know that shoppers frequently change their mind and remove products from their shopping cart. A bad practice is to force them to enter the zero amount in the quantity input. Simplify the whole process, by adding a trash icon or a delete link next to each product.

4. Display The Gross Price from Start

How many times did you find yourself surprised, after you saw a final bigger price with all the taxes and shipping costs, included?

It can be very frustrating and I don’t know who to blame, I think it depends on how we get used to pay. We can debate here for decades, but I think the best approach is, to expose the gross price straight from the shopping cart. 
8% buyers abandon their cart because they have to pay for taxes.

In my case the unit price is the same with total price, just to avoid any misunderstanding. Now, he is aware of what he’ll end up paying for.

5. Don’t Embrace The Coupon Code Redemption

Everyone is thirsty for discounts. We all love them. Who doesn’t want a discount? It feels good when you found a better deal, it makes you look smarter than other shoppers, who paid the highest price.

A coupon code input placed inside your cart, will throw people out to search for codes. If couldn’t found, they’ll most probably abandon the cart, because they know that someone, once had a better deal.

Companies offer discounts, when sales drop down. Lower prices, cheap products, great deals, more money and happy customers, except few ones:the loyal customers.

They are the ones who buy the most from you. Discounting your products after a period, will make them look foolish, because they couldn’t wait. Discounts devalue products, so brand wisely.

If you can’t have a meeting with your client, send him a questionnaire and ask him what kind of a brand is he running? A premium brand or a discount one? Does he want to have a discount coupon inside his shopping cart?

I don’t plan to use a discount strategy, if the name of my brand is premium ui kits. I don’t want to ignore the loyal buyers, so I don’t use coupon codes inside the shopping bag.

If you still want to use coupon codes inside your cart, here’s an interesting debate on how to use them the right way.

6. Design for the Smallest Screen

In order to achieve an effective design, you need to adopt the mobile first approach and then progressively design your way up for larger devices. Start with the essential features, cover all the hardest scenarios and you will be able to adapt your design with ease. This is the best strategy, that keeps you away from any unpleasant surprise.

The hardest thing is to create a simple thing

Imagine that you go with the opposite strategy: squeezing an entire content into a small screen. You need to do a lot of hardcodes and make unhandy edits around your content. Altough this process seems very unnatural and cause serious headaches, many designers still go this way.

Take responsability and prioritize the mobile-first approach. Start with the smallest breakpoint (iphone 5), use its own native design elements as much as you can (see the quantity input), and then scale up.

Content is king

Turn limitations into benefits, learn to emphasize the most important features, and bring in front the reason why people visit your store: the products.

7. Save ‘Data Entry’ by Offering Compact Forms

Nobody wants to spend more than a few minutes to fill out a form, that’s why a good ideea is to create simple, compact forms that save time and reduce stress for our customers.

It’s all about the user in the end. Appreciate his efforts and humanize the entire completion process, by reducing the number of the unnecessary fields. Make it more enjoyable and you’ll end up with more sales and returning customers.

In my case I realized that I can move Phone, Fax number and VAT ID(for European countries), under the company’s details (for those who want to buy as a company). For instance, instead of having two inputs for First and Last name, you can merge them into a single one named Full name or First and Last name to save more space.

Get the most out of your forms, by using contextual fields display. What exactly this mean is that some additional elements are activated by a certain action. For example if you select US as Country, fields like State, City and Zip code will appear immediately below and only below.

Shortest Scenario
Longest scenario

You can apply this procedure, on the main call to action, the Pay Now button or Place order, or whatever you want to name it. Fade out this button by decreasing its opacity and add that forbidden icon at hover, along with a tooltip, that generate an informative message, something like: complete the mandatory fields first. After that, the button will turn on.

Payment button activates after all the mandatory fields are completed

8. Expose Descriptive Texts As Much as You Can

One of the main reasons people gave up on their purchase is because they couldn’t complete out a form. It is a designer’s role to create good and usable forms, that defeat any barrier in finishing an online purchase.

Many users have serious problems understanding, how to complete and what’s expected from them, when inserting data into an input.

Descriptive texts come in handy everytime. Wherever you want to place them, next or below to a label, it doesn’t matter as long as you provide clear instructions. If you have complex helper texts, hide them behind a tooltip that generates its content, when users hover an informative icon, but that’s not the best approach. Bring out to light these useful details, and your conversion rate might significantly increase.

Andrew Coyle has an amazing article on how to avoid some of the common mistakes, designers make, when designing web forms.

9. Include Country Specific Payment Methods

Payment details are the most important part within the checkout process. Adapt them for your audience and bring out to light all the descriptive texts, near to each label.

If you have an international business, with high orders amount, it’s always a good ideea to fidelize your customers, by offering them local payment options, relevant in their countries.

For example if your shopper is from Germany or Austria, you can bring up Sepa Direct Debit and Wire Transfer along with the regular Credit card and Paypal. Here is a list with the most popular payment methods by country.

Payment Form on Germany

10. Ensure User Security By Visually Inserting Trust Marks

Customers choose to shop more online, if offered with simpler and secure payment options. Even that, the credit card security and online payments fraud, remain the biggest issues nowadays.

People make business with you, only if they trust you and your company.
If you don’t have a checkout page that hit that ‘safety note’ with trust marks, badges, or money back guarantee logos, good luck closing online orders.

Many of us, hesitate to introduce our credit card details on an outdated website, that doesn’t look secure enough. Here’s a short list with the most important security certificates, that ensure protective measures on your payment form.

You can place them at the top of your page for high visibility. In my design it turned out like this.

Trust logos displayed

11. Thank you page

Don’t underestimate this final step. An important aspect here, is to set typography right, for establishing a visual hierarchy within your content.

Start with a headline, that shows your gratefulness. This means that you appreciate their efforts.

Emphasize the most important message, the one where you provide them clear instructions. Let them know to check their email address (spam/junk included), in order to access their goodies.

I strongly recommend this useful article, that contains some of the best techniques on designing a great thank you page.

Conclusion

The purpose of this article is to make you design better checkout flows, that help even the most inexperienced customers completing the purchase.

Every time you want to change something, A/B test and see if it improves the entire shopping experience. Listen to the customer’s needs and justify any change you make.

Keep in mind this collection of practices next time you design a checkout flow and tell me if it helped you.

Thanks for reading!

https://dribbble.com/ADorin