Retour à la liste des projets
Cinéma Victor Hugo
Refonte du site web du cinéma Victor Hugo
Brief du projet
Le cinéma Victor Hugo de Besançon est un cinéma indépendant classé Art et Essai. Il possède à ce jour un site datant de 2010. Au regard des enjeux et des nouvelles normes du web, j'ai imaginé une refonte de leur site avec pour objectifs principaux d'améliorer le parcours utilisateur, rendre le site adaptable sur smartphone et tablettes, automatiser la gestion des films et conserver l'image indépendante et artistique du cinéma.
Service
Site web
Outils
Framer, N8N, API TMDB
Date
L'analyse du site existant a rapidement mis en évidence plusieurs limites : une navigation peu adaptée aux usages mobiles, une programmation affichée sous forme d'image statique et une faible mise en avant des événements du cinéma.
Pour répondre à ces problématiques, j'ai conçu une interface plus adaptée et évolutive, accompagnée d'une direction artistique sobre et contemporaine.
J'ai notamment adapté le logo existant et réalisé une illustration pour la hero section afin de renforcer le caractère culturel et artistique du lieu.
L’un des principaux enjeux du projet était de simplifier la gestion de la programmation. Sur le site actuel, les films à l’affiche sont présentés sous la forme d’une image mise à jour manuellement, ce qui limite l’accès aux informations et demande un travail régulier au gérant.
J’ai donc imaginé un système connecté à The Movie Database (TMDB). Le gérant gère directement deux listes sur son compte TMDB : À l’affiche et Prochainement. Lorsqu’un film est ajouté ou retiré d’une liste, les informations associées (titre, synopsis, affiche, réalisateur, bande-annonce etc.) sont automatiquement récupérées et affichées sur le site.
Pour sécuriser les échanges avec l’API de TMDB, j’ai utilisé N8N comme intermédiaire. Cette solution permet de masquer la clé API tout en automatisant la synchronisation des données vers le CMS Framer. Le gérant n’a ainsi plus besoin de saisir ou mettre à jour manuellement les informations de chaque film : la programmation se met à jour automatiquement à partir de ses listes TMDB.
Afin de recevoir les données provenant de TMDB, j'ai créé plusieurs collections CMS sur Framer.
Les collections À l'affiche et Prochainement regroupent l'ensemble des informations relatives aux films.
J'ai également mis en place une collection dédiée aux genres. Cette approche évite la création de doublons lors de l'import des films puisque chaque genre est référencé une seule fois puis associé aux œuvres concernées grâce à des champs multi-références.
Cette structure permet de maintenir une base de données propre et facilement exploitable.
La gestion des séances constituait un autre point important. Contrairement aux informations des films, les horaires de projection doivent rester sous le contrôle du gérant.
Pour simplifier cette tâche, j'ai créé une collection CMS dédiée contenant l'ensemble des créneaux possibles, du lundi au dimanche, entre 13h et minuit. Afin d'éviter une saisie manuelle fastidieuse, j'ai développé un script JavaScript permettant de générer automatiquement les 140 entrées nécessaires.
J'ai ensuite créé un second workflow N8N chargé de mettre à jour ces dates chaque semaine afin que les créneaux restent toujours exploitables dans le temps.
Grâce à un système de références entre collections, le gérant peut désormais associer une séance à un film en quelques clics seulement.
Ce projet m'a permis de travailler à la fois sur l'UX, l'UI, l'automatisation de données et la conception d'une architecture CMS complexe.
J'ai pu concevoir un système qui répond autant aux besoins des visiteurs qu'à ceux du gestionnaire du site, en combinant design, logique de données et automatisation. Il me reste encore à explorer comment ce type d'architecture pourrait évoluer vers la réservation en ligne ou l'intégration d'autres outils de gestion propres aux salles de cinéma.
