The cross-product ribbon

Pair with Lighthouse to keep the memory across every run →

That sentence appeared this week, in muted type, directly under the hero subhead on /ship. Its mirror appeared on /lighthouse:

Pair with Ship to run the loop that produces the memory →

One line. Below the subhead. Above the CTA buttons. We've been calling it the ribbon, and putting it there — rather than anywhere else we considered — was the month of positioning work crystallised into about forty pixels of vertical space. This is a short post in the spirit of the champagne-over-teal note: a tiny visible decision, a disproportionate consequence.

Three places this ribbon could have lived

We argued about it for longer than the work took. There were three real candidates besides the one we chose.

The header nav, as a dropdown. A "Products" item with Ship and Lighthouse underneath. This is what most multi-product companies do, and it's why most multi-product companies feel like a holding company instead of a company. The dropdown asks the reader to do the work of figuring out the relationship — and most readers don't.

A mega-menu. Bigger, more diagrammatic, with descriptions. This is what you do when the two products are genuinely separable and a sophisticated buyer is comparison-shopping. Ours aren't separable; the mega-menu would have lied for us by presenting them as if they were.

A banner at the top of every page. Site-wide, persistent. This is the option that announces the relationship, and announcement is exactly the wrong mode. A banner that sits on the docs, the blog, the pricing page, and the changelog turns the relationship into a slogan. The reader stops seeing it on page two.

None of them won. The ribbon won.

Why the ribbon won

The connection between Ship and Lighthouse is conditional. It only matters if you're already reading about one of them. A reader who landed on the careers page does not need to be told, in that moment, that the two products pair. A reader on the changelog doesn't either. A reader on /ship, three lines into the Ship pitch, evaluating whether the loop is the thing they need — that reader is the one for whom the cross-pitch is suddenly load-bearing. They're already reasoning about which problem we solve. The ribbon arrives exactly when the question "and what about the other half of this?" forms in their head.

Putting that sentence in the nav would have meant the reader had to interrupt their own reasoning to go look for it. Putting it in a banner would have meant they saw it before they had a reason to care. Putting it under the subhead means they meet it at the exact altitude they're already operating at.

Contextual placement beats global placement when the connection between two things is conditional. The header is for things the reader always wants — pricing, docs, login, contact. The ribbon is for things the reader sometimes wants, depending on what they're reading right now. Those two categories shouldn't share real estate, and the failure mode of treating them as if they do is the reason most multi-product sites feel chaotic — they've put conditional things in unconditional surfaces and unconditional things in conditional ones, and the reader pays the cost of sorting them.

The positioning lever

Here's the part that surprised us. We thought the ribbon was an IA decision. It turned out to be the single most consequential brand decision of the relaunch.

Without it, Harbor Gang reads as two products on a shared domain. Two products on a shared domain is a category — the holding-company category — and it signals that the products were bolted together for distribution reasons rather than because they belong together. With the ribbon, the same two pages read as two halves of one thing. Each page makes more sense in the presence of the other, and points at the other, and the reader assembles the company-shape from the gesture rather than from a brand statement we'd have to write.

We did not write a brand statement. We wrote two ribbons. The reader does the rest.

What this opens up

Now that the pattern exists, the other surfaces it suggests itself for are the obvious ones. Case studies get a one-line sibling pointer at the foot of the writeup, so a story about a Lighthouse customer ends by gesturing at the Ship loop that produced their memory. Integration mentions inside docs pick up the same shape — a contextual line at the moment the cross-product surface becomes relevant, rather than a permanent banner pretending it always is. Even blog posts can carry a sibling pointer in the sidebar when the topic crosses the boundary, the way this one does.

Every one of those is the same idea: surface the connection where the reader is already thinking about it, and nowhere else. The discipline is in the nowhere else.

The ribbon is small. The architecture it enforces is not.