Zara UX Teardown: The Homepage That Doesn't Scroll

Capture Zara's US homepage full-page, the whole document top to bottom, and the file comes back exactly one viewport tall. One screen. There is nothing underneath it.

That is not a bug in the capture. It is the thesis of the entire storefront.

Four words and a hamburger

The homepage is two full-bleed campaign photographs sitting side by side, with the ZARA wordmark set across the right-hand frame at a scale no other element on the page approaches. Around them: a hamburger in the top-left, the word SEARCH top-right, and a stack of three more — BAG, LOG IN, HELP — down the right edge. Two arrows, ← and →, sit in the bottom corners.

That is the complete interface. No promo bar, no category rail, no product row, no footer, and not one price. The page advances sideways through those arrows rather than downward through a scroll, which is why the capture is a single screen. There is no "down" to go.

Almost every convention of an apparel homepage has been declined here, and the effect is genuinely striking. It is also the aesthetic-usability effect drawing on a very large line of credit. Zara spends that credit withholding the things a shopper came for.

The specific cost is information scent. BAG, LOG IN, HELP tell you about your account. None of them tells you what the store sells, what a coat costs, or where the men's section is. All of that lives behind the hamburger, on a desktop viewport with room to spare. Collapsing navigation on a wide screen reliably suppresses discovery of everything inside it, and here that is the whole catalog.

The controls are set like footnotes

Move to the women's new-arrivals page and the pattern hardens. Two more full-bleed images, the wordmark straight across the seam between them, the same four labels on the right.

Bottom-left, in grey type smaller than anything else on screen, sits the word VIEW above two digits: 1 and 2. That is the density control: it re-lays the entire grid between one and two columns. It is rendered at roughly the visual weight of a page number.

Two problems compound there. The first is contrast, light grey on white at small sizes, across the whole chrome. The second is target size: the tap area for "1" and "2" is a single character each, with the neighbouring option a few pixels away. These are the controls Zara has chosen to make its primary navigation, and they are the least visible, least clickable things on the page.

Numbered sections, and still no shelf

The men's page introduces the one piece of real information architecture in the flow, and it is numbered like a table of contents: |01| COLLECTION and |02| EDITORIAL, stacked at the left edge, with FILTERS directly beneath them.

The distinction being drawn is a good one, things to buy versus things to read, and numbering it suggests a deliberate reading order. But COLLECTION, EDITORIAL and FILTERS are all set in the same grey, at the same size, in the same column. A section switch and a filter entry point are different kinds of object: one changes what page you are on, the other narrows what is on it. Presented identically, they stop being distinguishable until you click one and find out.

Now look at what fills the screen under COLLECTION, the tab that promises product. A ZARA × aaronlorine collaboration card, a full-height model shot, and one button: VIEW EDITORIAL. The only call to action on the shopping tab points at the reading tab. Whatever COLLECTION is for, the page's single clickable commitment is to send you to the other section. The numbering is a promise the layout doesn't keep.

Withholding price is one of the more reliable ways to lose a ready buyer (NN/g). Nike does the same thing on its SNKRS feed, but there it is load-bearing: those products are supply-constrained, so availability genuinely matters more than cost. Zara's constraint is the opposite. This is high-turnover fast fashion where price is much of the proposition, and the interface is running a scarcity aesthetic over an abundance business.

Search is where the store finally talks

Type "coat" into that lone SEARCH label and a different, far more competent website appears.

A category rail materialises down the left — WOMAN, MAN, KIDS, HOME, MASSIMO DUTTI — the top-level structure that was locked inside the hamburger two screens ago. The query sits in a full-width field with an × to clear it. And the grid finally captions itself: a NEW flag, a product name, a price, and a + that adds to the bag without leaving the page.

SHORT PLEATED TRENCH COAT · $ 99.90. After three screens of photography, that is the first fact the store has offered.

The grid is good. It is also where the seams show. Product names truncate mid-word, ZW COLLECTION SHORT TRENC… and ZW COLLECTION 100% WOOL L…, while the prices beside them always finish. The column had room for one of them. Someone decided which field gets to complete its sentence, and comparing two wool coats now means opening both, because the grid shows you enough to be curious and not enough to choose.

Then the results drift. By the second row, a query for "coat" is returning mascara. There is no visible sort control and no facet panel. The same tiny VIEW toggle, now offering 2 or 3 columns, is still the only lever on screen. Faceted filtering is what turns a large result set into a decision, and on the one page where Zara has admitted it has a catalog, it is the thing least available.

What it gets right

The restraint here is consistent, deliberate, and executed at a level most retailers cannot reach.

The photography carries the merchandising. No badges, no urgency banners, no "Only 3 left" in a category built on shouting.

Numbering the sections. |01| and |02| tells you there are exactly two things here and implies an order. Most retailers would have used five tabs and a dropdown.

The inline +. Adding to bag straight from the grid, with no detail-page round trip, is the most shopper-respecting decision in the whole flow. It saves a step on the action the entire business depends on. And it exists only on the search results page: the surface a visitor reaches by already knowing what they want, and the one Zara has otherwise treated as the back of the shop. The best interaction in the store is on the page the store seems least interested in.

The one change

The catalog exists, the grid works, the add-to-bag works. All of it is gated behind a search box.

So let the browse pages inherit what the search page already does. The left rail Zara built for search results — WOMAN, MAN, KIDS, HOME — is the same structure hiding in the hamburger. Put it on the browse pages. Let the grid caption itself there too. The editorial spreads can stay exactly as they are, first-screen and full-bleed. What has to change is that a visitor currently needs to recall what they came for and type it, because the interface will not show them the options.

The shopper this fails is specific: the one who wants a coat but doesn't yet know Zara calls it a ZW Collection midi trench. Search rewards people who already have the vocabulary. Everyone else is looking at a photograph.

There is a version of this test you can run on your own product in about a minute, and it's the truncation that gives it away. Open your grid and read the two fields side by side. If the price always finishes its sentence and the product name never does, you have already ranked them, whether or not anyone decided to.

Take it further

The lens behind this teardown — can a visitor tell what they're looking at, and what to do next — is the UX Clarity framework, the same one we apply in a Full UX Audit. For how that scoring turns into prioritized fixes, read what a real UX audit looks like.