Atelier North
An editorial-first storefront concept where the lookbook is the shop
/ Overview
Atelier North is a concept study — a self-initiated brief for an outerwear label whose customer reads the journal before they buy the jacket. We treated it as a real product: type and color decisions, a working front-end, and an editorial system that earns the brand's tone.
/ What each case study includes
Brief: The product idea and audience we set out to serve
Process: How we moved from sketch to system
Decisions: Type, color, grid & motion choices, and why
Build: Stack, performance posture, and what we'd ship
Status: Concept / spec work — not a shipped product
/ Challenge
Most fashion e-commerce reads like a catalog — product grid, filters, checkout. We wanted to design for the kind of brand whose story carries the same weight as its product page. Atelier North is an outerwear label that needs to feel like a print issue first, a store second — without losing the conversion path.
/ Provided Services
Brand identity
Mark, type system, and editorial voice built around the tension between function (technical outerwear) and form (gallery-grade presentation).
Editorial art direction
Typographic hierarchy, image pacing, and a grid that lets the brand pace itself slowly across the page — lookbook spreads sitting between collection grids.
E-commerce UX
Product detail, collection browse, and checkout flows designed so the editorial system stays intact when the visitor switches into shopping mode.
/ Solution
Type-led layout with hero typography that carries the season's voice. Photography runs full-bleed; navigation collapses out of the way. Cart and checkout were treated as part of the editorial system, not bolted on after — so the buying flow doesn't break the brand.
/ Tech stack
Next.js + Shopify Hydrogen
Headless commerce so the editorial layer stays unbound from storefront defaults. SSR for fast first paint on imagery-heavy pages.
GSAP + ScrollTrigger
Section pacing, type reveals, and the parallax behavior between editorial spreads — motion as a tool for tone, not decoration.
Sanity Studio
Editorial CMS for lookbooks, journal posts, and seasonal hero content the brand controls without touching code.
