How we built a Checkout Page we’re proud of

Our checkout page caught our attention, because it simply looked shit. There was no clarity, no images, not anything to make it look anything close to appealing. It was basically just a bunch of text. So that’s the first thing we wanted to change. We wanted to make it actually look like a cart and checkout. But where to begin? Conversion freak as I am, I wanted to make sure we’d make the changes that would improve the user experience. And my expectation was this would actually increase conversion as well. So this is the list I came up with:

  1. Add images of the product to the cart;
  2. Add inline validation in the form’s fields;
  3. Add a progress bar;
  4. Remove the dropdown list and add a bullet list;
  5. Add credit card and PayPal logos;
  6. Add a “Continue Shopping” link;
  7. Change button shape, color and placement;
  8. Add reassurance no additional costs will occur;
  9. Increase the cache time of products in the cart to 24 hours;
  10. Output decent errors.

Quite a long list right? That’s why I said in one of my earlier posts you shouldn’t be afraid to make big changes. Let me now go through this list and explain why I wanted these things changed.

Product images

Images are a known conversion booster. Having decent images on your category and product pages can have a pretty big impact on your conversion rate. Now, our products don’t really allow for pictures, because they’re just software. However, adding the pictures and color of the plugin in question should add more clarity. In our opinion, it does. You don’t have to look for the description now, you can just see the same Yoast avatar as on the product page. So it adds clarity, makes it easier for people and actually helps our branding as well. That’s a win-win.

Before

Old cart After

Cart

Inline validation

Inline validation means you provide instant feedback on what people fill in in your form. So if a person fills in an email address with a format something like xx@xx.xxx, that field’s edges will go green and a checkmark will appear. This will give people immediate positive feedback, making them more likely to complete the form, and actually liking the process more as well. As you can imagine; the more feedback you’ll give, the better. So add inline validation to as many fields as possible.

After

validation1

Progress bar

The progress bar works along the same lines as the inline validation, as it’s a sort of feedback as well. However, it also makes it visible for visitors how far along they are in the process. This actually results in gamification, which makes it even more likely they’ll finish the whole thing. And to take the positive feedback one step further, we’ve made it so you always enter in step 2 out of 4. Because really the visitor has already taken the biggest step: click the buy button. That deserves some validation! Lastly, adding a progress bar made sure we didn’t need to have a text explaining the process anymore. This is made much more clear by this progress bar.

Before

Old progress

After

Progress bar

Remove dropdown

We’ve removed the dropdown list for selecting the payment options and added a bullet list. We’ve done this, because now it’s immediately visible for visitors what options there are. Along with the next step this facilitates a lot more transparency.

Old list

Add logos

Adding logos of our payment options makes it more clear for visitors what kind of payments we accept. Of course, we already had the ‘Accepted Payments’ widget, but our widgets are turned off on the checkout page, to avoid clutter. So we’ve added them in the bullet list of payment options.

Before

Old list

After

Logos

Continue shopping

Sometimes when you’re looking at your own website, you think: “Why haven’t I seen this before?!” This was one of those moments. We realised we’ve never had a continue shopping option from the checkout. Which is weird really, because we certainly don’t want to discourage people from buying more of our products. We’ve added this directly under the product in the cart, because it’s part of the process of filling your cart.

After

Continue shopping

The button

We’ve changed the shape, color and placement of our button on the checkout page. The main reason we did this, was because it would stand out more this way. It’s shaped like an arrow, which just like the Continue Shopping textlink, gives you a sense of direction. In this case your attention is directed towards the arrow that gives you the feeling of moving forward.

Before

Old button

After

Button2

Reassurance

We’ve added the reassurance “there will be no additional costs” next to the total shopping amount. We’ve done this, because unexpected costs are the #1 reason for people to abandon their shopping cart. We want to assure people this won’t happen with us, and they won’t discontinue their purchase out of fear that it might.

Before

Old Total

After

Reassurance2

Increase cache time

Quite a few people add the products they’d like to have to their cart, but actually don’t buy them right away. So we’ve made it so that when people add something to their cart, this will be remembered for 24 hours, instead of the initial 1 hour. This means people can return to their cart during the next 24 hours and still be able to check out.

Decent errors

