Quartier des Spectacles International
Quartier des Spectacles International
TOOLS:
Framer, Figma
TIMELINE:
4 months
ROLES:
UX/UI Designer
Designing a Scalable ux System
Designing a Scalable ux System
Quartier des Spectacles International (QDSI) commissioned a scalable UX system for 11 interactive art installations across Montreal. Each installation required its own microsite while maintaining a cohesive visual identity across the project.
The challenge was to design a flexible system that could adapt to different artists, installations, and content types while remaining consistent, accessible, and mobile-first.
The result was a modular design framework used across all microsites, allowing each installation to retain its identity while fitting within the broader QDSI ecosystem.
Quartier des Spectacles International (QDSI) commissioned a scalable UX system for 11 interactive art installations across Montreal. Each installation required its own microsite while maintaining a cohesive visual identity across the project.
The challenge was to design a flexible system that could adapt to different artists, installations, and content types while remaining consistent, accessible, and mobile-first.
The result was a modular design framework used across all microsites, allowing each installation to retain its identity while fitting within the broader QDSI ecosystem.
DESIGN INTENT
DESIGN INTENT
FOR qdsi mediation
FOR qdsi mediation
Each microsite is structured around three core sections: Discover, Interact, and Reflect.
Each microsite is structured around three core sections: Discover, Interact, and Reflect.
The goal is to guide visitors through the exhibition experience:
Discover gives context about the artwork and the artist.
Interact explains how visitors can engage with the installation.
Reflect encourages visitors to think about the themes of the piece through short prompts and questions.
The goal is to guide visitors through the exhibition experience:
Discover gives context about the artwork and the artist.
Interact explains how visitors can engage with the installation.
Reflect encourages visitors to think about the themes of the piece through short prompts and questions.
The challenge was designing a system that could communicate these ideas clearly while remaining flexible enough to work across multiple installations.
The challenge was designing a system that could communicate these ideas clearly while remaining flexible enough to work across multiple installations.
The Design
The Design
FOR qdsi mediation
FOR qdsi mediation
After establishing a user flow for the mediation experience, an video animation for each microsite, a reusable design for all the main pages, and a template format for the content pages, the project's structure was completed.
After establishing a user flow for the mediation experience, an video animation for each microsite, a reusable design for all the main pages, and a template format for the content pages, the project's structure was completed.
Animations were introduced to improve feedback and create a more engaging experience while keeping performance optimized for mobile devices.
Animations were introduced to improve feedback and create a more engaging experience while keeping performance optimized for mobile devices.
At this stage the design system was finalized and prepared for development.
At this stage the design system was finalized and prepared for development.
aNALYTICS
aNALYTICS
FOR qdsi mediation
FOR qdsi mediation
More than just a design tool, these microsites were created to be able to gather data their users behavior. To understand how visitors engaged with each installation, analytics tracking was implemented across all microsites.
Google Analytics 4 was configured with Google Tag Manager, allowing custom events to track key interactions within the experience.
More than just a design tool, these microsites were created to be able to gather data their users behavior. To understand how visitors engaged with each installation, analytics tracking was implemented across all microsites.
Google Analytics 4 was configured with Google Tag Manager, allowing custom events to track key interactions within the experience.
Results
Results
Initial analytics showed strong engagement across the network of microsites:
• ~40% average bounce rate
• Consistent interaction patterns across installations
• Clear navigation through the Discover → Interact → Reflect structure
Initial analytics showed strong engagement across the network of microsites:
• ~40% average bounce rate
• Consistent interaction patterns across installations
• Clear navigation through the Discover → Interact → Reflect structure
EXPLORE LIVE INSTALLATIONS
EXPLORE LIVE INSTALLATIONS
FOR qdsi mediation
FOR qdsi mediation
The design system was used to launch 11 interactive microsites across the QDSI mediation program. Each microsite was built using the same scalable framework while adapting to the unique narrative of the installation.
The design system was used to launch 11 interactive microsites across the QDSI mediation program. Each microsite was built using the same scalable framework while adapting to the unique narrative of the installation.
(THIS IS A MOBILE ONLY EXPERIENCE)
(THIS IS A MOBILE ONLY EXPERIENCE)
