Amazon UX Teardown: One Grid, Three Labels, No Comparison

Amazon sells more things than any interface can reasonably present, so it does something most catalogs are too polite to try: it stops arranging and starts scoring. Open Best Sellers and every product card carries an orange rank flag — #1, #2, #3 — and that number is the entire case for clicking. Open Today's Deals and the flag becomes a percentage. Open New Releases and it becomes a date. The cards underneath never change. This teardown walks the three public browse pages and asks what the badge is really doing, and what the interface stopped doing once the badge showed up.

Three pages, one grid

Step through the tour of Best Sellers, Deals, and New Releases, and watch how little the layout moves:

Left rail, wide content well, four cards across, a horizontal arrow at each end. One template. The sort key is the only thing that changes. That buys an enormous engineering economy and a real usability win: a shopper who learns one page has learned all of them, which is consistency and standards doing exactly its job (NN/g). The interesting part is what happens to the parts of the template that can't stay identical.

The rail changes jobs without changing clothes

On Best Sellers, the left column is a plain alphabetical list of department names. It is navigation: click Electronics, you leave for a different page.

On Deals, the same column, in the same position, in the same type, becomes something else entirely: radio buttons for Department, checkboxes for Brands, a Customer Reviews control, a price slider. It is a facet panel: click one, and the grid to the right narrows in place. Two different contracts wearing one visual identity (NN/g on filters vs. facets). A shopper who taught themselves the rail on one page has been taught the wrong thing on the other.

Only one page lets you narrow, and it's the discount page — the one you're least likely to arrive at with a target. The rank pages, where the whole premise is "we already decided," give you a list of links.

Rank is an answer, not a comparison

The Best Sellers grid shows four items and then says "Page 1 of 5."

To see the fifth bestselling item in a category you press an arrow, and the first four leave. There is no view in which a category's top twenty sit still on one screen. Comparison is the actual job of a browsing shopper, and here it has to be done from memory, one carousel frame at a time. Human working memory is the wrong place to do it (NN/g on recognition vs. recall). The rank badge fills the gap. It doesn't help you compare. That's the point of it.

That trade works when a shopper arrives knowing what they want, which on Amazon it usually is. The shopper who came to decide gets nothing to decide with: no sort control, no side-by-side, no way to hold two candidates still while you look at a third. The "Page 1 of 5" label is the only scent that more exists at all (NN/g on information scent).

On Deals the badge changes species and gets louder: "32% off," a struck-through list price, a live countdown on the card next to it. The struck-through number is the anchor, and the discount is measured against a figure the page itself supplies (NN/g on anchoring).

New Releases gives the game away

Put New Releases next to Best Sellers and the only differences are the H1 and the tab underline. Same rail, same carousels, same orange #1 flag on the first card. The page is titled "Hot New Releases" and subtitled "Our best-selling new and future releases." Even recency is served to you pre-ranked by sales.

The homepage ranks nothing at all

The homepage inverts everything the browse pages do. There is no hero, no headline, no ranked anything — a strip of promo tiles, then three rows of four cards, each card itself a four-up grid of its own: kids' shoes, jewelry, beauty picks, dorm essentials, gift card brands. Something like fifty destinations at identical weight, with no hierarchy between them, which leaves the visual system with nothing to say about where to start (NN/g on visual hierarchy). Two-thirds of the way down sits a lone white band: "See personalized recommendations," and a Sign in button. The page's answer to its own flatness is to ask you to log in.

What this means for your product

A single browse template with a swappable sort key is cheap to build and fast to learn. If you maintain three bespoke list pages, Amazon's economy is worth stealing.

The badge is the part to be careful with. A rank, a discount, or a "new" flag is a verdict: it saves the user a decision by making it for them. That's a gift to a decided shopper and a wall for an undecided one, and the tell is whether your page still supports comparison once the badge is there. Amazon's doesn't. So before you ship the badge, check what it replaced. If the answer is the ability to see two options at once, you removed the decision rather than simplifying it.

One more, cheaper: if a control's meaning changes between two pages, change something a user can see. The rail that navigates and the rail that filters should not be twins.

Take it further

The lens behind this teardown — can a user tell what a page is offering, and compare their real options inside it — 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.

Sources: NN/g — Consistency and Standards · NN/g — Filters vs. Facets · NN/g — Recognition vs Recall · NN/g — Information Scent · NN/g — Anchoring · NN/g — Visual Hierarchy.

Ready to find where your product's polish and your users' understanding have drifted apart? Apply for a Full UX Audit →