What peanut butter packaging can teach you about user experience design

So what is that thing all fancy peanut butter lids have in common? They all say “Oil separation is natural, give it a good stir” on them (or something similar). And if you’ve ever bought fancy peanut butter yourself, you know why: when you first open a jar, you always find an unappetising layer of oil between you and the peanut butter.

Now, when like me you have a habit for fancy peanut butter, you don’t even notice the layer of oil anymore. You just open the jar and get stirring. But if you’re a n00b to fancy peanut butter — and especially if you’re used to more commercial peanut butter that is always pristine and stabilised when you first open it — there’s a big chance you’ll have an unhelpful reaction on opening that jar.

You might think you’ve bought a defective jar or that the peanut butter has gone off, and take it back to the shop to complain and get a new one. (Or maybe you’ll just chuck it in the bin and leave a scathing review online somewhere.) Alternatively, you might think you’re supposed to pour the oil off instead of stirring it back in, which will make the rest of the jar more difficult to spread. Or you might just be generally confused — all of which could still lead to complaints at the shop, or bad reviews, or buying a different brand next time.

And yes, some people might successfully intuit that you’re supposed to stir the oil back in. But I would guess that the ubiquity of the “oil separation is natural” messaging, across so many lids on so many different brands, means that a significant proportion of peanut butter users are not working it out for themselves. (The Google results also suggest this is a question a lot of people ask.)

In other words, in UX terms, there’s a clear user need to address here:

As a new fancy peanut butter buyer
I want to understand what the deal is with all this oil
So I can fully enjoy my toast

Identifying the user need is one thing, but addressing that need effectively is quite another. And this is where peanut butter packaging can teach you about good website UX.

Obviously there are lots of ways you could address the user need of explaining oil separation. For one thing, you could put a little message about it in small print underneath the ingredients, on the back of the jar, as the image below shows.

But, to put it in website terms, this is like having to scroll to the bottom of the page or click another link, just to find out how you’re supposed to fill in the form you’re looking at.

Another option would be to have it in giant letters on the front of the jar, even bigger than the logo. There’s no denying people would see the message that way, but again, in website terms, this is like forcing people to read the T&Cs before they even get to your homepage.

Maybe you could take a more targeted approach, and have a second lid inside the first, so that as soon as you open the jar you see the message on the second lid — you’re forced to interact with the message, just like those annoying cookie pop-ups.

But no. All these different peanut butter packaging product designers have come to the same conclusion: just put it on the lid. Jar lids are usually blank, except for maybe an expiry date, so a new “user” will very likely notice the message, and stir the peanut butter. Veteran peanut butter users, on the other hand, will barely even glance at it, and it won’t get in their way.

In website terms, this could be something like a contextual cookie notice that only forces you to interact with a cookie consent question when you’re actually trying to do something that will drop cookies – like watch an embedded YouTube video. Or it could be conditional form questions that are only revealed if they’re relevant to a user (based on their previous answers). The important thing is that any user messaging you’re sharing is available only and exactly when and where you need it, and doesn’t force you to engage if you don’t need to.

Incidentally, if you read my pasta rant, you might remember my cynical opinion that most of what goes onto product packaging is about marketing and branding, rather than good UX thinking. It’s reasonable to ask whether the “Oil separation is natural” message is really just a way to prominently work the word “natural” onto the packaging and trick chumps like me into ditching the pale, oil-laden brands. Likewise, “give it a good stir” might be an exercise in creating a friendly brand tone of voice.

(Editors note. If you missed the first link and are still asking "What's the problem with palm oil?", 👈 click this one to find out)

But just because there might be a marketing benefit to these things, doesn’t mean it can’t also be good UX. In fact, it’s more successful as a brand experience precisely because it’s married to a good user experience. After all, they could have printed “Oil separation is natural” on the side of the jar, where it would have accomplished the brand goal but not the UX one. It’s on the lid — on all these different brands — because someone clever realised that you can tick both boxes with a single stroke.

So next time you’re designing a website, think about peanut butter — and make sure any instructions you have for the user only appear when they’re opening the jar.