By Peter Ramsey
11 Dec 20
Buying a greetings card online
Where do you buy Christmas cards if you can’t physically get out to a shop? Well, there’s a good chance you’d turn to Moonpig.
Moonpig is an online greeting card store, and although they do sell other types of gifts, the core of their business has been cards since they were founded more than 20 years ago.
So you’d think that after all this time, the user experience of buying a card would be great by now, right? If it’s the absolute heart of what they do.
Summary
🚪
What the doorway effect is.
🌎
The gravity of interesting content.
🗒
How to handle blank pages better.
☔️
Why you need to track error messages.
4 UX takeaways
1. The Doorway Effect
Do you ever walk into a room, and immediately forget what it was that you were about to do? We all do occasionally, and it’s delightfully named the ‘Doorway effect’.
As a crude summary, this momentary lapse in memory is caused when our brain switches between tasks with different contexts and environments, such as leaving the kitchen where you were cooking dinner, to entering the garage looking for a screwdriver.
But this isn’t just limited to the physical world—it happens digitally too.
For example, after personalising and adding a card to your basket, you’re shown a generic account creation screen, and then asked if you want to be reminded about buying cards next Christmas.
Generic 'create an account'
Extra 'remind me' feature
Ordering a card should be a very focused experience. Interrupting the user’s state of flow with the combination of these steps may create that moment of unnecessary confusion.🏖
🏖
1. Change of environment
The generic sign up pages look different. They have a new design, and nothing on the page explicitly mentions purchasing a card.
🚦
2. Change of context
This additional step changes the context from a purchasing decision (this card), to a planning task (for next Christmas).
To clarify, most users won’t encounter this issue at all. Just like how most of the time I can remember what it was that I entered a room for.
But occasionally, perhaps more often when there are influential external factors—like trying to simultaneously have a conversation—this user experience will fall over.
And when it does, the user may find themselves sat for 20 seconds trying to remember what it was that they were doing.
2. The gravity of interesting content
Imagine that you’re walking through a foreign city and looking for somewhere to eat. In the distance you see the golden arches of McDonalds. What happens next?
Well, it’s possible that you’ll go into autopilot and ignore the other options around you. The ease of getting a McDonalds outweighs the effort required to weigh up new options, despite you knowing that healthier and tastier food is probably available.
It could be said that McDonalds has a sort of gravity, that pulls hungry people in.
This also happens in the digital world. Sometimes it’s called clickbait, but often it’s just the gravity of really interesting or relevant content.
Moonpig have an example of this, take a look at their Christmas cards page.
For someone who’s browsing Christmas cards in mid-December, the promise of being able to get it delivered before Christmas is almost impossible to ignore.
And that’s not inherently a problem. It can be used to great effect, and I’m sure it has an incredible click through rate.
But when designing a product, you need to be aware that this gravity comes at a cost: people basically ignore everything around it.
As it turns out, the user could actually save a click by using the functionality above that section, and jump straight into more filtered results. But they won’t, because the promise of delivery before Christmas is just too enticing.
So by adding a specific banner with such a high ‘pull’, (rather than the heading of the entire page explaining the delivery schedule) you may actually give the users a slightly worse experience overall.
Or to reuse the analogy, you thought that having a McDonalds next to your bakery would bring you more customers, but instead, all your customers are eating Big Macs.
3. This page is intentionally left blank
Some cards come with content printed on the inside, and so it makes sense that Moonpig lets the user see what’s inside them before purchasing one.
Here’s a quick challenge for you: which of the following is a blank page, and which is of an image waiting to load?
You’d never be able to tell, as they’re identical—and that’s a big UX problem.
The problem isn’t that the images load slowly—they’re actually very fast—it’s that a new user doesn’t know if an image is loading, and that ambiguity can be confusing.
The only real option that the user has is to wait for enough time to pass until they’re confident that if there were an image, then it’d have already loaded.
Which is crazy, really. Imagine if no product on the internet ever said that it was out of stock, and instead you needed to wait and watch a ‘checking stock’ spinner, until you were satisfied that there were none available.
Really, there needs to be a prompt. Something that lets the user know that the page has intentionally been left blank, even if it’s just a subtle cue.
4. Tracking errors
You’ve just personalised a card, added it to your basket and now you want to proceed to the checkout. Looking at the screenshot of your basket below, where do you click?
A very large percentage of you would have clicked on the red Checkout button on the right-hand side. After all, that’s how most checkout processes work.
But you’d be wrong, because you’d see an error message telling you to add a recipient first.
And that’s frustrating, because with a few basic design tweaks, Moonpig could probably stop people from ever seeing this error message again:
✅
1. Disable the checkout button
It could have been disabled until the user has added a recipient.
🎯
2. Button placement
The checkout button is just too clickable, as it’s located exactly where you’d expect a checkout button to be—so people won’t keep looking for other options.
☝️
3. An additional step
The ‘Checkout’ button could just take you to a new screen that asks you to add recipients for all your cards. No error required.
What’s more frustrating, is that if Moonpig have set up their analytics properly, then this error will be so obvious.
But you’d be surprised how rare it is for companies to actually be tracking error messages effectively. I see it all the time.
