Earlier this week I posed a question:
Why do ecom sites make you pick the credit card type when they it’s embedded in the card number? Am I missing something or just bad UX?
— Jeff Steinke (@jeff_steinke) December 9, 2014
A good friend quickly pointed out that even though you can typically deduce the credit card type based on the number, it’s likely because the merchant’s payment service provider (PSP) requires it anyway.
If you purchase online with any regularity you’ll know that not all merchants require you to enter the credit card type though. Which means, the merchant has made a choice to create this type of user experience (even if it wasn’t a deliberate choice).
My eCommerce Habits Are Rapidly Shifting; Are Yours Too?
Over the past six months I’ve really accelerated the amount I’ve bought online vs in store. The convenience factor has taken over.
As a result I’m finding I evaluate the experience a bit more too. What are the keys to a good online experience?
- Free shipping – Feels more and more like the cost of entry and no longer a perk
- Sense of security – Again, this is simply a base level requirement anymore
- Ease of contacting support – I ask questions…lots of questions. You know, the guy who always has his hand up in class? So a simple support channel with a sub < 24 hour response time is key
- Reviews & Ratings – In place of not being able to try out a product in person, ratings & reviews ensure satisfaction, even sight unseen
An Ideal Checkout Experience
And then I came upon Cards Against Humanty’s checkout process. It resonated perfectly with me. Throughout the process I got more and more excited about my purchase, which meant there was zero chance of abandonment in their checkout funnel with me.
Here’s why.
First, before anything else happens, I see a security message. Not over the top. Not written in comic sans. Simple and sufficient.
Next, fantastic product pages. Take a look:
What am I referring to?
- Large product image that I don’t need to click to magnify
- Entire description is only 46 words, yet I know everything I need to
- And more importantly, I know what’s not included (a starter pack)
- Clear sans serif lettering that works really well in the white/black contrast
- Humor that matches the product & company culture
You can’t see this in a screenshot, but I love how a single webpage is used to combine all of their product pages and your shopping cart. Granted, it’s easier to do this when you only have 7 SKUs, but I applaud them for not following traditional checkout cart convention.
Next, even though they don’t offer free shipping on everything, it’s not only very clear how to get free shipping, but also realistically easy to do so.
As we move out of our cart into the checkout process, you see that it’s a super quick checkout process: only 4 steps, and you’re already on step 2. Again, good use of clean typography and simple black/white contrasting colors.
No distractions. No upsells. It’s super simple, which makes the process very quick, which makes it that much more likely I won’t abandon the process.
Now, want a warm & fuzzy feeling? How about proceeds from your purchase going to public classrooms? Yes please!
And finally, time to hand over your money. Which they have the balls to call out explicitly.
Yes this copy won’t work for everyone, but it works perfectly for their product.
You’ll also note you don’t need the full billing address, nor the credit card type. Because they use a great PSP in Stripe, they can make the credit card entry – again – super simple.
It’s simple, but nothing is hidden or dubious. It’s authentic to their brand, but serious in the right ways.
Is it perfect? Not necessarily. Could everyone do this? Absolutely not; Amazon this site is not. But do they do a lot of things well? I’d argue definitely yes.
We are all buying more and more, not less, online. So let’s hope companies follow Cards Against Humanity’s examples so that we all benefit from a better online shopping experience.