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:
- Add images of the product to the cart;
- Add inline validation in the form’s fields;
- Add a progress bar;
- Remove the dropdown list and add a bullet list;
- Add credit card and PayPal logos;
- Add a “Continue Shopping” link;
- Change button shape, color and placement;
- Add reassurance no additional costs will occur;
- Increase the cache time of products in the cart to 24 hours;
- 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
After
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
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
After
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.
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
After
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
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
After
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
After
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
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!
This post first appeared on Yoast. Whoopity Doo!