Après l'Opéra National de Bordeaux, l'Opéra Grand Avignon est le second opéra à nous solliciter pour la refonte, l'hébergement et la maintenance de son site Drupal. Nous sommes heureux aujourd'hui de concrétiser la mise en production du nouveau site.
Le renouveau de l'Opéra d'Avignon
Les arts vivants constituent un pan incontournable de la vie culturelle du Grand Avignon. L’importante restauration de l'Opéra a consacré l'établissement historique pour en faire une scène moderne à la pointe. Il conserve à la fois le charme de sa salle à l’italienne du XIXème et les exigences modernes de confort, sécurité et accessibilité. Si l’Opéra reste le vaisseau amiral de cette nouvelle identité culturelle, « L’Autre Scène », équipement moderne et lieu de soutien à la création, participe au projet de médiation culturelle .L'objectif est d'offrir aux différents publics les moyens d'accéder aux œuvres et de développer des capacités critiques et artistiques.
Aujourd’hui, les deux salles proposent une programmation ambitieuse s’adressant à des publics variés.
C'est dans ce contexte que l'’Opéra Grand Avignon ont confié la refonte de leur site à l'agence bluedrop.fr, pour disposer d’un site à jour et permettre à ses usagers d’accéder à son offre de contenus et programmation tout en améliorant leur expérience utilisateur. Le site est amené à évoluer, en intégrant une e-boutique et un espace dédié réservé aux abonnés de l’Opéra.
Conception UX & UI
Les multiples ateliers ont permis de centrer les parcours sur les utilisateurs cibles de l'Opéra (abonnés / groupes, familles, étudiants, scolaires, touristes, mécènes, entreprises, presse et médias).
Nous avons conduit :
- Des ateliers d'exploration (personae, parcours utilisateurs et arborescence) ;
- Benchmark UX ;
- Design Studio et zonings ;
- Tests utilisateurs et questionnaires UX.
Cette démarche a permis de corriger les imperfections des prototypes et a facilité la production des maquettes UI.
Drupal 9 et une bibliothèque de blocs
Le développement n'a pas nécessité de nombreux développements sur-mesure, excepté pour enrichir certains modules contribués. L'essentiel du travail de configuration a concerné les paragraphes, puisque le site dispose de 37 types de paragraphes qui en font une véritable bibliothèque de blocs.
L'expérience de contribution, enrichie par le thème Gin et le groupage de champs, fait l'objet d'un cycle de modération de contenu, opéré entre les 5 rôles configurés, par l'intermédiaire du module Content Moderation.
Le thème, basé sur Emulsify, a permis à l'équipe frontend de travailler en conformité avec les exigences atomic design décidées en phase de conception. Le thème permet d'intégrer plus sereinement les différents composants générés avec Storybook.
Performance et accessibilité
Un effort tout particulier a été apporté à l'accessibilité et à la performance d'affichage du site. Sans configurer le cache Varnish sur l'infrastructure cible, les optimisations natives de Drupal (aggrégation JS et CSS, cache Drupal) cumulées avec l'utilisation du nouveau format d'image .webp assurent une performance d'affichage excellente. Il est à noter, au passage, que le module webP de Drupal a été intégré au Core de Drupal depuis la version 9.3, ce qui facilite son déploiement.
URL : https://www.operagrandavignon.fr/
Etude de cas : La refonte du site de l'Opéra Grand Avignon.
Date de mise en production : 07/03/2022.
Crédit photo : © Frédéric Sicard photographe.
