Développement web & UX 2025

Teatre Nacional de Catalunya

Refonte complète de la plateforme digitale du Teatre Nacional de Catalunya avec Drupal : agenda dynamique.

8 mois 6 spécialistes 2025 tnc.cat

Services

Développement Drupal
UX/UI Design
Accessibilité WCAG AA
Optimisation des performances
Architecture de contenus

Services associés

01Le défi

Le Teatre Nacional de Catalunya gère un agenda avec une forte rotation éditoriale, des pics de trafic lors des campagnes et premières, et le besoin critique de guider l'utilisateur vers l'achat de billets en 2-3 clics. L'équipe éditoriale avait besoin d'une publication rapide avec contrôle qualité, conformité accessibilité AA et performances stables sur mobile.

02La solution

Nous avons développé une refonte UX centrée sur les tâches : navigation par agenda avec filtres intelligents, fiches de spectacles avec hiérarchie visuelle claire et appels à l'action cohérents. Nous avons implémenté Drupal avec composants réutilisables, workflows éditoriaux et une base de performance solide avec stratégie de cache et préparation CDN.

Stack technique

Comment c'est construit

Front

Twig Templates du front
Tailwind CSS Système de styles

Moteur

Drupal 10 CMS structuré

Données

Varnish Cache HTTP
Redis Cache en mémoire
Cloudflare CDN et sécurité

03Architecture

Comment circule une requête

Un éditeur publie ou met à jour la fiche d'un spectacle dans Drupal, avec un flux de relecture et de prévisualisation avant la mise en production
La requête d'un visiteur passe par Cloudflare puis par Varnish, qui sert la page depuis le cache lorsqu'il existe
En l'absence de cache, Drupal construit la fiche avec ses composants réutilisables (dates, distribution, tarifs) en s'appuyant sur Redis pour les requêtes fréquentes
Le visiteur filtre la programmation et atteint la fiche du spectacle en 2-3 clics grâce à la hiérarchie visuelle du contenu et du CTA d'achat
Le CTA mène à l'achat de billets, avec du lazy loading et des assets optimisés qui maintiennent un LCP bas même lors des pics de trafic liés aux premières et aux campagnes

04Impact mesuré

Résultats

-37% LCP mobile
+18% Pages/session
100% WCAG AA
2.4s LCP (avant 3,8s)

Données vérifiables

Métriques en détail

Clics nécessaires pour accéder à l'achat de billets depuis la page d'accueil: 2-3
Durée de la refonte complète de la plateforme (mois): 8
Spécialistes dans l'équipe projet: 6
Couches de cache qui absorbent les pics de trafic des premières et des campagnes (Cloudflare, Varnish, Redis): 3

Méthodologie: Données de périmètre et de réalisation du projet (2025) : la durée et l'équipe proviennent du contrat ; le parcours d'achat et les couches de cache, de l'architecture déployée. Les indicateurs de performance et d'accessibilité de la refonte (LCP, pages par session, WCAG AA) figurent dans la section résultats de ce cas.

05Le processus

Le processus

Discovery

Audit UX du site actuel, analyse des flux d'achat et définition des KPIs
Architecture

Conception des types de contenu, taxonomies et workflows éditoriaux
Design

UI/UX axée sur la conversion et l'accessibilité WCAG AA
Développement

Implémentation Drupal avec composants réutilisables et testing continu
Optimisation

Réglage des performances, cache et préparation aux pics de trafic