Works

Our Plans

About Me

Contact

Quartier des Spectacles International

Quartier des Spectacles International

TOOLS:

TOOLS:

Framer, Figma

Framer, Figma

TIMELINE:

TIMELINE:

4 months

4 months

ROLES:

UX/UI Designer • System Lead

Designing a Scalable ux System

Designing a Scalable ux System

Quartier des Spectacles International (QDSI) commissioned a scalable UX system for 11 exhibition microsites, each accessed through QR codes on-site and designed to deliver artist information, educational content, interactive activities, and reflection prompts on mobile.

The experience needed to feel cohesive within the QDSI brand while remaining visually flexible to reflect each artist’s unique identity.

Industry

Industry

Culture

Culture

Check Live Site

Check Live Site

Visit Mobile experience

Visit Mobile experience

Pricing

Premium Plan

THE CHALLENGE

THE CHALLENGE

Core constraints:

Core constraints:

  • Long-form text based content

  • Long-form text based content

  • G4A & GTM integration

  • G4A & GTM integration

  • Animation + interaction goals

  • Animation + interaction goals

  • No existing design system

  • No existing design system

QDSI required the creation of 11 unique bilingual microsites with no pre-existing templates or system. each site needing its own identity while maintaining consistent UX across languages.

THE RESEARCH

THE RESEARCH

  • Audited cultural exhibition and museum microsites

  • Audited cultural exhibition and museum microsites

  • Benchmarked UX patterns for long-content readability

  • Benchmarked UX patterns for long-content readability

  • Applied WCAG accessibility principles

  • Applied WCAG accessibility principles

  • Identified repeating structural patterns to enable system design

  • Identified repeating structural patterns to enable system design

Design System Development

Design System Development

Goal:

Goal:

Allow visual uniqueness per exhibition while using consistent UX structures.

Allow visual uniqueness per exhibition while using consistent UX structures.

Designed a modular UX system based on:

  • Shared grids and layouts

  • Reusable navigation patterns

  • Modular content components

  • Brand-adaptable visual theming

Designed a modular UX system based on:

  • Shared grids and layouts

  • Reusable navigation patterns

  • Modular content components

  • Brand-adaptable visual theming

IMPLEMENTATION

IMPLEMENTATION

Each microsite was deployed using the same UX framework with customized branding.

Each microsite was deployed using the same UX framework with customized branding.

  • Audited cultural exhibition and museum microsites

  • Audited cultural exhibition and museum microsites

  • Benchmarked UX patterns for long-content readability

  • Benchmarked UX patterns for long-content readability

  • Applied WCAG accessibility principles

  • Applied WCAG accessibility principles

  • Identified repeating structural patterns to enable system design

  • Identified repeating structural patterns to enable system design

Measurement & Optimization

Measurement & Optimization

Results:

Results:

  • Average bounce rate ~40% (strong engagement for microsites)

  • Average bounce rate ~40% (strong engagement for microsites)

  • Consistent interactions across installations

  • Consistent interactions across installations

  • GA4 events implemented via Google Tag Manager

  • GA4 events implemented via Google Tag Manager

  • Unique microsite IDs for individual performance tracking

  • Unique microsite IDs for individual performance tracking

  • Interaction-based triggers for navigation and activities

  • Interaction-based triggers for navigation and activities

outcomes

outcomes

  • 11 live bilingual microsites delivered

  • 11 live bilingual microsites delivered

  • Scalable UX infrastructure established

  • Scalable UX infrastructure established

  • Framework ready for future exhibitions

  • Framework ready for future exhibitions