Sector(s)

Team Members

Ryad Karar, amelieportela, dkesteloot, Alexandre Pons, Carole Khalife, christina_abboud, ewehbe, eliane badawy, lara_z, gretta.khoury, nicolas-enki, piabh, rouaida, rchallita, Zein Kassem

Visit the site

Visit the site

Organizations Involved

Redesigning the User Experience for the Bordeaux National Opera with Drupal

Since 2022, the Bordeaux National Opera has embraced its "Opera Citizen" initiative, aiming to make cultural heritage accessible to all audiences. Reflecting this vision, the institution adopted a new visual identity and entrusted us with revamping its Drupal website to enhance user experience and align with its updated branding.

About the project

Project Context

As a major hub for musical and choreographic arts in France, the Bordeaux National Opera offers a wide array of productions each season, including operas, ballets, and concerts held at the Grand Théâtre and the Bordeaux Auditorium. Accessibility, dialogue, interaction, and inclusivity are central to its cultural and social mission.

After years of maintaining their previous site, we were tasked with a full redesign to improve user experience and ensure consistency with their new visual identity. The Opera caters to diverse audiences, including the general public, schools, partners (such as cultural institutions, the city, and businesses), and media. To address these varied needs, the website incorporates features like:

  • Event Listings: Calendar, season details, and event descriptions.
  • Ticketing System.
  • Institution Overview: Information about the venue, artists, and partners.
  • News Updates.
  • Outreach Programs: Focused on education, inclusion, and community engagement.
  • Practical Information: Including ticket reservations, directions, and subscriptions.
  • Philanthropy: Encouraging donations and sponsorships.

Our Contribution to the Redesign

To bring this Drupal redesign to life, our team addressed several key areas:

  1. Functional Specifications: Drafting detailed requirements and project documentation.
  2. UX Design: Conducting benchmarks, auditing the old site, creating a new site structure, mapping user journeys, and delivering wireframes alongside accessibility and eco-design best practices.
  3. UI Design: Establishing a new artistic direction and designing responsive prototypes.
  4. Development: Implementing Drupal integration, content migration, quality assurance, testing, production launch, and ongoing support.

Key Enhancements

  • A Dynamic Homepage: Replacing static image carousels with thematic zones (dance, orchestra, choir, piano, etc.) to showcase the Opera’s rich diversity.
  • Streamlined User Journeys: Adding a thematic filter on the homepage and a sticky “Reserve” button in the header for quick access.
  • Simplified Navigation: Refining the header and footer for better usability and introducing secondary menus within pages to reduce the main menu’s load.
  • Improved Search Engine: Enhancing global and calendar-specific search with features like auto-completion and editorial content indexing.

Accessibility at the Core

As a public institution, digital accessibility was a key priority. Our approach included:

  • Text Alternatives: Providing captions and descriptions for visually impaired users relying on screen readers.
  • High Contrast Options: Ensuring text and background contrast with customizable settings.
  • Readable Fonts: Offering font size customization directly in the navigation menu.
  • Clear Feedback: Ensuring informative responses for user actions like clicks or form submissions.
  • Optimized Information Architecture: Simplifying navigation for better user orientation.

A Sustainable Design Approach

Eco-design principles guided this project to minimize the site's environmental impact:

  • Pagination Over Infinite Scrolling: Content loads on demand rather than endlessly.
  • Text and Images Over Videos: Reducing file sizes by prioritizing lighter media.
  • Optimized Image Formats: Using SVG for graphics and WebP for photos.
  • Feature Streamlining: Limiting site functionality to actual user needs to avoid unnecessary resource consumption.
  • Reducing Automatic Content: Limiting auto-play for animations, videos, and audio.

Discover more case studies on our website ->

Testimonial:

Very early this morning, let's say that digital elves and fairies delivered a new experience for you to enjoy with the Opéra National de Bordeaux. Visit opera-bordeaux.com. Feel free to share your feedback! A big thank you to bluedrop.fr for the result and also for the human adventure that this backstage development has been. Congratulations once again to all of you. — Caroline Notari, Digital Manager, Opéra National de Bordeaux.

Why Drupal was chosen

-

Technical Specifications

Drupal version: