Problème identifié
Un site qui informe,
pas qui invite
Navigation à sous-niveaux, 0 CTA visible above the fold, incohérence graphique entre les pages, temps de chargement excessifs. Score UX initial : 2,8/5.
Projet 03 · Refonte UX · Stage
KINO
CAEN
Refonte de l'expérience utilisateur d'un site associatif événementiel rendre l'inscription sans friction et le site accessible à tous les âges.
11
Critères ergonomiques
3
Sites benchmarkés
5
Frictions résolues
2,8
→ 4,3 /5 score UX
00 · Repères
EN 30
SECONDES.
Ce qu'il faut retenir avant d'ouvrir le dossier : qui, quoi, et ce que ça a donné. Le détail suit, section par section.
- Rôle
- UX Designer · stage
- Contexte
- KinoCaen, association événementielle · Caen
- Année
- Refonte 2026
- Livrables
- Audit 11 critères · benchmark 3 sites · arborescence · wireframes desktop et mobile · maquette HF
Le problème
Le site informait sans donner envie de participer : navigation à sous-niveaux, aucun CTA visible sans scroller, score UX 2,8/5.
Ce que j'ai fait
Un audit sur 11 critères, un benchmark de 3 sites, une arborescence plate, deux wireframes annotés et une maquette haute fidélité.
Le résultat
Score UX projeté à 4,3/5, et l'inscription qui passe de 4 clics à 1.
01 · Contexte
LE PROBLÈME
DE DÉPART.
KinoCaen cumule des problèmes techniques et UX : hébergement chez un particulier, thème parent sans enfant, pages produites par plusieurs intervenants avec des styles différents. Le fond du problème : le site ne donnait pas envie de participer.
Le vrai problème n’était pas technique : le site informait, il n’invitait pas.
Un site qui informe,
Objectif visé
Un site qui donne envie
de faire un film
Navigation aplatie 4 entrées, CTA S'inscrire visible dès le premier écran, cohérence systématique, accessibilité tous âges. Cible : 4,3/5.
02 · Analyse
5 POINTS DE
FRICTION.
Chaque fiche suit la structure UX professionnelle : j'ai observé j'en ai déduit j'ai fait le choix de.
Cinq frictions, dont deux critiques — la performance et l’accessibilité.
Performance
J'ai observé que…
Le temps de chargement est excessivement long médias non compressés, hébergement particulier, thème parent sans enfant.
J'en ai déduit que…
L'utilisateur est confronté à un écran vide avant même d'accéder au contenu. Le risque d'abandon est maximal particulièrement sur mobile.
J'ai fait le choix de…
Imposer une taille maximale aux images, compresser à l'import, mettre en place le lazy loading.
Abandon immédiat
Navigation
J'ai observé que…
Plusieurs sous-niveaux imbriqués, certains liens inaccessibles, aucune indication de la position de l'utilisateur dans le site.
J'en ai déduit que…
L'utilisateur ne sait pas où il se trouve. Il navigue à l'aveugle et renonce, préférant quitter le site pour les réseaux sociaux.
J'ai fait le choix de…
4 entrées plates sans sous-menu, fil d'Ariane sur toutes les pages, navigation répétée en footer.
Désorientation
Contenu
J'ai observé que…
Maximum d'informations sans hiérarchie claire, langage technique orienté initiés, blocs de texte non aérés.
J'en ai déduit que…
Un utilisateur nouveau ne comprend pas ce que propose l'association. Fatigue cognitive réduit l'envie de revenir.
J'ai fait le choix de…
Hiérarchiser selon la priorité utilisateur, réduire à l'essentiel, structurer chaque page autour d'un objectif unique.
Fatigue cognitive
Cohérence
J'ai observé que…
Chaque intervenant avait mis en page à sa façon mélange de blocs Gutenberg, HTML/CSS, thème parent sans enfant.
J'en ai déduit que…
L'utilisateur perd ses repères en passant d'une page à l'autre. Nuit à la confiance et à la prise en main.
J'ai fait le choix de…
Définir une structure de page prédéfinie et un Design System simple pour que toute contribution reste cohérente.
Perte de confiance
Accessibilité
J'ai observé que…
Textes alternatifs manquants, contrastes insuffisants, hébergement non maintenu professionnellement.
J'en ai déduit que…
Une part du public l'association vise tous les âges se retrouve exclue. Risque légal réel (RGAA).
J'ai fait le choix de…
Contrastes WCAG AA, alt-text systématiques, zones de tap ≥44px sur mobile, hébergement professionnel.
Exclusion utilisateur
03 · Benchmark
ANALYSE
COMPARATIVE.
Notation sur 11 critères Bastien & Scapin. KinoCaen vs Fête du Court Métrage (référence sectorielle 4,7/5) et Kino-Session (pair direct 3,8/5).
2,8/5 contre 4,7/5 pour la référence du secteur : l’écart se joue sur l’architecture et la fluidité.
KinoCaen · Avant
2,8
/ 5 · Score moyen
Fête du Court Métrage
4,7
/ 5 · Référence sectorielle
Kino-Session
3,8
/ 5 · Site pair
| Critère | KinoCaen | Fête du Court M. | Kino-Session |
|---|---|---|---|
| Architecture | 1/5 | 4,5/5 | 4/5 |
| Organisation visuelle | 3/5 | 5/5 | 3/5 |
| Cohérence | 2/5 | 5/5 | 5/5 |
| Conventions | 4/5 | 5/5 | 4/5 |
| Informations | 3/5 | 5/5 | 2/5 |
| Compréhension | 3/5 | 5/5 | 4/5 |
| Guidage | 4/5 | 5/5 | 4/5 |
| Gestion des erreurs | 2/5 | 4/5 | 4/5 |
| Fluidité | 2/5 | 5/5 | 5/5 |
| Liberté | 5/5 | 5/5 | 5/5 |
| Accessibilité | 2/5 | 4,5/5 | 3/5 |
| SCORE GLOBAL | 2,8/5 | 4,7/5 | 3,8/5 |
04 · Architecture
ARCHITECTURE
DE L'INFO.
À partir des points de friction identifiés (arborescence à sous-niveaux, fil d'Ariane absent, navigation à 4 clics minimum pour s'inscrire), j'ai redessiné une structure plate à 5 entrées de navigation, avec 4 templates de pages secondaires et 3 contraintes transverses appliquées partout.
Une navigation plate à 5 entrées, et les événements rangés en bibliothèque plutôt qu’en menu.
Le parti pris
L'option évidente
Lister chaque événement dans la navigation pour un accès direct.
Ce que j'ai tranché
Garder une seule entrée « Nos événements » ; les événements individuels deviennent une bibliothèque parcourue de page en page, avec des raccourcis vers les récents sur l'accueil.
Pourquoi : les événements changent chaque année — les mettre dans la nav la ferait déborder et vieillir vite. Un parcours de clics logiques (pas forcément ≤ 3) oriente mieux la recherche et conserve l'historique dans le temps. La navigation ne se fait plus dans le menu, mais à travers les pages.
05 · Wireframes
STRUCTURE
& CHOIX UX.
Wireframes basse fidélité annotés Desktop 1440px et Mobile 375px traités simultanément. Cliquez sur les numéros pour afficher les justifications UX de chaque zone.
Desktop 1440 et mobile 375 dessinés en même temps, pas l’un après l’autre.
06 · Refonte argumentée
MES CHOIX
UX.
Chaque décision argumentée : j'ai identifié · j'ai fait le choix · cela permet de.
Trois décisions, chacune reliée à un critère noté et à un gain chiffré.
01 Navigation aplatie · 4 entrées sans sous-menus
Architecture · Score 1/5 → cible 4/5
J'ai identifié
La navigation à sous-niveaux génère 4 clics minimum pour accéder à l'inscription noté 1/5. La FDC résout cela avec 4 entrées plates, score 4,5/5.
J'ai fait le choix de
4 entrées fixes : Accueil · L'association · Actualités · Nos événements. CTA S'inscrire séparé et mis en avant. Suppression totale des sous-menus.
Cela permet de
Rendre le site navigable en ≤ 2 clics depuis n'importe quelle page. Éliminer la désorientation mobile. Rendre S'inscrire visible en permanence.
02 Section "Prochain Kino" prioritaire above the fold
CTA · Hiérarchie visuelle
J'ai identifié
Le site est surtout visité pour ses événements Kino. 0 CTA S'inscrire visible sans scroller. L'utilisateur cherche ce qui est la raison principale de sa visite.
J'ai fait le choix de
Positionner "Prochain Kino" dans la homepage avant le fold titre, date, description courte, bouton S'inscrire bien visible. Fond contrasté pour la différencier.
Cela permet de
Amener l'utilisateur à sa cible de recherche sans qu'il cherche. Passage de 4 clics à 1 clic pour s'inscrire.
03 Direction visuelle pop accessible · Design System documenté
Cohérence · Accessibilité · Identité
J'ai identifié
Incohérence graphique majeure 2/5. Problèmes de contraste. KinoCaen vise tous les âges une direction "dark cinéma" créerait une barrière symbolique.
J'ai fait le choix de
Direction pop accessible : fond crème #FFFDF5, Bebas Neue + Nunito min 17px, ombres décalées comic-style, couleurs par action (orange = S'inscrire, bleu = Programme).
Cela permet de
Rendre le site accueillant pour tous les publics, d'assurer des contrastes WCAG AA, et de donner une identité forte qui reflète l'énergie du festival.
07 · Maquette
DIRECTION
VISUELLE.
Maquette haute fidélité de la homepage refondée direction pop, joyeuse, accessible, signaux « clap de cinéma » comme clin d'œil au cinéma comme objet partagé. Contenu réel KinoCaen.
Pop et accessible : le contraire d’une direction « dark cinéma », qui aurait exclu une partie du public.
Direction artistique
KinoCaen accueille tout le monde, du débutant qui n'a jamais tenu une caméra au cinéphile averti. La DA devait dire ça avant tout : pas de barrière à l'entrée — ni « cinéphile pointu », ni « jeunesse » qui infantilise.
Pop, mais sérieux
Un entre-deux assumé : énergique et accessible, mais rigoureux dans la structure. Pour un public de 16 à 75 ans.
4 couleurs saturées
Un code par action — orange = s'inscrire, jaune = à venir, bleu = programme, vert = validé. Évoque les affiches sérigraphiées des festivals indé.
Bebas Neue + Nunito
Bebas pour l'énergie « affiche de quartier » ; Nunito ronde, lisible par toutes les générations, même sur mobile en plein soleil.
Bandes diagonales = clap
La seule référence que tout le monde reconnaît, débutant ou pro. Un signal d'inclusion discret mais lisible par tous.
Typographie
Bebas Neue
Titres, chiffres, CTA
Corps
Nunito Regular 400
Min 17px · Corps, labels
Primaire
#E8460A
Orange · CTA S'inscrire
Accent
#FFD600
Jaune · Highlights
Session 1
#1A5FD4
Bleu · Programme
Session 2
#00A86B
Vert · Succès
08 · Impact
RÉSULTATS
MESURÉS.
Comparaison avant/après et métriques clés de la refonte.
Quatre clics deviennent un, et le score projeté passe de 2,8 à 4,3 sur 5.
2,8 4,3
Score UX estimé avant → après
4 1
Clics pour s'inscrire
5
Points de friction identifiés et résolus
09 · Auto-évaluation
CE QUE JE
FERAIS MIEUX.
Un bon dossier UX inclut une auto-critique honnête. Ce que j'identifie comme manquant ou perfectible.
Ce dossier repose sur de l’heuristique, pas sur des tests utilisateurs — c’est sa limite principale.
Tests utilisateurs réels manquants
Refonte basée sur analyse heuristique, pas sur observations comportementales. 5 tests usabilité avec profils représentatifs auraient validé ou remis en cause mes hypothèses avant de maquetter.
Personas formels à produire
3 profils identifiés mais non formalisés en personae (nom, contexte, motivations, frustrations). Des personae documentés rendraient la démarche plus transmissible en présentation.
Contrastes à vérifier via outil WCAG
L'accessibilité est au cœur de mes choix mais je n'ai pas utilisé de vérificateur automatisé (Axe, Contrast Checker) pour valider chaque combinaison couleur/fond.
Design System à formaliser en fichier Figma
Les composants existent dans les wireframes mais ne sont pas rassemblés avec tokens et règles d'utilisation. À produire pour rendre le projet transmissible à un développeur.
Crédits & droits
QUI A FAIT
QUOI.
Un cas d'étude n'a de valeur que si l'on sait ce qui revient à qui.
- Commanditaire
- KinoCaen, association événementielle · Caen
- Mon rôle
- Audit UX, benchmark, architecture de l'information, wireframes, maquette haute fidélité
- Hors de mon périmètre
- Développement, intégration WordPress, mise en ligne
- Publication
- Travaux réalisés en stage, présentés ici à titre de portfolio. Le nom et les contenus KinoCaen appartiennent à l'association et sont cités à titre d'illustration.