This might actually be the most important change we’ve made. We’ve made our errors much more visible. At first, they were errors in plain text, right below the text of our checkout page. This meant you just didn’t see it. Now we’ve added an error message right next to the field that’s not filled in right, along with a red cross in the field and borders that turn red. This makes it very clear that something is wrong.

After

Error

Results

Possibly partly due to the switch to Stripe, we’ve seen an increase of 30% in successful transactions!

We also compared the conversion rates of June to the conversion rates of October. These are the first two full months in which we’ve made no changes. Results: the conversion rate has lifted from 48.14% to 53.60%, which is an 11.30% increase.
Note, however, that these results aren’t very reliable, apart from the fact the new checkout page is probably better. The checkout page conversion rates differ quite a bit over months.

What do you think of these changes? Maybe you have some good ideas for us, or have recently ‘upgraded’ your own checkout page? Let me know!

Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

56 Responses

  1. Bob SamiiBy Bob Samii on 7 November, 2013

    Great post and nicely organized =) Did you post all the changes at the same time or test each element separately? Any indication which of these points had highest impact on conversion?

    • Thijs de ValkBy Thijs de Valk on 7 November, 2013

      Thanks! :) We did all the changes in one go, because this amount of changes would take ages to test individually. Unfortunately we have to keep things workable. Would’ve loved to test every aspect separately, but being busy for half a year or a year on one page just won’t earn us any money ;)

  2. Alistair LattimoreBy Alistair Lattimore on 7 November, 2013

    Thijs,

    A couple things I’d test that come to mind at a quick glance:

    * find a better secure logo and emphasise it more
    * single column of form fields instead of two columns
    * re-order credit card inputs to name/number/expiry/cvc
    * credit card expiry dates in the past are valid but should error
    * include a description/image of where to find the cvc number
    * default country dropdown using geo-IP
    * put post code before suburb, auto-complete suburb/state from post code for known countries
    * left align Complete Payment button so it is near the I Agree checkbox
    * increase the size of the Complete Payment button

    Regards,
    Al.

    • Thijs de ValkBy Thijs de Valk on 7 November, 2013

      Thanks Al! Great ideas!
      Do you mean double columns with first and last name?
      And do you have a secure logo option that’s actually not way too expensive? ;)

      • Shane ForceBy Shane Force on 8 November, 2013

        He is saying align all of the form components in one single column vs double columns. It makes for a smoother work flow if you only have to conitinue in one direction to fill out a form vs left, then right, then down.

        The secure badge should be from your actual card processor to lend a better feeeling of security. This is something that I look for on any purchase site I am not familiar with. I am looking for an actual merchant account/ card processor badge like Stripe or Authorize dot net, etc.

        • Thijs de ValkBy Thijs de Valk on 8 November, 2013

          Once again, great advice! :)

  3. Didka DimitrovaBy Didka Dimitrova on 7 November, 2013

    Very very nice. Its good to see real world examples of shopping cart optimizations that sell more after the change.

    • Thijs de ValkBy Thijs de Valk on 8 November, 2013

      Thanks a lot! :)

  4. Niels BrinchBy Niels Brinch on 7 November, 2013

    I would recommend that you try to remove the “Continue shopping” link and see what it does to the conversion rates. Giving any option that is not “purchase now” I would think decreases conversion.

    • Thijs de ValkBy Thijs de Valk on 7 November, 2013

      Well we actually didn’t have this link until these changes. I think this is one of those points where usability converges with conversion. Most of all, we want to make it easy navigable for the customer, and within those lines optimize for conversion.
      Removing that link would mean there’s no on-site option to go back and order other/more products. This is not something we’re willing to do at this point in time.

      I do appreciate your feedback though, and fully understand where you’re coming from! :)

  5. ArnoutBy Arnout on 7 November, 2013

    Nice post; have you guys been experimenting with GA event tracking on the field validation errors?
    I’ve had great succes with that.
    Cheers,

    Arnout

    • Thijs de ValkBy Thijs de Valk on 7 November, 2013

      Nope, we haven’t, actually! Will definitely check that out!

  6. JohnnyBy Johnny on 7 November, 2013

    Thanks for a good article.I think you should increase number of payment methods.

  7. Linda TinhBy Linda Tinh on 7 November, 2013

    you should increase number of payment methods.

  8. steve smithBy steve smith on 7 November, 2013

    Now make a plugin for that exercise and let us purchase it!

    • Thijs de ValkBy Thijs de Valk on 7 November, 2013

      Would if I could :) Editing these things in WordPress through a plugin is next to impossible, unfortunately…

  9. JanBy Jan on 7 November, 2013

    I did not finisch the checkout process

    But where is the shopping cart / mini cart ?
    I added an extra product , deleted it and continued
    strange !!!

    Is this you next plugin ?

  10. DaveBy Dave on 7 November, 2013

    Something worth trying as well are :
    – customer testimonials
    – cart abandonment email(s)

    Saw some nice lifts with testimonials in some cases(not all) and saw a lift everywhere when adding the abandonment email :)

    Dave

  11. Gert WierbosBy Gert Wierbos on 7 November, 2013

    In the end of this post, you say that you switched to Stripe. How did you sign up there, being based in the Netherlands? I also want to use Stripe (from the Netherlands), but I can only choose USA/UK/Canada and Ireland…

    • Thijs de ValkBy Thijs de Valk on 7 November, 2013

      We’re in a trial, actually. You could just contact them and ask if you’d qualify as well :)

      • RichardBy Richard on 10 November, 2013

        Does Stripe handle your Paypal checkouts as well? Or are you using a different party for that? Because you can’t get Paypal merchant in NL as well right?

        • Thijs de ValkBy Thijs de Valk on 10 November, 2013

          We’re just using PayPal, so not through Stripe. You can actually get Paypal merchant in NL :-)

  12. Karen McCamyBy Karen McCamy on 7 November, 2013

    I understand @Dave’s comment about “cart abandonment” emails, but I would caution you in that regard. From a consumer standpoint, I don’t mind getting 1 or 2 reminder emails, but I have received multiple emails in increasing frequency and it’s really annoying! (VistaPrint is particularly aggressive about this, as is their email marketing…”ad nauseam”). My reaction is to unsubscribe when “harassed.” Too many “reminders” and it’s no longer helpful…IMHO!

    • Thijs de ValkBy Thijs de Valk on 8 November, 2013

      Well, too much is never good ;-) but that’s really why we test, to find out where the ideal point of just enough, best usability and profitability is.

  13. MauriceBy Maurice on 7 November, 2013

    The people at Yoast allways make me proud to be Dutch. You guys rock. Thank you for your great products.

  14. FlorisBy Floris on 7 November, 2013

    Personally, I like the Autofill function. Saves time + trouble but sometimes works incorrectly.

    • Thijs de ValkBy Thijs de Valk on 7 November, 2013

      Uhm, I think you commented to the wrong post? ;)

  15. TheoBy Theo on 7 November, 2013

    Great Post and some good tips in the comments, Thanks a ton!

  16. Brandon HimpfenBy Brandon Himpfen on 7 November, 2013

    Great post. It’s an interesting read to see what you have done and where it took you.

    I would also recommend a Symantec trust seal – $ 29/month or at the very least, GoDaddy’s security seal.

  17. Robert van VlijmenBy Robert van Vlijmen on 7 November, 2013

    Well written…even I can understand it. Hup Oranje!

  18. Dave LynchBy Dave Lynch on 8 November, 2013

    Great info thanks. What shopping cart/ecommerce plugin are you using?

    • Thijs de ValkBy Thijs de Valk on 8 November, 2013

      We’re Easy Digital Downloads :-)

  19. HorstBy Horst on 8 November, 2013

    I would like to know if you made split tests for some elements and if so did you use google analytics or any other software (plugin)?

    • Thijs de ValkBy Thijs de Valk on 8 November, 2013

      Nope, we didn’t do any split tests for any elements. Didn’t you read the other comments?! ;-)
      We made all the changes in one go, because split testing every element would take too long. I’m looking forward to the days that that won’t be an issue! :)

  20. channarithBy channarith on 8 November, 2013

    Great Post , NIce Organize .Thanks a lot for sharing

  21. Shane ForceBy Shane Force on 8 November, 2013

    First off, love the content and visuals of the site. The mascots and use of colors work very well and keep the site fun while still remaining professional.

    A few observations:

    Consider adding a link to the Stripe security verification page from your secure checkout icon.

    I added the video seo plugin to my cart to get a feel for the checkout process then came here to comment. Now I notice there is no link that takes me back to the checkout page. You might consider adding a cart icon showing the number of items it contains and link it to the checkout page. The Amazon cart is a good example ;)

    • Thijs de ValkBy Thijs de Valk on 8 November, 2013

      Thanks a lot! Great feedback! :)

  22. SueBy Sue on 8 November, 2013

    Do you have more info on how to make these changes, I am using EDD and would love to implement some of these.

    Thanks!

    • Thijs de ValkBy Thijs de Valk on 8 November, 2013

      Well Joost actually coded most of them himself. He might do a follow-up post on how, but we’re not sure yet :)

  23. victor vegasBy victor vegas on 10 November, 2013

    i got the local seo and was wondering should i use the latitude and longitude or just add the address thanks in advance

  24. Love QuotesBy Love Quotes on 11 November, 2013

    Thank you very much Yoast for bring us all this.

  25. sim phamBy sim pham on 11 November, 2013

    I do agree with you that we should add the image of the product to the check out page to attract customers. I am selling the abacus and I always put he images of abacus to the check out page for my business website.

  26. PromeoBy Promeo on 12 November, 2013

    Great article!

    Reffering to “cart abandonment emails” its hard to imagine my surprise when one day I have received a phone call after I left a form unfinished. I wasn’t angry about it. I think there are some products in which cases such a phone call could be helpful for example when you try to buy car insurance or more complicated product and you need some explanation or advice.

  27. Arbaz KBy Arbaz K on 12 November, 2013

    That’s really great that you built a great checkout page.
    I have been working on setting up a service site of my own and checkout page is one of the key components in that.
    Thanks for sharing the tips and the insights on how all of us can create the best page for checkout on our site. :)

  28. Ananda Kannan PBy Ananda Kannan P on 14 November, 2013

    Good post, this is where most of the e-commerce loose customers. Thanks for sharing :)

  29. bao cao suBy bao cao su on 17 November, 2013

    Thank you!, i find it. I want buy items more to customer

  30. Rocco ZeilerBy Rocco Zeiler on 19 November, 2013

    This is awesome! :) I searched long time for an shopping improvement article! I also love your SEO Plugin! Please don´t stop to write such great tutorials!

    Nice greetings from Austria!

    • Thijs de ValkBy Thijs de Valk on 19 November, 2013

      Thanks a lot!

      And don’t worry, we won’t stop ;)

  31. Wendy S.By Wendy S. on 20 November, 2013

    I noticed all the talk about Stripe. What’s your PayPal to Stripe ratios? Would love to really just know general numbers. Are you for example having a a half and half situation? A 10 PayPal to 1 Stripe purchase situation? It would be nice to know since dealing with these payment APIs can take time to learn. Different ones keep popping up (and dropping eckhem Google Checkout) and it almost seems convenient to just stick with one.

  32. rosa martin@masque cheveux maisonBy rosa martin@masque cheveux maison on 25 November, 2013

    First off, love the content and visuals of the site. The mascots and use of colors work very well and keep the site fun while still remaining professional.

    A few observations:

    Consider adding a link to the Stripe security verification page from your secure checkout icon.

    I added the video seo plugin to my cart to get a feel for the checkout process then came here to comment. Now I notice there is no link that takes me back to the checkout page. You might consider adding a cart icon showing the number of items it contains and link it to the checkout page. The Amazon cart is a good example ;)

    • Thijs de ValkBy Thijs de Valk on 28 November, 2013

      Good tips! We’ve been thinking about that for a while now, time to just go do it I guess ;)

  33. Kenneth VillegasBy Kenneth Villegas on 27 November, 2013

    Another good tips here Yoast! This is actually effective because it gives more good user experience to your customers who wants to buy your product! Great job!Thanks!

    • Thijs de ValkBy Thijs de Valk on 28 November, 2013

      Thanks! :)

  34. ShreyaBy Shreya on 30 November, 2013

    Very very Nice. It is really good to see real example with image and explanation.
    Keep it up good work buddy.

  35. JamesBy James on 3 December, 2013

    Great post, how you do you use Stripe with WordPress, do you need SSL?

    • Thijs de ValkBy Thijs de Valk on 3 December, 2013

      We actually use Easy Digital Downloads with a Stripe addon :)