Revisiting the user experience of the Bordeaux National Opera with Drupal

Project Context

A major hub for musical and choreographic culture in France, the Opéra National de Bordeaux offers the public numerous productions every season, both lyrical and choreographic, as well as many concerts at the Grand-Théâtre and the Bordeaux Auditorium. Accessibility, dialogue, encounters, and sharing are at the heart of the institution's cultural and social commitment.

After spending several years maintaining the Opéra National de Bordeaux's website, they entrusted us with its redesign. Objective: improve the user experience and bring the site in line with the Opéra's new graphic charter.

The Opéra de Bordeaux addresses various audiences: the general public, schools (national education, dance school, music school, etc.), partners (the city, cultural institutions, businesses, etc.), and media. To this end, it offers various content and features to engage these different audiences.

Main Site Features

• Present the shows (calendar, season, and detailed descriptions)
• Offer a ticketing system
• Present the opera: the venue, the institution, the artists, and the partners
• Present the news
• Showcase its activities: community outreach, education, inclusion, etc.
• Provide practical information: book, visit, subscribe, tour the venue, etc.
• Encourage and enable sponsorship and donations

This Is Where We Step In

To support them with this Drupal redesign project, we got involved at several levels.

• Functional specifications: drafting the requirements document and specifications.
• UX design: UX benchmark, audit of the previous website, creation of a new sitemap, definition of user journeys, development of wireframes, and a guide for best practices in accessibility and eco-design.
• UI design: UI benchmark, establishing the artistic direction, designing responsive mockups, and prototyping.
• Development: Drupal development and integration, content migration, quality control, testing and validation, launch, monitoring, and support.

Raising the Curtain

In practical terms, we aimed to add value at every level. 

• A homepage that reflects a pluralistic view of the world
  Replacing the photo carousel with the simultaneous display of several thematic areas (dance, orchestra, choir, piano, etc.) to showcase the breadth of the offer, in line with the opera's pluralistic vision of the world. 
   
• Improved user journeys
  Adding a thematic filter on the homepage, and a “book” button directly in the sticky header.
   
• Simplified header and footer
  For easier navigation, notably with the addition of secondary navigation menus within the pages to lighten the main menu. 
   
• Redesigned search engine
  For both the global and calendar search, we simplified, added autocomplete, and included editorial content in the search indexing.

Accessibility at the Heart of the Project

As a public entity, accessibility is intrinsic to the Opéra de Bordeaux project. Special attention was therefore paid to the website.

Digital accessibility means designing a website to be usable and understandable to as many people as possible, including those with visual, auditory, motor, or cognitive impairments.

Several best practices enabled us to make this Drupal site accessible.

• Text alternatives for images: such as captions or descriptions, for users with visual impairments or those using screen readers.
• Contrasting colors: for text and backgrounds to help users with visual impairments better see the content. Contrast settings can even be personalized via an icon in the navigation menu.
• Easily readable fonts: to help users with visual impairments better see the content. Font sizes can also be personalized via an icon in the navigation menu.
• Clear and informative feedback: for user actions, such as button clicks and form submissions.
• Optimized information architecture: to make navigation and wayfinding easier.

A Sustainable Project

Eco-design aims to develop digital products with the lowest possible environmental impact. Here too, special effort was made through several workshops and by implementing best practices to encourage eco-design.

• No infinite scrolling: we implemented clear pagination, with content loaded at the user's request.
• Text or image content rather than video: videos are generally much heavier than text with images.
• Using suitable image formats: vector formats like SVG for illustrations, icons, logos, etc., and webp format for photos.
• Limiting site features to the real needs of users: because uncertainty often causes needs to be overestimated beyond actual expectations.
• Limiting animations, videos, and auto-playing audio: to avoid preloading content and launching it without the user's consent.

An Impressive Launch

Building on our previous collaboration maintaining the old site, this project was carried out with trust and comfort for both our client and our lead developer, who were already used to working together.

Sincere thanks to the Opéra National de Bordeaux team for their availability, feedback, energy, and trust.

As a bonus, our client expressed their satisfaction with a lovely testimonial, which delighted us and made for a grand exit!

URL: https://www.opera-bordeaux.com/
Go-live: 09/21/2023
To learn more: Case study