Skip to content
Web DesignBrandingCase Study2024

Maison Noir.

Editorial-grade e-commerce for an haute couture house — silk-smooth page transitions, lookbook storytelling, and a checkout that converts browsers into collectors.

Client
Maison Noir Couture
Role
Designer & Developer
Year
2024
Stack
Brand Refresh · E-commerce UX
Maison Noir hero visual

Overview

Maison Noir's couture deserved a runway, not a catalog. I designed a headless e-commerce experience where every product page scrolls like a fashion editorial — fabric-close macro shots, silk-drape page transitions, and typography that whispers luxury.

Brand RefreshE-commerce UXMotion DesignShopify Headless

Goals

  • 01Translate couture craftsmanship into digital form
  • 02Lift add-to-cart from inspiration-heavy browse sessions
  • 03A brand system usable across social, print, and packaging

The experience

Designed to be felt, not just seen.

Maison Noir homepage on laptop

Process

How it came alive.

  1. 01

    Brand Audit

    Rebuilt the identity around a single idea: 'black silk, gold thread.' New wordmark, mono-spaced accents, champagne photography direction.

  2. 02

    UX Architecture

    Re-mapped the funnel: lookbook → piece → story → purchase. Reduced checkout to two steps with Apple Pay.

  3. 03

    Motion Language

    A 'drape' easing curve (custom cubic-bezier) applied to every interaction so the whole site moves like fabric.

  4. 04

    Headless Build

    Shopify headless + Next.js, skeleton UIs, and predictive prefetching for instant collection browsing.

  5. ⚡

    Animations used

    • Silk-drape page transitions
    • Macro-zoom product reveals
    • Infinite lookbook scroll
    • Cursor-following fabric glare

Design system

One palette.
One voice. Everywhere.

Typography scales, spacing rhythm, motion tokens and a color system engineered for both midnight-black luxury and sun-lit readability — documented so the brand never drifts.

#0a0908

#e8e2d5

#c9a227

#3d3428

Type pairing

Clash Display / Satoshi

Inter for long-form · Space Grotesk for data

The results

+180%

Conversion rate

3.2x

Time on lookbook

98

PageSpeed score

“Our online boutique finally matches our atelier. Clients screenshot the website to show their friends — that never happened before.”
Layla HaddadFounder & Creative Director, Maison Noir

Next case study

Skyline Estates