Visual design, UX, Code

Fashion
Love Story

Interactive storytelling about Dirk Bikkembergs for MoMu Antwerp - leather meets Lycra, told as a love story.

Role Designer & Developer (solo project)
Year 2026

The Brief

Ahead of their 2026 exhibition celebrating 40 years of the Antwerp Six, MoMu (Antwerp’s Fashion Museum) launched a digital storytelling series. The brief was simple but demanding: translate a legendary fashion narrative into a custom, highly interactive digital experience—moving away from static digital articles into something visitors actively experience.

I chose Dirk Bikkembergs, centering the narrative on his defining breakthrough: the unexpected collision of high-end fashion leather and performance sportswear Lycra—two materials from entirely opposing worlds.

Rather than presenting a traditional linear timeline, I reframed his legacy as a literal love story. Bikkembergs acts as “The Matchmaker,” while Leather and Lycra exist as two characters who meet, clash, fail, and ultimately unite. The journey culminates at the iconic 2001 runway show at Milan’s San Siro Stadium, where Bikkembergs became the first designer to merge high fashion with professional football.

Requirements

Match MoMu’s vibe without being boring: Stick to MoMu’s clean, high-contrast black-and-white look, but don’t just build another standard museum website. It needed to feel completely custom and alive.

Make it a real longread: Write enough good, detailed content so someone actually wants to sit back and read the whole story, instead of just quickly skimming past giant blocks of text.

Interactions that mean something: Every animation had to actually help tell the story. No useless fancy effects just for show—and it had to work seamlessly on phones, too.

The Process

Brand Discovery & Research

Before opening Figma or writing any code, I had to figure out how to blend two very different vibes: MoMu’s museum identity and Dirk Bikkembergs’ rebellious style.

I put together a quick Brand Sprint board in FigJam to set some boundaries, figure out who’s actually going to use this, and find the real story thread to build around.

Research & Brainstorming ↓

Explore the full research, brainstorming, and brand mapping.

Full Figjam Board

Setting the Vibe

MoMu isn’t a boring, dusty museum—it’s an authority in Antwerp fashion, but it definitely has an edge. I used tone sliders to figure out where the site should sit:

  • SnobbishCasual & Fun: Shifted toward Casual. Fashion history can feel overwhelming. The site needed to explain cool archival stuff without feeling like a history textbook.
  • TraditionalRebellious: Shifted way over to Rebellious. Bikkembergs was a complete rule-breaker. He put military boots on high-fashion runways and held a couture show inside a massive football stadium. The web design had to feel just as bold and energetic.
  • ClassicModern & Experimental: Shifted toward Experimental. High-energy animations with GSAP and ScrollTrigger, paired with sharp, bold Space Grotesk typography.

Personality Sliders

Who is this for?

Museum sites get all kinds of visitors, so I focused on two main groups:

  • Design Students & Young Creatives (18–35): Looking for visual inspiration and behind-the-scenes process. They don’t want just facts; they want high contrast, movement, and bold ideas.
  • Curious Museum-Goers: People who like diving into stories, but prefer doing something interactive over reading huge walls of text.

Target Audiance

Finding “The Spark”

While digging through old archives from MoMu, Encyclopedia.com, and NSS Sports, I noticed Bikkembergs’ work shifted over four big phases:

The Shoe Era (1980s): Tough military boots, laces around the heels, and heavy leather. Rough, masculine, and rigid.

The Awkward Phase (Late 1990s): Delicate lace-like leather and shiny pantsuits. It felt forced—leather was losing its tough personality trying to act like soft high couture.

The Realization (Circa 2000): During a fitting for his new line, a professional model got sick. A guy working in the stockroom stepped in to try on the clothes. Turns out, he was the captain of a local football team. He gave totally honest reactions: some outfits felt “ridiculous and uncomfortable,” while others let him actually move. Bikkembergs realized the real test wasn’t a runway model—it was a real athlete.

The Big Breakthrough (2001): Combining high-tech sports fabric (Lycra) with heavy tailoring (Leather), ending in a historic runway show inside Milan’s San Siro football stadium.

The Spark

The Concept: Framing History as a Love Story

I kept asking myself: How do you make niche fashion history interesting to someone who usually skips museum exhibits?

The idea was simple: Tell it like a love story. Instead of treating it like a boring fabric lesson, I gave the materials actual personalities:

  • Leather: Stiff, classic, and structured. Born in tough military boots. She’s been famous forever, but she’s stuck in her old ways.
  • Lycra: Energetic, stretchy, and athletic. Born on the sports track. He’s all about speed and comfort, but high fashion never took him seriously.
  • Dirk Bikkembergs: The Matchmaker. The guy who realized these two materials shouldn’t fight each other—they actually belong together.

I broke the website into a 7-stage relationship journey, making sure every stage matched real facts from his career:

