Good Sort

Good Sort sells wearables for dogs and the people walking them: harnesses, rope leads, jackets, tees and caps. The brief I set myself: build the actual store instead of mocking it up — a working collection, cart and product flow, so you judge the design by using it.

It’s one page with a lot going on: a hero, a category strip, the collection, a campaign panel, a set builder called Shop the Walk, and an editorial strip called Out and About. All the shop logic runs in the browser; there’s no checkout backend behind it yet.

Pet gear online usually splits two ways: utilitarian and cheap, or so styled you can’t tell what you’re buying. This label is priced like fashion, so the store had to look the part without losing the boring-but-vital harness info — size by chest girth, colourways, what it’s made of.

The other problem was range. Products span dogs and humans, so a single flat grid would have made a harness and an overshirt look like the same kind of purchase.

Catalogue model first: every product is one entry with kinds, colourways, sizes, a blurb, details and two image slots. Filters, search, quick view, the cart and the set builder all read from that one source, so adding a product needs no new UI.

Then the shell — header, cart drawer, quick view, search overlay, mobile menu — followed by the sections. If a photo hasn’t been shot yet, its slot shows a flat brand-colour panel with a caption, so a gap looks planned instead of broken.

The words follow the photos, not the other way round. When a shot showed a knotted bandana, a silver hook or a smooth shell, the description changed to match, and a strip of campaign shots that had been passed off as customer photos under made-up handles became “Out and about”, captioned as what it is.

Only one colourway of each piece was photographed, so the rest are that photograph repainted: pixels are picked by hue, which on a coloured base leaves hardware, piping, stitching and the ground untouched, and each pixel keeps its own shading so folds still read as fabric. It stands in for a full shoot rather than replacing one, and it has two edges: a dark piece can’t be turned convincingly light, and a chalk piece has no hue to select on, so the repaint tints its hardware along with the fabric. Those colourways wait for a camera.

A browser pass checks it at three widths: every swatch on every card, the filters, each dialog by keyboard, and a reduced-motion run. It caught the hero going invisible with reduced motion on, and a bandana that vanished from “Everything”.

A working storefront: eight pieces in the catalogue, filtering by kind, quick view with colour and size selection, a cart drawer, search, and a set builder that puts a harness, lead and bandana together as one purchase.

It’s a prototype, not a trading store — no checkout backend yet, so there are no sales or traffic numbers to claim. The point is the brand, the interface and the build coming from the same hands.