Marge de manœuvre
3,1 vs 1,5 (Les Films d'ICI)
Pourquoi : TMF est déjà au-dessus de son pair direct. La refonte n'a pas besoin de tout réinventer pour gagner des points faciles.
Projet 02 · Refonte UX · Cas d'étude
TELL ME
FILMS.
Refonte d'un site de société de production audiovisuelle indépendante. Audit 12 critères, benchmark concurrentiel et architecture de l'information repensée pour 3 publics distincts.
01
01 · Le contexte
Comment valoriser des contenus vidéo et faciliter leur accès ?
Tell Me Films est une société de production indépendante de films & séries documentaires implantée en Nouvelle-Aquitaine, Normandie et Guadeloupe. Fondée en 2014 par Laurent Alary et Eric Jarno, la maison compte 20 productions, 85 sélections en festivals et 12 ans d'expérience.
Le site actuel (tellmefilms.com), construit sur Strikingly, accumule depuis plusieurs années des frictions structurelles : architecture floue, vignettes carrées qui tronquent les affiches cinéma, absence de mentions légales malgré une boutique active, contenu mal hiérarchisé. Les preuves de qualité existent sélections festivals prestigieuses, catalogue riche mais elles sont noyées dans une grille indifférenciée.
Site audité
tellmefilms.com
Société de production indépendante · Films & Séries documentaires
Cible mission
3 publics · 1 site
Programmateurs · acheteurs internationaux · grand public cinéphile
Problème central
L'accès, pas la vidéo
Le projet n'est pas la vidéo le projet est l'accès à la vidéo
02
02 · Diagnostic
Audit ergonomique sur 12 critères
Évaluation systématique du site tellmefilms.com sur 12 critères ergonomiques (méthode Bastien-Scapin enrichie). Chaque critère est noté de 1 à 5 avec un constat factuel et un niveau de priorité pour la refonte.
| # | Critère | Note | Constat | Priorité |
|---|---|---|---|---|
| 01 | Architecture de l'information |
2,5 |
Page d'accueil = liste de tous les films sans hiérarchie. Aucune distinction entre films récents, en cours de diffusion, catalogue. Un film spécifique (Kim Novak's Vertigo) apparaît comme entrée de menu rupture structurelle. | Haute |
| 02 | Organisation visuelle |
3,5 |
Page pas surchargée, clusterisation respectée. La loi de Pareto est correctement appliquée l'essentiel est mis en avant. | Faible |
| 03 | Cohérence interne |
3 |
L'apprentissage interne est respecté avec les boutons. Manque d'effets au survol pour identifier la cliquabilité. La version mobile reste fidèle au desktop. | Moyenne |
| 04 | Conventions externes |
3,5 |
Convention externe respectée avec une navigation standard et des visuels génériques peu dépaysants pour l'utilisateur. | Faible |
| 05 | Informations & tagline |
1,5 |
Pas de tagline, difficulté à comprendre l'activité du site et ce qu'il propose. On déduit du contenu qu'il s'agit d'audiovisuel sans certitude. | Haute |
| 06 | Compréhension du contenu |
3 |
Icônes pour réseaux et boutique, mais absentes pour le contenu. Langage tourné professionnels / personnes avec une bonne culture cinéma exclusif pour le grand public. | Moyenne |
| 07 | Guidage |
4 |
Absence de guidage, pas d'animation au survol (à part le curseur), pas d'appel à l'action. L'utilisateur est perdu dans l'exploration. Aucun lien internes pour fluidifier la navigation. | Haute |
| 08 | Gestion des erreurs & légalité |
1,5 |
Aucune gestion d'erreur dans le formulaire, pas de mentions légales, pas de politique de confidentialité, pas de CGV alors que la boutique permet des achats. | Haute |
| 09 | Fluidité technique |
4 |
Site avec une vitesse de chargement correcte. On peut trouver ce que l'on cherche rapidement à condition de savoir ce que l'on cherche. | Faible |
| 10 | Liberté utilisateur |
3 |
Pas de cookies imposés, pas de page 404 dédiée (page builder par défaut). Quand un achat est sélectionné il est mémorisé. L'utilisateur n'est pas contraint à voir les vidéos. | Moyenne |
| 11 | Accessibilité |
4,5 |
Site globalement accessible couleurs respectant les contrastes, code propre, navigation clavier fonctionnelle. Quelques alt-text à enrichir. | Faible |
| 12 | Satisfaction visuelle |
3,5 |
Site simple, pas de faute visuelle majeure, sauf pour les affiches des films. Le visuel n'est pas au goût du jour mériterait d'être actualisé pour gagner en élégance et en attractivité. Effet « site d'association sur thème préfait ». | Moyenne |
3,1/5
Score global · Moyenne des 12 critères
Le site est fonctionnel mais bridé par 4 frictions hautes informations & tagline (1,5), gestion des erreurs et légalité (1,5), guidage (4 mais absence forte de CTA) et architecture (2,5). Les contenus de qualité existent sélections festivals, catalogue riche ils ne sont simplement pas accessibles dans la lecture.
03
03 · Benchmark
Confrontation à 2 références du secteur
Audit comparatif sur les mêmes 12 critères avec deux références : Les Films d'ICI (pair direct, société de production documentaire française reconnue) et Participant Media (référence sectorielle internationale, productrice de Citizen Four, Roma, Spotlight).
Tell Me Films
3,1/5
Site audité
Les Films d'ICI
1,5/5
Pair direct
Participant Media
4,5/5
Référence sectorielle
| Critère | Tell Me Films | Les Films d'ICI | Participant Media |
|---|---|---|---|
| Architecture de l'information | 2,5 | 3,5 | 4,5 |
| Organisation visuelle | 3,5 | 0,5 | 3 |
| Cohérence interne | 3 | 1 | 4,5 |
| Conventions externes | 3,5 | 2 | 4,5 |
| Informations & tagline | 1,5 | 2 | 5 |
| Compréhension du contenu | 3 | 1,5 | 4,5 |
| Guidage | 4 | 1,5 | 4 |
| Gestion des erreurs & légalité | 1,5 | 0 | 5 |
| Fluidité technique | 4 | 0 | 5 |
| Liberté utilisateur | 3 | 4 | 5 |
| Accessibilité | 4,5 | 1,5 | 4 |
| Satisfaction visuelle | 3,5 | 0,5 | 4,5 |
| Score global | 3,1 | 1,5 | 4,5 |
Tell Me Films double son pair direct.
Mais reste à 1,4 point de la référence sectorielle.
Écart à combler
3,1 vs 4,5 (Participant Media)
Pourquoi : 1,4 point = écart concret et atteignable. C'est la cible de la refonte (objectif projeté 4,2/5).
Zones de rattrapage
Tagline · Légalité · Satisfaction visuelle
Pourquoi : Participant excelle sur ces 3 critères (5/5 chacun). Ce sont eux qui guideront les recommandations prioritaires.
04
04 · Cibles utilisateurs
3 publics distincts, 1 même site
3 publics, des objectifs très différents.
Une seule frustration commune : l'absence de hiérarchie temporelle.
Qu'est-ce qui est récent ? en salle ? en catalogue ? Sur le site actuel, impossible de répondre rapidement. La refonte doit résoudre ce point avant tout—c'est l'insight transversal qui guide l'architecture proposée.
Camille, 38 ans
Programmatrice de festival
Contexte
Prépare la sélection officielle d'un festival de doc régional. Découvre 200+ films par an.
Objectif sur TMF
Savoir en 30s si TMF a un film récent qui correspond à sa ligne édito + accéder à la bande annonce + contact chargé festivals.
Frustration actuelle
Vignettes 200×200 indistinctes, pas de filtre par année, pas de contact direct festivals.
Marcus, 45 ans
Acheteur international · Sales agent
Contexte
Représente un distributeur étranger, cherche des docs français à acheter pour son territoire.
Objectif sur TMF
Voir le catalogue exportable, les chiffres clés (durée, langue, ST), récupérer le press kit.
Frustration actuelle
Aucune info technique sur les films, pas de zone Industry / Press, site uniquement en français.
Léa, 27 ans
Cinéphile · Abonnée Tënk & ARTE
Contexte
Suit l'actualité doc, lit Trois Couleurs, suit TMF sur Instagram.
Objectif sur TMF
Savoir quel est le film TMF du moment et comment le voir (salle, ARTE, Tënk, achat Vimeo on demand).
Frustration actuelle
Aucune section « À l'affiche », aucune mention plateforme doit chercher film par film sur les VOD pour savoir où le voir.
Parcours utilisateur site actuel · 3 frictions communes
Journey · Camille (programmatrice)
Trouver un film récent + sa BA + contact en moins de 90s
01
Arrive par recherche Google « tell me films documentaire 2025 »
02 · Friction
Page = grille 30+ vignettes carrées indistinctes. Aucun signal « récent ».
03 · Friction
Ouvre 4 fiches au pif → 2 lignes de descriptif, pas de contexte festivals.
04 · Friction
Page Contact → 1 mail générique, pas de chargé festivals identifié.
05 · Sortie
Abandonne cherche le film via une autre source.
Journey · Marcus (acheteur intl)
Bâtir une short-list de 5 films à demander en screener en 5 min
01
Arrive sur fiche film via lien LinkedIn d'un confrère
02 · Friction
Pas de durée, pas de langue, pas de sous-titres disponibles affichés
03 · Friction
Cherche zone « Industry » / press kit → n'existe pas
04 · Sortie
Envoie un mail générique, attente, pas de press kit téléchargeable
Journey · Léa (cinéphile)
Voir immédiatement les options de visionnage (salle / VOD / Vimeo)
01
Arrive par newsletter TMF
02 · Friction
Homepage = liste indistincte, aucun « à l'affiche »
03 · Friction
Cherche « où voir le film » → aucune mention plateforme / salle
04 · Sortie
Renoncement film perdu
Insight transversal : les 3 personas ont la même frustration finale l'absence de hiérarchie temporelle du contenu. Aucun signal sur ce qui est récent, en salle, en catalogue ou disponible en VOD. La refonte propose un hero éditorial « À l'affiche » qui résout cette friction commune dès la homepage.
05
05 · Architecture de l'information
Une arborescence repensée en 5 entrées
Restructuration en 5 entrées de navigation cohérentes Accueil · Films & Séries · Le 10ᵉ Art · News · Prendre Contact avec 3 niveaux maximum, fil d'Ariane sur toutes les pages internes, et segmentation du contact par usage (festivals / ventes / presse / candidatures).
Niveau 1
5 entrées
Accueil · Films & Séries · 10ᵉ Art · News · Contact
Pages templates
2 types
Page Réalisation (orange) · Page Actualité (jaune)
Profondeur
3 niveaux
Au lieu de 4-5 dans la version actuelle
Suppression
Kim Novak menu
L'entrée film individuelle est retirée du menu principal
Le parti pris
Ce qu'on me demandait
Regrouper toutes les activités de la société dans une arborescence par thématique.
Ce que j'ai tranché
Une arborescence courte et standard : l'activité principale mise en avant, une page dédiée par activité — reliée depuis l'accueil et la page entreprise.
Pourquoi : tout mélanger noyait l'objectif du site — l'utilisateur ne savait plus ce que fait Tell Me Films ni ce qu'il présente. Clarifier l'activité principale prime sur l'exhaustivité.
06
06 · Wireframes annotés
Homepage + Fiche Film, desktop & mobile
Wireframes basse fidélité avec annotations UX cliquables, format desktop 1440 + mobile 375 côte à côte. Chaque annotation explicite le choix de design (R01 → R06) et l'impact pour les 3 personas.
Wireframe · Homepage · 7 annotations
Wireframe · Page de la Réalisation · 9 annotations
07
07 · Recommandations
6 recommandations priorisées
Chaque recommandation suit la même structure : j'ai identifié que (l'observation factuelle), j'ai fait le choix de (la décision design), cela permet de (l'impact concret pour les personas).
01
Restructurer l'architecture en 5 zones cohérentes
Architecture · Navigation
J'ai identifié que
le menu mixe catégories (Films, Vidéo Game) avec une entrée de film individuel (Kim Novak's Vertigo) rupture structurelle. Les 3 publics sont noyés dans la même grille indifférenciée.
J'ai fait le choix de
5 entrées fixes (Accueil · Films & Séries · 10ᵉ Art · News · Prendre Contact) + sous-section « À l'affiche » + segmentation du Contact par usage (festivals/ventes/presse/candidatures).
Cela permet de
Camille trouve le chargé festivals en 1 clic, Marcus accède aux ventes intl direct, Léa atterrit sur « À l'affiche » immédiatement.
02
Remplacer les vignettes 200×200 par des affiches 2:3
Hiérarchie visuelle · Cohérence graphique
J'ai identifié que
les affiches cinéma sont conçues en portrait (format 2:3 standard). Les vignettes carrées tronquent la composition graphique et lissent visuellement tout le catalogue.
J'ai fait le choix de
grille d'affiches au format portrait 2:3, badge festival superposé en haut-droite, titre + réalisateur en overlay au hover.
Cela permet de
la composition originale des affiches est respectée, le signal festival est immédiat, l'œil distingue les films primés au scroll.
03
Créer un hero éditorial « À l'affiche »
CTA · Hiérarchie visuelle · Contenu
J'ai identifié que
aucun film n'est mis en avant sur la homepage actuelle. L'utilisateur ne sait pas quel film est récent, en salle ou disponible en VOD. Léa abandonne en 10 secondes.
J'ai fait le choix de
hero plein écran avec carrousel des productions phares (Kim Novak's Vertigo, Doubout!, etc.), badge festival, titre + réa + durée, 2 CTA (Bande annonce + Où le voir).
Cela permet de
Léa accède au film en salle/VOD en 1 clic, le hero raconte une histoire éditoriale, le site n'est plus une grille muette.
04
Développer les fiches film avec synopsis + contexte
Contenu · Crédibilité
J'ai identifié que
les fiches affichent 2 lignes de description, sans synopsis long, sans contexte de production, sans crédits techniques. Marcus ne peut pas faire de short-list, Camille ne peut pas évaluer la ligne édito.
J'ai fait le choix de
fiche film 9 sections : hero + synopsis enrichi + sélections festivals + plateformes diffusion + achat VOD + crédits techniques (12 lignes) + galerie + films similaires + footer.
Cela permet de
Marcus dispose des infos techniques (durée/langue/ST) en 30 secondes, Camille évalue la ligne édito, Léa découvre les festivals en un coup d'œil.
05
Ajouter une zone de crédibilité institutionnelle
Crédibilité · Conversion
J'ai identifié que
les sélections festivals (Venise, IDFA, Deauville) sont noyées dans la fiche film. Pas de chiffres clés sur la homepage (12 ans · 20 productions · 85 sélections festivals existent). La crédibilité ne se voit pas.
J'ai fait le choix de
3 chiffres clés visibles dès le hero (12 / 20 / 85), citation interne signée Eric Jarno (co-fondateur), timeline historique de la maison + 3 implantations affichées en footer.
Cela permet de
Marcus voit immédiatement la légitimité, Camille comprend le standing TMF, le site se positionne dans l'écosystème institutionnel.
06
Mettre en conformité légale + accessibilité de base
Légal · Accessibilité · SEO
J'ai identifié que
pas de mentions légales, CGV, politique de confidentialité alors que des achats sont possibles via la boutique. Images sans alt-text significatif. Pas de page 404 dédiée.
J'ai fait le choix de
trio mentions légales / CGV / confidentialité, alt-text descriptifs sur toutes les images, page 404 dédiée avec retour aux 5 entrées, contraste WCAG AA minimum.
Cela permet de
conformité RGPD + e-commerce, lisibilité par lecteurs d'écran, SEO amélioré, expérience cohérente jusque dans les erreurs.
08
08 · Maquette finale
Une DA sobre, éditoriale comme un programme de salle
Pas un site « 2026 glassy ».
Quelque chose qui respire le cinéma ancien, le papier d'affiche, le grain argentique.
Couleur fond
#FAFAF7
Pourquoi : papier crème chaleureux. Évoque la matérialité du programme de salle, casse la froideur du blanc pur institutionnel.
Couleur encre
#0F0F0F
Pourquoi : noir non-pur. Moins agressif, plus lisible sur les longues lectures (synopsis et fiches film).
Accent unique
#E8460A
Pourquoi : couleur exacte du logo TMF + codes du cinéma d'auteur (ambre projecteurs, affiches Capricci). Une seule couleur d'accent force à hiérarchiser.
Typographies
Inter + Cormorant Garamond
Pourquoi : Inter extra-light pour les titres (modernité neutre), Cormorant italique pour les accents émotionnels (titres de films, années). Duo qu'on retrouve dans les éditions Cinémathèque française.
Maquette · Homepage
Maquette · Page de la Réalisation
09
09 · Roadmap
Roadmap refonte · 3 phases
Les recommandations sont priorisées en 3 phases selon leur impact UX et leur complexité technique de mise en œuvre du quick win (1 semaine) au chantier de fond (3 mois).
● Quick wins
Semaine 1 · Sans refonte complète
- Alt-text des images Correction immédiate, impact SEO + accessibilité
- Retirer Kim Novak du menu 5 min, rétablit la cohérence structurelle
- Page À propos Rédiger un contenu complet : histoire, ligne éditoriale, chiffres
- Mentions légales Trio CGV / Confidentialité / Mentions, conformité RGPD
- Fiches film prioritaires Synopsis long + badges festivals sur les 4 films récents
● Moyen terme
Semaines 2 à 6 · Refonte structurelle
- Hero éditorial « À l'affiche » Section homepage avec film en avant + 2 CTA
- Format affiches 2:3 Remplacement des vignettes carrées
- Bande de crédibilité 3 chiffres clés (12 / 20 / 85) en homepage
- Architecture nav 5 entrées Restructuration menu + sous-sections
- Fiches film complètes Synopsis + crédits techniques + galerie + films similaires
- Footer segmenté Documents Press + 4 contacts différenciés
● Long terme
Mois 2 à 3 · Amélioration continue
- Filtres catalogue Genre · année · statut (en salle / catalogue / VOD)
- Bilingue FR / EN Indispensable pour les ventes intl + programmateurs étrangers
- Migration CMS Sortir de Strikingly vers WordPress pour contrôle total
- Performance & lazy loading Optimisation chargement catalogue lourd
- Espace Industry / Press Press kits téléchargeables, screeners pro
- Newsletter Recapture éditoriale auprès des cinéphiles fidèles
10
10 · Auto-évaluation
Auto-évaluation honnête
Recul critique sur la démarche : ce qui a marché, ce qui aurait pu être mieux, ce que je ferais différemment aujourd'hui. Un projet UX se mesure aussi à ce qu'on apprend en le faisant.
Ce qui a le mieux marché
Le choix des références s'est avéré déterminant : confronter Tell Me Films à Les Films d'ICI (pair direct) et Participant Media (référence sectorielle internationale) a donné une grille de lecture qui a tenu de bout en bout. La méthodologie 12 critères ergonomiques a permis de noter sans tomber dans le ressenti subjectif, et l'écart Participant (4,5) → TMF (3,1) a chiffré ce que je pressentais.
J'ai aussi pris le temps de m'imprégner du domaine (production audiovisuelle indépendante, écosystème festivals, distribution institutionnelle) avant de proposer des recommandations. La phrase clé qui a structuré tout le projet « Le projet n'est pas la vidéo, le projet est l'accès à la vidéo » est née de cette immersion, pas d'une checklist UX.
Ce qui aurait pu être mieux
J'aurais dû fixer une deadline plus claire avec des objectifs intermédiaires datés. J'ai sous-estimé le temps nécessaire à la production complète (audit + benchmark + arborescence + wireframes + maquette + cas d'étude formalisé) et n'ai pas livré l'intégralité du périmètre que je m'étais fixé au départ.
Une découpe en sprints courts avec point de validation chaque semaine aurait évité ce dépassement et m'aurait obligé à livrer plus vite et itérer plutôt que peaufiner en silence.
Ce que je ferais différemment
Plus de recherche du domaine en amont passer une journée entière sur les sites de production audiovisuelle avant d'auditer, pour mieux saisir les conventions du secteur.
Travailler en relation continue avec le client, avec des points de validation toutes les semaines plutôt qu'un livrable final. Ça évite les dérives et permet d'ajuster en cours de route.
Trancher mes décisions design plus fermement, quitte à refaire. J'ai trop écouté les envies parfois contradictoires et pas assez ma propre lecture de designer UX. Certains choix manquent de cohérence parce que je n'ai pas assumé une direction claire.
Ce que ce projet m'a appris
La gestion du temps sur un projet long, avec ses phases de doute et de relance. Comprendre quand stopper l'audit pour passer à la conception, quand stopper la conception pour passer à la maquette.
La patience d'itérer : refaire dix fois une petite modification jusqu'à ce que ça tombe juste, sans céder à l'envie de figer pour passer à autre chose.
Le monde de la production audiovisuelle : ses enjeux économiques (droits, ventes intl, financement institutionnel), ses temporalités (festival → salle → VOD → catalogue) et ses publics multiples. Ce projet a fait mûrir mon process de designer UX.
Continuer l'exploration