Cinémas Utopia
Réseau de cinémas indépendants, Les Cinéma Utopia défendent depuis leurs débuts un « cinéma d’opinion » : une programmation exigeante, des débats et rencontres, une gazette emblématique… et aucune publicité.
Interventions
- Audit UX
- Parcours utilisateurs et périmètre fonctionnel
- Wireframes
Équipe
- Monique D’Acosta (Studio Formo) à la DA / UI Design
- Matthieu Pain au Développement
Contexte & Objectifs
Le site des Cinémas Utopia est la porte d’entrée vers la programmation des différentes salles du réseau : horaires des séances, films à l’affiche, événements, gazette…
Or, la consultation se fait de plus en plus sur smartphone, souvent en situation : choisir un film en sortant du travail, vérifier une séance sur le trajet, devant le cinéma… Le site initial, non responsive et peu structuré, n’était pas adapté à ces usages.
L’objectif de la refonte était de concevoir un site pensé d’abord pour le mobile, qui permette :
- d’organiser facilement une sortie ciné : trouver une séance par ville, par salle et par jour en quelques secondes
- de découvrir la richesse de la programmation, au-delà des films déjà connus
- de retrouver en ligne l’âme du lieu : une voix libre, militante et artisanale, loin des codes commerciaux
Contraintes
Plusieurs contraintes techniques et stratégiques ont orienté la conception :
- Une approche mobile first stricte : chaque écran conçu d’abord pour le smartphone, puis décliné en desktop
- Un réseau multi-salles et multi-villes : certaines villes comptent plusieurs cinémas, certains sites représentent plusieurs salles. L’architecture devait gérer ces configurations sans alourdir la navigation sur petit écran
- L’autonomie de chaque cinéma : chaque salle devait pouvoir publier librement ses contenus (actualités, film mis en avant, tags temporaires) sans dépendre d’une équipe technique
- Accessibilité : textes lisibles, contrastes suffisants, alternatives textuelles, navigation au clavier, dark mode, site léger consommant peu de ressources… en bref un site conçu pour un public et des cas d’utilisation variés
- Fidélité aux valeurs d’Utopia : pas de publicité, respect des données personnelles (RGPD), un ton sincère et vivant plutôt qu’institutionnel
Méthodologie
👉 Cadrage
Le projet a démarré par un atelier de lancement avec l’équipe d’Utopia, pour comprendre le fonctionnement du réseau (villes, salles, organisation éditoriale), ses publics et leurs usages.
Cet atelier a permis de :
- Cartographier les configurations du réseau : villes à plusieurs cinémas, sites regroupant plusieurs salles, besoins éditoriaux propres à chaque lieu
- Identifier les usages prioritaires, au premier rang desquels la consultation des horaires
👉 Audit
Un audit de l’existant a permis d’identifier les principaux points de friction, regroupés en trois axes :
- Navigation & architecture : liens textuels sans menu structuré, aucun indicateur de page active, difficulté à savoir où l’on se trouve et comment revenir en arrière
- Accessibilité : site non responsive, rendant la navigation laborieuse sur smartphone et tablette ; grilles horaires uniquement en PDF ou en image, illisibles sans zoom et inaccessibles aux synthèses vocales ; textes trop petits et contrastes insuffisants
- Cohérence visuelle : colonnes latérales surchargeant l’écran, manque d’espacement, CTA peu visibles, beaucoup de texte et peu d’images
Ces constats ont débouché sur des recommandations UX et UI :
- Structurer le site par usages (Accueil / Horaires / Films / Agenda), pour que chaque page réponde à un besoin précis
- Optimiser la navigation mobile : fil d’Ariane, pied de page regroupant pages secondaires et informations pratiques
- Clarifier la hiérarchie visuelle : grilles et marges régulières, couleur d’accent, plus de visuels pour aérer
- Soigner les interactions : retours visuels au survol, au clic et au chargement, composants standards, micro-animations utiles
👉Arborescence & parcours utilisateurs
Suivant les recommandations de l’audit, l’arborescence s’organise autour des usages : horaires, films, événements, jeune public…
Une page d’atterrissage oriente vers chaque ville, puis vers une page d’accueil dédiée, pour gérer simplement la diversité du réseau.
Les parcours utilisateurs ont ensuite été modélisés à partir des principales intentions de visite : trouver une séance, découvrir un film, repérer un événement, organiser une sortie en famille.
Ce travail a permis d’identifier les points de friction de chaque parcours et d’y apporter une réponse dès la conception, par exemple en affichant les horaires du jour dès l’accueil.
👉 Maquettes fonctionnelles
Les wireframes détaillés de l’ensemble des écrans ont été conçus en partant du smartphone, puis enrichis pour le desktop. Cette approche a guidé plusieurs choix :
- des grilles horaires natives et navigables au swipe (jour / semaine), remplaçant les PDF à zoomer
- un header sticky et un menu simplifié, pour accéder aux pages principales en un geste
- des cartes films compactes et hiérarchisées (affiche → titre → infos → prochaine séance), lisibles d’un coup d’œil
- un équilibre entre recherche ciblée et exploration libre de la programmation
L’UI design devant être réalisé dans un second temps par un autre prestataire (👋 Monique D’Acosta), ces maquettes ont été pensées comme un support de passation.
Elles fixent :
- la structure et la hiérarchie de l’information de chaque écran
- l’organisation des contenus et des composants (cartes, filtres, grilles, navigation)
- les comportements et interactions attendus en mobile comme en desktop
- les différents cas de figure propres au réseau (salles multiples, villes à plusieurs cinémas)
L’objectif : permettre à l’UI Designer de se concentrer sur l’identité visuelle, sur des bases fonctionnelles déjà validées et des composants réutilisables.
