If, like me, you cook a lot of pasta, maybe you’ve noticed a trend in the packaging design the past few years: more and more brands are including the “number” of each pasta shape in giant text on the front of the box.

In theory these numbers correspond to the shape of the pasta, so that if, say, you’re unsure on the difference between mezze linguine and linguine, you can just look for number 13 and be confident you’re buying the right thing.

But in practice, these numbers are often unique to each brand, and there’s no Central Pasta Authority that decrees all linguine must carry a certain number. So the linguine I like to buy are, at various times, number 7 when I buy Pastificio Liguori, no 6 when I buy La Molisana, no. 13 when I buy Barilla, and so forth.

Three packets of linguini showing three different shape numbers

Above

Three packets of linguini, three different shape numbers

In other words, the pasta number is a completely useless piece of information. It's a bit of theatre, to imbue your pasta with an artificial sense of authenticity — somewhere in Tuscany, Luigi Barilla retrieves pasta die number 13 from his drawer of shapes, and attaches it to his pasta maker — when in fact Luigi Barilla probably hasn’t touched a pasta maker in years. I’m sure for some brands, a product designer just made up the number during the packaging design.

But okay, so what? It’s a bit of harmless marketing. Why should you care?

I’ll tell you: because that fancy visual design comes at significant cost to the user experience of your pasta box. And if prioritising visual design over UX design can so brutally mess up the relatively simple user journey of pasta, you’d better believe it can do even more damage to the UX of your complicated website.

User stories: Saturday morning shopping

As I said above, the reason the pasta number is on the packaging is to sell you a story about where the pasta came from (and more importantly, to sell you the pasta). I’ll leave it up to the consumer psychologists to weigh in on whether it does that effectively.

But for now let’s take the number at face value, and assume it’s there to help you identify what shape of pasta is in the package. The user story is something like this:

As a person doing the shopping
I want to know what shape pasta is in the package
So that I can cook dinner effectively


Once you break it down so simply, you realise what a bad job the number does of helping this user, even if you believe that’s why it’s there to begin with. Because the number differs from brand to brand, at a minimum you have to find one other piece of information to work out what shape is actually in the package: either the name of the brand, or the name of the shape. Clearly, it would be more efficient just to print the name of the shape and be done with it.

Even better, just print a picture of the shape on the box, and then the user doesn’t even need to read anything — they can just look at the shape and know if it’s what they’re looking for. (In an ideal world there would also be some Braille on some consistent part of the box, so that users who can’t see still know which kind of pasta they’re getting.)

Let’s be honest, though, this is more thought than most people put into buying pasta. When you’re:

A person doing the shopping

There’s really only one user story that matters when you’re comparing different boxes of pasta:

I want to know how much the pasta costs
So that I can stay within my grocery budget

Even as a privileged person who buys name brand pasta at Sainsbury’s, I will always buy whatever is on offer, because at the end of the day, unless my Italian stepmother is coming to visit, nobody at the table is going to notice much difference between Barilla and Napolina. The only number that matters is the price; anything else printed on the box is just a distraction.

And if you need any more evidence of that, just compare the packaging on your supermarket’s budget store brand. I bet you won’t find any pasta number there at all.

User stories: Wednesday night cooking

There’s a more fundamental reason, though, why I hate those giant pasta numbers on the front of the box:

As a person cooking dinner
I want to know how long to cook the pasta
So that I can cook dinner effectively

When I’ve got twenty minutes to get dinner on the table on a Wednesday night, I frankly couldn’t care less what pasta attachment Luigi Barilla pulled out of the drawer six months ago. I want to know how long the stuff in my hand needs to go in the boiling water for. At this point in my user journey, there is literally nothing else I care about: I’m at the bottom of the funnel, I’m ready to convert, I just need to know which button to click.

To understand how crucial this user story is, you only need to look to the country where they cook more pasta than anyone else. In Italy, very often, you only find one giant number on the front of the packet, and that’s how many minutes to cook it for. Once pasta is just a staple, instead of an exotic taste of a foreign country, you can cut through all the marketing fluff and get down to how you design a truly effective user experience into your packaging.

And again, if you need any more evidence, just look to your supermarket’s budget store brand. Without all the pictures of crumbling windmills and sunbaked landscapes, you’re far more likely to find the information that matters.

A photograph of Asda store brand linguine, showing a large cooking time number clearly on the front of the package

Above

The only number that matters: cooking time

User stories: your website

Obviously it’s a bit silly to hold pasta boxes to the same standards of UX design you’d (hopefully) use when building a new website. But as an extreme example of visual and brand design getting in the way of effective UX design, looking at pasta boxes this way is helpful. Sadly, this kind of thing is more common than you’d think in web design — and as I said at the start, websites need to do a lot more than a pasta box. If you don’t properly consider the fundamentals, you’re going to end up with a website that’s a nightmare to use.

Consider the website we built for Saffron Hall. Throughout our discovery research, it became clear that the most important thing users needed to be able to do was browse the programme and book tickets. So the “What’s On” link in the navigation has an underline to make it stand out more — and when you drop down to a smaller screen, “What’s On” becomes the only link that’s not hidden inside the mobile navigation menu. Most of the time, there’s also a link to “What’s On” in the site hero section.

This is one of those things that sounds obvious when you explain it, but it doesn’t have to be this way. If we’d discovered that most people were actually using the site to get directions to the venue, we could have made “Visit Us” the stand-out navigation item. The important thing is that we thought about it before we started making the page look nice, or we might have ended up with something that was no use to anyone.

Below

Left, the actual Saffron Hall homepage; right, an imaginary Saffron Hall homepage without any thought given to UX.

These might be silly, made-up examples, but this sort of thing happens in real life all the time. Consider the two websites below, both for Michelin-starred restaurants in London.

The one on the left looks very inviting, but in order to actually do anything you need to scroll halfway down the page. And let’s face it, if you’re considering a visit to this restaurant, you already know it has three Michelin stars, so there's little value to the user in taking up so much valuable screen space with that information.

Instead, as a user, you probably want to do one of two things: see the menu, or book a table. Like Alain’s Michelin-starred rival across town, on the right below, you should really be able to do at least one of those things from the moment the site first loads.

To be clear, I’m not saying you shouldn’t try to design a website that looks great. But, like a pasta box, you need to keep in mind that people are probably looking at your website because they need to do something or find out a piece of crucial information — not because they want to look at a pretty picture. If you can’t cater to your users’ most basic needs, next time they’ll probably pick a different brand of pasta.