Northline

Overview

What this is.

Northline is a representative storefront and merchandising console: catalog, cart, checkout, and the admin that keeps inventory honest. Built as a studio study of how we approach commerce when the catalog is a product, not a theme.

The challenge

What was actually hard.

Most storefronts look finished on the homepage and fall apart in search, variant selection, and the admin used at 7 a.m. The challenge was a system merchandisers could operate without a developer in the loop, with a checkout path that does not invent a new layout on mobile.

Objectives

What we optimized for.

1. 01

   A storefront with editorial presence and operational density

2. 02

   Variant and inventory rules in the API, not in the template

3. 03

   Checkout as a short, observable pipeline

4. 04

   Preview content before it is public

Strategy

The bet.

Separate the buying surface from the operating surface. The storefront is content-driven and fast. The console is a dense table product. Both share one catalog model so a price cannot exist in two truths.

Discovery

What we had to learn first.

We mapped the objects: product, variant, offer, inventory lot, order, fulfillment event. Interviews with operators (placeholder personas) surfaced the unofficial spreadsheet used to 'fix' the current site every week — that spreadsheet became the admin backlog.

UX

How it behaves.

Storefront IA is browse → filter → product → cart → checkout, with a persistent cart and honest stock messaging. Admin IA is catalog, orders, and exceptions. Empty states teach the next action instead of showing a sad illustration.

Design

How it looks when it is working.

A restrained commercial language: cream type on near-black, maroon as a merchandising accent, not a sale-sticker red. Product media is large; UI chrome stays thin. The admin reuses the same tokens at higher density.

Engineering

How it is built.

Next.js storefront, typed checkout API, PostgreSQL as the catalog of record, Stripe for payment, object storage for media. Inventory mutations are transactional. Webhooks from payment and fulfillment are idempotent.

Architecture

Boxes we can defend.

Technology

The stack for this study.

Implementation

The work, in order.

1. 01Catalog schema and admin mutations
2. 02Storefront routes with caching on public pages
3. 03Cart as a server-backed resource
4. 04Checkout + webhook reconciliation
5. 05Image pipeline and CDN
6. 06Preview deploys for merchandising experiments

Result

Outcomes — illustrative until measured.

Replace with measured results after a client engagement.

Voice

A quote worth keeping — later.

“Replace this with a client statement about operating the catalog without a developer ticket for every price change.”