Separation → First Meeting → Conflict → Understanding → Compromise → The Wedding (San Siro) → Legacy

Even the “bad dates” in the story are real design experiments of his that didn’t work out!

The Concept Ideation

Layout & Interactions

Before picking colors or styling anything, I built low-fidelity wireframes section by section to lock in where the scroll triggers and pinned sections would go.

I cut out any animations that felt like empty eye-candy and kept only the ones that helped tell the story:

  • Lighting up the Stadium: A clap button that builds up noise until the stadium floodlights turn on.
  • Styling the Athlete: An interactive dress-up canvas where you balance leather and Lycra on a body yourself.
  • Looking at Athletes: Eyes on the screen that physically follow your mouse cursor to mimic watching someone.
Full Wireframes ↓

Explore the early wireframe flows. Some layouts evolved during final polish and visual design.

Layout

Visual Direction

Combining a love story with Bikkembergs’ tough, sporty aesthetic was tricky. I stayed away from soft shapes and pastel colors. Instead, I went with heavy editorial typography (Space Grotesk), raw leather textures, and a sharp black-and-white layout with a neon lime-yellow accent.

The story itself brings the romance - the visuals stay fast, raw, and industrial.

Design Process & Iterations ↓

Typography, color, and layout all went through several rounds of iterations. See the full process behind the final direction.

Stylebard

Page Structure

01. Preloader - Meeting the Characters

Before any text shows up, two simple shapes set the mood: a bright neon circle that squishes (Lycra) and a hard black square (Leather). You get their personalities before reading a single word.

Preloader

02. The Hero — Walking the Runway

Instead of static images, scrolling down makes the leather model walk right off the photo and down into the next section. Your scrolling is what moves the show forward.

03. Pinned Monologue — His Words, Your Pace

Dirk’s monologue stays stuck on the left side of the screen while timeline cards scroll past on the right. Hovering over a card reveals extra details, so you can choose how deep you want to dive in.

04. Cursor-Tracking Eyes — The Turning Point

When the story gets to the part where Dirk starts observing real athletes, big typography eyes lock onto your mouse cursor and track it everywhere. Reading the page turns into the act of watching.

Cursor-Tracking Eyes

05. Scattered Text — The Wild Idea

When he starts questioning his old methods, his thoughts pop up as scattered, jumping words instead of neat paragraphs—making it feel like someone figuring things out in real-time.

06. Uncovering Bad Dates — Learning from Mistakes

His failed style experiments start hidden inside closed cards. You have to hover over them to see why they tanked, making you actively uncover his trial-and-error process.

Cursor-Tracking Eyes

07. Archive Mode — Testing the Fits

Flip the switch to turn on “Archive Mode,” and you can compare three outfit experiments — two that didn’t work, and the one that finally did. Move your mouse over a look and it works like a flashlight in a dark room — only the small circle around your cursor lights up, revealing a handwritten note on why each one was rejected, or, for the winning look, why it finally clicked. Move away, and it fades back into the dark. On phones, where there’s no cursor to sweep across the screen, every note is simply shown at once instead.

08. Scroll Lightbulb — The “Aha!” Moment

As you scroll through his observation notes, the background gradually brightens until it fills the whole screen—a literal lightbulb moment matched to your own reading speed.

09. Style the Athlete — Trying the Formula

Instead of just reading “put leather on the shoulders and Lycra on the legs,” you click target points on an athlete to test different combos yourself. Wrong guesses don’t cost you anything — you just try again until it is correct.

10. Light Up the Stadium — The Finale

Before revealing the 2001 San Siro runway show, you have to clap to build crowd energy. Once the energy hits 100%, the stadium floodlights kick on and the fashion show starts. Under the hood, your mic feeds a live volume reading through the Web Audio API - the bar climbs while you clap and drains if you stop, so half-hearted clapping doesn’t cut it. The mic access shuts off the moment the show starts (or if you skip), instead of quietly running in the background.

11. The Ticket Footer — Closing the Loop

Instead of a boring email sign-up box at the bottom, the final form is styled like an authentic 2001 San Siro match ticket (“Kickoff Now Open,” “Join the Lineup”).

The Code ↓

GSAP, ScrollTrigger, and JS running the whole experience. See how it's built.

CThe Finale

Final Result

What Worked

Treating the project like a real 7-stage relationship story gave every single animation a purpose. Nothing felt like random movement thrown in just to look cool.

What I’d Improve Next

A lot of the interactions here are built mouse-first, Archive Mode’s flashlight effect, the cursor-tracking eyes, and on mobile they mostly just fall back to “show everything at once” instead of getting their own touch-native version. It works, but it’s not the same experience. Next time, I’d design the mobile version of an interaction from the start, not as a fallback for the desktop one.

The full experience is hosted online — try it live using the sidebar link. See the button below to try it live.