Affordances and signifiers in content design

An example of eCommerce UX failure

Regular readers will know that I’m a bit obsessed with affordances, signifiers and interesting edge cases of UX failures that send users down an unhappy path.

Today’s example comes from that old digital bulldog of the internet, B&Q [diy.com]. And to make it even more juicy, not only is it a confusing journey for users, but:

• It’s multichannel
• It involves data
• It highlights the importance of content design
• It reinforces that signifiers apply to words and content as much as buttons and UI.

Yum.

(For non-UK audiences: B&Q is a DIY, gardening and general home improvement store in the UK who have been around forever, and whose digital experience has always been playing catch up to the rest of the interweb. They’ve gotten better in recent years, but it’s clear there’s a metric f-ton of legacy system issues on the back end, judging purely by how very much the journeys don’t work.)

The user journey

Let us start with an innocent Sunday afternoon task — Let’s order some DIY and gardening supplies for the new house.

Well the wife has a voucher code that’s been emailed to her as part of her B&Q loyalty program. Let’s take a look at that first.

A B&Q email with offer and discount code. Note: code has been modified for publication.

Looks simple enough. It’s always odd to use your primary button colour (white) for other blocks that are not clickable, but that’s just standard not-understanding-how-the-brain-works UX and then knocking out emails willy nilly. And don’t get me started on centre-aligned text…

Either way, we’ve understood that there’s a voucher available, that Ts&Cs apply (because there are asterisks everywhere), that there’s a deadline, and that I will need to input various identifying data.

So let’s get the order up on my MacBook and see where I can input this voucher code…

1. Sign in
2. Checkout screen
3. Add voucher…?

A decision has been made by the design team at this point to bundle all vouchers together and hide them behind one drop down.

So we’ve got one drop down with three functions, and we’re hoping that the user will read the words on the screen. (#NeverAssume)

Fair enough, I’ve done that before when working for an eCommerce site that had a bazillion different types of discount methods. However, given that I’m already signed in, and therefore pre-populated with my “B&Q Club” number could we not remove that redundancy in the drop down?

Entering voucher code

OK, so here we meet the fun part, where two grown adults who work in digital design said “wtf” repeatedly whilst staring at screens, with one of them saying “you’re going to write an article on this, aren’t you..?!”

Yes, yes I am.

A B&Q email with offer and discount code and the invalid form field. Note: code has been modified for publication.

Cue head scratching — what have we missed that means we can’t use this code?

It’s over the right spend amount…? Yes it is.

Are we within the stated deadline? Yes we are.

Are we signed in? Cue a circular journey of signing back in to B&Q Club, which of course we are already signed into…

Then, oh look, there are probably more Terms & Conditions involved — because there’s an asterisk.

Note: code has been modified for publication.

So let’s go read those Ts&Cs (yes, yes we did).

👉 Do you see it yet?

A B&Q email with offer and discount code and Ts&Cs. Note: code has been modified for publication.

That’s right.. they’ve included an asterisk as part of the code, whilst ALSO using it everywhere else to mean “Term & Conditions apply” — a well known signifier and content design pattern.

Really? Can it be this simple (and stupid)?

Why yes. Yes it can.

Note: code has been modified for publication.

Why in the name of <insert deity> would that be a back end rule you would expose to the user?!

Why did this happen to user(s) brain?

This issue was caused by:

1. A false affordance (use of asterisk as part of the code, but not relating to Ts&Cs) and
2. The impact of Gestalt and the law of similarity.

What do I mean by this?

The law of similarity

The shape contour of the discount code, being in all capitals, makes it one item. The asterisk is an additional/extra component that is ‘other’, and by appending it to the end of the code, became ‘Ts&Cs’.

If the asterisk had appeared in the middle of the code, it would have been odd, but perhaps more obvious that it was part of the same single item.

Why content is central

As I’ve mentioned before, if your back end is broken, it will always manifest in some way on the front end to the user — whether that’s disconnected data plumbing, some internal teams that don’t talk to each other, or completely broken business processes. Users will see it when your service doesn’t work.

Users will see when your service doesn’t work.

But it’s not enough that the journeys connect and make sense and that the UI is consistent and designed for human brains to interact with. It is also essential that the content deployed across platforms is understandable and usable for the users as they complete their tasks on your platforms with your brands.

This kind of experience is a good example of why content is central to Product Design:

• Things should be tested — with live content on wherever possible with live experiences
• The content design team need to work closely with any data or technical architecture team, especially where live data is being pulled in
• Emails comms (marketing, loyalty) should be feeding performance data through to UX teams so that they can see that voucher codes are not being used (because the answer isn’t send more emails!)
• UX and product teams should have an understanding of the company’s service delivery and systems design — not just polishing buttons on screens or redesigning flows based on hypotheticals.

If B&Q has content designers, they need to empower them to connect to every person, stakeholder, system and process bringing content into the digital ecosystem.

Assuming that you have some kind of data or back end delivering live content, assuming you know about it because you’re working with systems and data architects, assuming you know it’s a problem because you’re doing real user research (not testing with people who work in your company) then you would be able to put any number of temporary fixes or mitigating magic into the UX to help users out.

Hello 👋

Did you know, you can 👉 subscribe for free to get notified of any new articles I write. Woot.

I’ve even made a ton of helpful lists, depending on what you’re most interested in.