Northwind — Studio Meridian case study

The brief

Northwind sells observability to engineers, and engineers do not believe screenshots. The old site led with a static PNG of a dashboard, which is the least persuasive possible way to sell a product whose entire value is how good its dashboard is. The brief was to put the actual thing on the page.

Constraints

The dashboard had to be interactive and fast, without shipping a charting library to a marketing page.
It had to survive a failed script load — a broken demo is worse than a screenshot.
Every value a chart shows must be reachable without hovering, and identity must never rest on colour alone.
Pricing needed to be honest enough that an engineer could check the arithmetic.

What we did

01

Charts rendered twice, written once

The chart module runs at build time and in the browser. The SVG is in the served HTML before any script executes, so the demo degrades to a real, readable chart rather than an empty box, and the client upgrades it with range switching, a crosshair and live updates.

02

The palette was validated, not chosen

The categorical series colours were run through a colour-vision validator against this site's exact dark surface — lightness band, chroma floor, deutan and tritan separation, and contrast. The interface accent is a neighbouring step of the same blue, so the UI never competes with the data.

03

Hover is not the only way in

The crosshair snaps to the nearest data index and lists every series at that point; the identical readout is produced by arrow keys. Every chart also has a table view, so no number on the page is gated behind a pointer.

04

Pricing with real crossovers

The calculator does genuine tiered arithmetic — platform fee, per-unit overage beyond each allowance, a retention multiplier on storage, an annual discount. There are volumes where Team beats Business and volumes where it does not, and it will tell you which one you are in.

What it cost

The dashboard runs on generated data rather than a live feed, which is stated on the page. Using a seeded generator instead of Math.random() means it is at least internally consistent and identical on every reload.

Every project trades something away. A case study that does not say what is a brochure.

How it was checked

Range switching, crosshair, keyboard readout, table views and the live ticker all driven in Chromium.
Pricing asserted to exact figures — $359 for Team at 100 GB and 25 hosts — not merely that a number appeared.
Palette re-validated against the shipped surface colour; every text colour clears 4.5:1.