Case 07 · Hugo Boss · Esprit · via Machinas (agency) · Machinas era

Creative direction and brand-system UX for Hugo Boss & Esprit

Creative direction and brand-system UX for Hugo Boss and Esprit, delivered through Machinas. Title arc: Art Director → UX Lead — the case that proves the brand-side of the design career.

Role

Art Director → UX Lead

Scope

Art direction · Campaign · Brand-system UX · Newsletters · Content structure · Contact / help surfaces

Status

shipped

Context

Two flagship fashion brands, two distinct brand systems. Machinas was the agency. The work spanned art direction, brand expression in digital surfaces (newsletters, content structure, contact pages), and creative direction across deliverables.

Role & team

Officially Art Director, then became UX Lead at Machinas. The arc itself is part of the story — moving from creative direction into product UX while keeping brand fluency.

What I led

  • Art direction across brand-side deliverables for Hugo Boss and Esprit.
  • Brand-system UX in digital surfaces — newsletters, content structure, help and contact pages.
  • Branding artefacts (branding-steps.ai source files in the archive).

Process — three acts

Act I — Hold the brand system

The work started from brand constraints: two global fashion names, two established visual languages, and agency-side delivery where every surface had to feel aligned before it could be useful.

Hugo Boss site — art-directed mock-up
Hugo Boss menswear lookbook — full art-directed page
Hugo Boss lookbook — long-form composition
Hugo Boss — open-item product view, art-directed
Hugo Boss "Night Watch" newsletter — seasonal art direction
Hugo Boss FALL newsletter — art-directed long form

Act II — Translate brand into digital structure

I moved from art direction into digital UX surfaces: newsletters, content structure, help and contact pages, and the supporting brand-system artefacts that made those surfaces coherent.

Hugo Boss — homepage UX exploration
Hugo Boss — UX flow for the storefront
Hugo Boss — returns flow UX
Hugo Boss — Apple Watch ecommerce companion UX
Esprit — site-wide flows and state map
Esprit — contact and help-centre UX
Esprit — modal interaction patterns
Esprit — popover interaction patterns
Esprit — mobile grid system

Act III — Move from creative direction to UX leadership

The important career shift was not abandoning brand work; it was bringing that judgement into product structure. This case marks the bridge between campaign and brand craft on one side, and product UX leadership on the other.

Outcome

  • Art-directed and delivered digital surfaces across two global fashion brands: campaign pages, seasonal newsletters, content structure, and help/contact flows.
  • Translated visual brand language into UX structure — interaction patterns, site-wide flows, modal and popover systems, and a mobile grid — ensuring surfaces felt brand-coherent, not just functional.
  • Delivered an Apple Watch ecommerce companion UX alongside the main storefront work.
  • Produced brand-system artefacts (source files, pattern documentation) that made the visual direction reusable and hand-off ready.

What I'd do differently

I would document the translation layer more deliberately: how brand decisions became UX decisions, what moved from visual direction into interaction structure, and which principles could travel into later product systems. The work did that implicitly; I would now make the operating model visible.

Next case

IESE Business School →