The page
designed last.

A dead end, twelve times

Before I touched mine I pulled twelve shipped 404 and error pages. Coinbase, Instagram, Square, Maze, Remote, Height, Skiff. Eleven of the twelve share one layout. A small icon on top, “Page not found” in bold, one grey sentence, one button. Rive adds a mascot lying on its back.

None of them knows what you asked for. None of them knows what the site contains. They say sorry and point at the front door.

The error page is the only page every visitor can reach without being invited, and it is the only page nobody assigns to anyone.

A wrong address is a typing problem

A 404 happens because a string was wrong. A link had a typo, a page moved, someone remembered a name and guessed the rest. The browser already has the string. It is in the address bar.

So the page shows it. The address you asked for is set large, in mono, and a line goes through it. Then the page does what a good colleague would do when you hand them a wrong address: it says the closest right one.

Type /heineken and it offers both Heineken cases. Type /covestro and it names the Covestro case. Type /foo and it says nothing is close, and shows you the whole site instead. It stays quiet more often than it should, which is the side I chose to be wrong on.

Then you can fix it

The address is not a label. It is a field. Tap it and type. Every page on the site re-ranks underneath as you type, best match first. Enter opens the top row. Arrow keys move through the list. Escape gives you the original address back.

It is a search box wearing the clothes of an error page. The place where the typing went wrong is the place where the typing gets fixed.

Seventeen pages, nine hundred words

A search over seventeen pages does not need a server or a service. It needs the seventeen pages described well. Each page in the index carries its own keys in four groups.

What the page says. Banking, advisory, credit, funnel, coating, haptic, wearables, roadmap, backlog, tokens, wireframes.

What the page is called. The client or product the page itself names, and the plain word for it. Heineken, and beer. Covestro, and coating. obseed, and sports.

What people look for on a portfolio. Words no page prints and every visitor types. Portfolio, cases, cv, contact, hire, product owner, ux lead, blog.

German. Kredit, Bank, Beratung, Bier, Beschichtung, Lebenslauf, Kontakt, Betriebssystem. The site is read in two languages, so the index speaks both.

Eight hundred and ninety-six keys, twelve kilobytes, inline in the page. Every key traces to something the page says or is plainly about. There is no key for a tool the page does not mention, no key for a client the page does not name, and no key for a person. The index knows what is on the site and nothing else, which is why “beer” finds a B2B ordering platform for a brewer and “salesforce” finds nothing.

How a page wins

Each typed word is scored against each page’s keys. A whole key is worth one. A prefix is worth 0.7, so “cov” already ranks Covestro first. A word inside a key is worth 0.4. A near miss is worth 0.6, and the tolerance scales with length: one wrong letter in heineken, none in bier. A page’s score is the mean over the typed words, plus a tenth for its title, a little more for its address, and a bonus when the whole query is one key. A second pass compares the typed text to each address as a whole, which is how “heinekn” still finds Heineken.

At 0.6 the top page is named, its matching letters ink in, and Enter is armed. Below 0.3 the list falls back to the site’s own order. In between, the list re-ranks but nothing is named and Enter stays off.

Those thresholds took the longest, and there is a third one for the address pass. They were set by typing what a stranger might type and reading what came back, not by reasoning about them. Set them too high and “obsee” ranks obseed first but refuses to open it. Set them low and three letters open a page, which is where it sits today: “tra” arms the sports roadmap off “training”. I would rather it opened one page too many than stayed silent.

What it refuses to do

It does not know people. Clients and products are keys because the pages name them. No person is, and the site is findable by role and never by name.

It does not know pages that were taken down. A removed case is not a key, not a suggestion, not a near miss. It is gone.

The scoring runs on the phone and the typed string is never sent. The site counts page views at the edge, so I know you landed here, not what you typed. I could log it. I chose not to.

It does not animate for its own sake. The strike draws once. The list reorders with a measured move of 220 milliseconds. Under reduced motion neither animates. Without JavaScript the address is absent and the full index still works.

The page that cost the least

The whole thing is one HTML file and a stylesheet, on top of the site’s own CSS and script. I had audited this site three times and never opened this page.

That is the point. A visitor who lands on a dead end and leaves with the page they meant to find has seen how the rest of the site was made.