Culture et tourisme

Opéra National de Bordeaux

Date de mise en ligne : septembre 2023

Pôle majeur de la culture en France, l’Opéra National de Bordeaux porte depuis 2022 le projet d’Opéra Citoyen centré sur l'accessibilité du patrimoine culturel à tous les publics. Pour marquer ce cap, l'institution s'est récemment dotée d'une nouvelle identité graphique en lien avec cette vision. En ce sens, elle nous a sollicité pour refondre son site Drupal au profit d'une meilleure expérience utilisateur et d'une interface alignée sur sa nouvelle charte graphique.

Nos missions
  • Spécifications fonctionnelles et techniques
  • UX et UI design
  • Développement Drupal
  • Reprise des contenus
  • Maintenance Drupal
  • Hébergement

Contexte

L'Opéra National de Bordeaux propose chaque saison au public de nombreuses productions, lyriques et chorégraphiques ainsi que de nombreux concerts au Grand-Théâtre et à l’Auditorium de Bordeaux. L’accessibilité, le dialogue, la rencontre, le partage sont au cœur de l’engagement culturel et social de l’institution.

Nous prenons en charge l'hébergement, la maintenance préventive, corrective et évolutive de l'Opéra de Bordeaux depuis 2018. Nous avons déjà conduit les mises à niveau majeures de Drupal 8 vers Drupal 9, puis 10.

En 2022, l'Opéra s'est lancé dans une vaste refonte de son positionnement et de son image. Il nous a confié son nouvel environnement de marque pour le déployer sur le web. Nous avons par conséquent travaillé à la livraison d'un véritable design system que nous avons déployé sur le nouveau site, mis en production en septembre 2023.

Périmètre de nos interventions

Objectif : améliorer l’expérience utilisateur et mettre le site en conformité avec la nouvelle charte graphique de l’Opéra.

L’Opéra de Bordeaux s’adresse à différents publics : grand public, écoles (éducation nationale, école de danse, de musique…), partenaires (ville, institutions culturelles, entreprises…), médias. En ce sens, il propose plusieurs contenus et fonctionnalités pour toucher ces différents publics.

Nous avons pris en charge la rédaction du document de spécifications et du cahier des charges, en collaboration avec l'équipe projet de l'Opéra lors d'ateliers de spécifications.

La démarche UX conduite a impliqué l'organisation de nombreux ateliers tels que plusieurs benchmarks UX, un audit du précédent site, la réalisation d’une nouvelle arborescence, la définition des parcours utilisateur, la réalisation de wireframes et d’un guide des bonnes pratiques d’accessibilité et d’éco-conception.

Nous avons déployé la nouvelle identité de l'Opéra en travaillant plusieurs pistes / intentions graphiques puis en déployant des maquettes desktop et mobiles. Nous avons enfin produit le design system de l'Opéra qui nous a permis de déployer l'intégralité des composants qui alimentent le site.

Nous sommes appuyés sur l'instance Drupal 9, que nous avons mise à jour vers Drupal 10, dans le but de sécuriser la reprise des contenus et la prise en main des équipes de contribution (dans un délai très contraint). Nous avons ensuite fait évoluer les fonctionnalités, intégré un nouveau thème (de façon atomique avec Storybook) puis conduit les tests, le contrôle qualité nécessaire à la mise en production du site.

Le point crucial : l'agenda

Fonctionnalité stratégique du site, l'agenda des spectacles a concentré une grande partie de notre énergie. Connecté à l'API de la plateforme Open Agenda, il devait proposer une expérience simple et efficace, notamment en mobilité.

Si l'expérience classique est toujours enrichie, l'expérience mobile a été réduite au minimum, pour fluidifier et simplifier le parcours.

Levée de rideau

Concrètement, nous avons tenté d’apporter de la valeur ajoutée à tous les niveaux. 

Une page d’accueil refletant une vision plurielle du monde

Remplacement du carrousel photos par l’affichage simultané de plusieurs zones de thématiques (danse, orchestre, chœur, piano…) pour montrer la diversité de l’offre, alignée sur la vision du monde pluriel de l’opéra. 

Amélioration du parcours utilisateur

Ajout d’un filtre thématique en page d’accueil, d’un bouton “réserver” directement dans le header, en sticky.

Simplification du header et du footer

Pour une navigation plus facile, avec notamment l’ajout de menus de navigation secondaires au sein des pages pour alléger le menu principal. 

L’accessibilité

Alternatives textuelles pour les images, compatibilité avec les lecteurs d'écran, feedbacks clairs et informatifs, architecture d’informations optimisée… Dans le menu de navigation, un pictogramme permet également d'augmenter le contraste des couleurs et la taille de la typographie.

L’éco-conception

Pas de scroll infini, pas de vidéo, peu de photos, poids des ressources optimisés, fonctionnalités limitées à l’essentiel, peu d’animations…

Refonte du moteur de recherche

Refonte du moteur de recherche global et dans le calendrier : simplification, autocomplétion et prise en compte du contenu éditorial dans le référencement.

Une sortie par la grande porte

Un grand merci à l’équipe de l’Opéra National de Bordeaux pour leur disponibilité, leurs retours, leur énergie et leur confiance.
En bonus, notre client nous a signifié sa satisfaction par un joli témoignage, ce qui nous réjouit et nous offre une sortie par la grande porte !
 

Photo de la salle de l'opéra de Bordeaux vide

Revisiter l’expérience utilisateur de l’Opéra National de Bordeaux avec Drupal

Pour plus d’informations, vous pouvez consulter notre article de blog sur le sujet.

L'avis de l'Opéra National de Bordeaux sur notre collaboration

« Très tôt ce matin, disons que des elfes et des fées (du numérique) 🧚‍♀️ ont déposé au pied de votre écran une nouvelle expérience à vivre avec l'Opéra National de Bordeaux. Rendez-vous sur opera-bordeaux.com ✨N'hésitez pas à réagir !Merci à bluedrop 🧞 pour le résultat et aussi pour l'aventure humaine qu'a été ce développement en coulisses. Bravo encore à vous tous. »

Caroline Notari Responsable du numérique de l'Opéra National de Bordeaux
Photo illustrant l'identité du témoignant :)

Un projet de site qui valorise
votre positionnement et votre image ?