The object becomes the interface.
Inside a Louis Vuitton boutique, the sales associate is the Maison. The bag is the artifact. Anything between them — a tablet, a screen, an app — breaks the moment the client is paying for. A tool that draws attention to itself, even once, turns a personal encounter into a transaction, and the encounter is the product Louis Vuitton is actually selling. The design problem: a tool the associate actually wants to hold, one that improves the encounter without ever announcing itself. Each moment had to feel like a service gesture, earned on its own. The whole had to read as one.
The work landed on two surfaces: a scrollable microsite that frames the design language, and Maison, a 16-screen mobile interaction system that walks one sales associate through one client’s day, from morning sign-in to a piece returning for resale a decade later. Same motion grammar across both surfaces; same sense that the technology is in the room only as long as it serves.
I led the work end to end: interaction model, motion choreography, visual language, and editorial voice across both surfaces. One brief, held from the first motion beat to the last committed screen.
Opener film for the engagement — cut across shared history, the present partnership, and what comes next — paced to build feeling first, information second.
Direction · Edit · Sound — DRL
A document opens once. An environment stays open. The pitch covered six distinct capabilities: generative AI, brand defense, omnichannel commerce, data governance, multi-brand operations, sustainability. No two people in the room were there for the same one. A linear deck puts a data-governance lead through the same slides, in the same order, as a sustainability lead — whether or not either subject is what brought them to the table.
The work became a scrollable microsite instead. Six subjects tile the page, each in its own color; choose one and the others quiet down, so the page settles into a single subject and holds there, one screen at a time. Each reader starts with what actually matters to them.
One subject in focus.
Everything else waits its turn.
Each service moment lands as a story beat, not a screen state. Maison is a 16-screen mobile interaction system built around five service moments the associate can hold in one hand.
Sign-in opens with the brand mark forming into place, a moment of recognition. Authentication matters most: a viewfinder opens, a cream beam eases across the bag while a four-step provenance check runs underneath, and the usual spinner disappears into that same motion — the wait is the check, not something layered on top of it. Then the bag answers: a warm light grades across the leather, and the verdict lands on the object, not the screen. The object becomes the interface, and the device gets out of the way.
On the editorial microsite, the same brand-mark morph loops inside a halfway-cropped phone, extended past the section edge, faded at the cut, a quiet signal that there’s more inside.
Every interruption, a ceremony.
One easing curve, applied across every surface. The brand-mark morph between diamond and flower moves in three beats: slow approach, quick transition, soft landing. That same curve (sine-in-out, no linear snaps or sudden stops) also paces the page load, the authentication scan, and the tile arrival. One curve in four places means the system reads as a single object moving consistently, not four screens each animated on their own schedule.
Tap any moment to feel the curve. The page-load loader, the authentication scan, the capability tile — same easing across all three.
A cream scanline crosses the bag while a four-step provenance check runs underneath. The wait — usually a spinner — is hidden inside the choreography itself; the bag visibly registers the warm light passing across.
Open the auth screenThe wordmark fills bottom-up as the page loads behind it — same easing as the diamond ⇆ flower morph above. One mark, ticked frame by frame against the percent counter.
Reload the prototypeCapability tiles arrive as the section locks in — a slow approach, a soft overshoot, a settled landing. Same rhythm as everything else, applied at a different moment in the session.
View on the micrositeThe prototype is the spec. The whole system is plain HTML, CSS, and JavaScript, with no framework or build step standing between a motion choice and the code that runs it. Each of the 16 screens has a design brief committed alongside it in the repository, naming intent, screen states, and motion timing the way an engineer reads them. The authenticate brief, for example, names the four-step provenance pipeline with individual timing for each check. The handoff is the repo. The spec and the running prototype are the same artifact.
From morning sign-in to a resale a decade later — every screen captured. Each tile opens the rendered screen.
The medium is the service.Every choreography is a small promise about how the brand behaves.
Four screens, three product types each — handbag, jewelry, trunk.
The architecture flexes before motion is layered on.
Five navy layers move from a near-black stage to a lighter surface tone, doing the work of depth so no card needs a harsh border to read as raised above the page. Every card surface runs on a gradient, never a flat fill: elevation reads as a subtle lift, not a color change.
See the full token setA lift, not a color change.
Object as Interface is documented as the system’s load-bearing pattern: the physical bag becomes the interface, moving through three stages across seven screens. Presentation lets the associate read a client’s context before they arrive. Authentication places the object inside the viewfinder itself, running a live provenance check. Handoff turns the object into the client’s passport, not a receipt. The component spec states the test for anything added to the system: does it advance the associate’s knowledge of the object, confirm its identity, or transfer that knowledge to the client? If not, it’s chrome, not function.
The AI layer keeps its two jobs separate: Granite writes the reasoning behind a recommendation, while a live provenance graph, four checks against stitch density, hardware micro-engraving, leather grain, and cert ID, verifies whether an object is what it claims to be, never a language model’s guess.
Explore the component libraryI made every choice; AI sharpened many of them. Before any motion was drawn, I built a corpus from LVMH’s 2020 annual report (where the Group Managing Director named remote, digitally-assisted service as the pandemic’s most lasting change for sales associates), the 2006 LVMH × IBM Information Server engagement, the 2018 IBM × Tommy Hilfiger AI-design pilot, and LVMH’s current Omnichannel & Data org, then briefed Claude on all of it. The corpus shaped what “ritual” meant for a Louis Vuitton associate, what IBM × LVMH precedent the page could honestly claim, and what tone the editorial voice could carry. The same partnership ran in the dev loop: brief, critique, decide — often five or six iterations to a beat before each beat read as intent.
Six passes to one beat.