By Peter Ramsey

11 Dec 20

Buying a greetings card online Company Logo
Moonpig6 min read
Listen

Buying a greetings card online

Buying a greetings card online Featured Image

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.

Please rotate your device to view this slideshow

Note, this won’t work if ‘rotate: lock’ is on in your device settings.
3863
3864
3865
3866
3867
3868
3869
3870
3871
3872
3873
3874
3875
3876
3877
3878
3879
3880
3881
3882
3883
3884
3885
3886
3887
3888
3889
3890
3891
3892
3893
3894
3895
3896
3897
3898
3899
3900
3901
3902
3903
3904
3905
3906
3907
3908
3909
3910
3911
3912
3913
3914
3915
3916
3917
3918
3919
3920
3921
3922
3923
3924
3925
3926
3927
3928
3929
3930
3931
3932
3933
3934
3935
3936
3937
3938
3939
3940
3941
3942
3943
3944
3945
3946
3947
3948
3949
3950
3951
3952
3953
3954
3955
3956

👇

That’s all for the slideshow, but there’s more content and key takeaways below.

Slide 1 of 95

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'

Generic 'create an account'

Extra 'remind me' feature

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.

null image

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.

null image

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?

Option A
Option B

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.

null image

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?

null image

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.

null image

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.

You’ve finished this study

+1

Become a BFM+ member to track your progress, create a library of content and share learnings within your team.

You’ve finished this study

Other studies picked for you

How Product Psychology Could Stop Uber Drivers From Stealing

How Product Psychology Could Stop Uber Drivers From Stealing

How upstream thinking could reduce stolen orders, avoid tip-baiting and increase driver happiness.

How to Reduce Churn by Doing Your "One Thing"

How to Reduce Churn by Doing Your "One Thing"

When it comes to onboarding, it's often more effective to do just one thing (really damn well).

BFM+ Exclusive

Unlock all 77 case studies with BFM+

View Plans
A Masterclass in User Activation (96% of them)

A Masterclass in User Activation (96% of them)Preview this content

Discover the art of setting a goal and then using that to immediately create the perception of success.

All of the UX analysis on Built for Mars is original, and was researched and written by me, Peter Ramsey.

Never miss the free UX analysis

Free case studies, the moment they’re released, plus a digest of the best UX Bites every few weeks.