Cinémathèque suisse
Nominee
Case summary
Complete overhaul of the Cinémathèque suisse website: a multilingual Drupal site integrated with ERP and external platforms.
Case description
The Cinémathèque Suisse, founded in 1948, is celebrated for its diverse and high-quality collections. Our agency was honoured to undertake this reimagining of its website, encompassing information architecture, visual design, and technical development (CMS + Business Application).In the initial phase, we drew inspiration from printed materials and the live version as the old site predated the Cinémathèque's visual identity. We adapted its unique codes to the web's constraints and idiosyncrasies, aiming for a uniform brand image across various media.
Our design strategy focused on showcasing the Cinémathèque's vast image collections respectfully and immersively, avoiding unnecessary retouching or cropping. Visitors can navigate through diverse formats, enjoying a patchwork of images on the Cinémathèque page, reminiscent of photos scattered on a table.
We proposed a dark mode early in the design process, mirroring the ambiance of dark screening rooms and enhancing the display of images. It also provides practical benefits like reducing screen glare for someone using the site in a dark room.
One of the project's goals was to better highlight the work of Cinémathèque Suisse. Therefore, our mandate involved overhauling the main site from the old CMS Typo3 to Drupal and revamping the existing Laravel application ("Live") with primarily frontend work. To ensure visual coherence, we developed a style guide that could be shared via an npm package. We also managed to facilitate navigation by sharing the header and footer between the two sites.
Case goals and results
The project aimed to create a site that paid homage to the rich media content of the Cinémathèque Suisse. We designed it to showcase film screening cycles and enable ticket purchases through a dedicated platform.The new site has seen a noticeable increase in both search engine ranking and ticket sales. By connecting news, screening cycles, and films, we enhanced navigation within the site, leading to an improved user experience.
Challenges
One significant challenge was migrating data from the old Typo3 CMS to the new Drupal database. This included moving all the news and on-screen films, which proved complex due to the independent nature of translations in the Typo3 database. We eventually chose to migrate French and German news/film data separately, which means users can't directly switch between languages for a particular item on the new site.Community contributions
Our major contribution to the Drupal Core was the addition of a new granularity for block type permissions (https://www.drupal.org/project/drupal/issues/2809291).For this project, we wrote articles to assist our fellow developers with the migration of Paragraphs (https://antistatique.net/en/blog/how-to-migrate-content-into-drupal-paragraphs).
Furthermore, I wrote an article to enhance Behat's best practices when integrated with Drupal and how to better manage the database states (https://antistatique.net/en/blog/behat-on-drupal-clearing-data-between-scenarios).
We continued to refine Bamboo Twig, introducing the display management of entity revisions (https://www.drupal.org/project/bamboo_twig/issues/3254160), and a better image display (https://www.drupal.org/project/bamboo_twig/issues/3355084).
We also created the Image Styles Builder module to improve the mass declaration of Image Styles by frontend teams.
Hosting
Cinémathèque own server infrastructure