Case study UX/UI complète d'un redesign immersif pensé pour transformer un site institutionnel en expérience de visite mémorable.
12 min de lecture
J'ai conçu Le Redoutable comme une refonte complète, en partant d'un constat simple : le sujet est extrêmement fort, mais le site d'origine ne transmet pas assez d'immersion ni de tension narrative. Mon travail a donc consisté à reconstruire le parcours, la hiérarchie et l'ambiance visuelle pour mieux relier émotion, compréhension et intention de réservation.
EnjeuRendre la visite désirable avant la réservation, sans perdre les informations pratiques.
Contexte & enjeu de redesign
Contexte & objectifs business
Le point de départ est fort : un site existant trop scolaire, trop dense, pas assez à la hauteur du sujet. Le Redoutable n'est pas un simple objet de musée. C'est un mythe industriel, militaire et narratif. Quand la page ne porte pas cette tension, la visite devient une information froide parmi d'autres.
Le redesign cherche donc moins à faire joli qu'à réaligner le fond et la forme. Le contenu doit raconter la profondeur, le secret, la puissance contenue et l'aura technologique du sous-marin, tout en rendant l'accès aux informations pratiques, aux spécifications et au CTA de réservation plus rapide et plus naturel.
Les objectifs business sont clairs : moderniser l'image, augmenter l'envie de visite et rendre les informations utiles plus facilement accessibles. Ce qui revient concrètement à trouver le bon équilibre entre immersion et efficacité.
Recherche & benchmark
J'ai travaillé ce projet comme un exercice de transformation UX complet : identifier les faiblesses de l'existant, clarifier les moments de lecture, puis mettre en scène l'information pour que l'expérience serve directement l'envie de visite.
Personas & attentes
Visiteur prioritaire
Grand public, familles, passionnés d'histoire militaire, amateurs d'expériences immersives. Le contenu doit rester séduisant tout en étant immédiatement compréhensible.
Insight clé
Le wow effect ne peut pas être cosmétique : il doit révéler, guider et ordonner l'univers, pas le brouiller.
Référence utile
Les musées immersifs et les sites de storytelling technologique montrent qu'une palette forte, un bon rythme de sections et des CTA visibles plus tôt améliorent la performance sans sacrifier l'émotion.
Implication UX
Faire monter la tension visuelle sans perdre les informations pratiques ni l'accès rapide à la réservation.
Persona visuel simplifié
Visiteur prioritaire · 34 ans · Nantes
Thomas Legrand
« Je veux comprendre vite, mais je veux aussi ressentir l'histoire. »
Points de frictionPage trop dense, informations pratiques cachées, pas de montée narrative.
Attentes clésPréparer une visite, trouver rapidement les informations, réserver sans hésiter.
Implication UX : guider la lecture avant d'ouvrir la réservation.
User journey actuel
Le parcours de départ ressemble à celui d'un site institutionnel classique : arrivée sur une page informative, lecture dense, difficulté à hiérarchiser les arguments de visite, puis sortie avant engagement. La refonte doit transformer cette lecture passive en progression narrative.
Problèmes UX à résoudre
Problem statement
La page actuelle ne convertit pas assez bien l'intérêt culturel en envie de visite, parce qu'elle n'organise ni la tension narrative, ni la hiérarchie de lecture, ni l'accès à l'action finale. Le redesign doit donc créer une expérience plus claire, plus immersive et plus mémorable.
1. Direction artistique sous-exploitée
Le sujet est puissant, mais l'interface actuelle ne transmet pas le mystère ni la tension narrative attendus.
2. Information mal hiérarchisée
Les données techniques et pratiques existent, mais elles sont noyées dans une lecture trop monotone.
3. Faible sensation de progression
Sans montée en intensité, l'utilisateur ne vit pas la découverte comme un parcours, mais comme une page statique.
4. CTA trop peu mis en scène
Réserver ou préparer sa visite devrait être une suite logique de l'immersion, pas un élément périphérique.
Architecture, écrans et itérations
Idéation & séquençage du parcours
Le projet prend forme quand on le lit comme une montée en tension : hero immersif, contexte narratif, spécifications remises en valeur, preuves pratiques, puis réservation. Cette approche est plus efficace qu'un simple scroll descriptif sans relief.
Le user flow clarifie deux parcours distincts : un parcours visiteur solo orienté découverte, créneau et e-billet, et un parcours groupe ou scolaire centré sur la demande de devis, la réponse de l'équipe, le paiement groupe et la confirmation. C'est une pièce forte pour montrer la structure UX du projet avant les maquettes.
Le redesign assume une lecture plus cinématographique : sections plus respirantes, contraste plus franc, ambiance technologique cohérente.
Itération 01 · Hero plus narratif
Le premier écran doit installer le mystère et la force, sans bloquer la lecture. C'est là que les micro-animations et la palette cyan prennent leur sens.
Itération 02 · Infos utiles rehiérarchisées
Les spécifications et les arguments de visite doivent être découplés des paragraphes d'ambiance pour rester facilement scannables.
Itération 03 · CTA plus tôt dans le parcours
Le bouton principal doit arriver pendant que l'attention est encore haute, pas à la toute fin de la page.
Itération 04 · Mobile d’abord
Le projet doit tenir sur mobile avec la même tension visuelle, ce qui demande des sections plus nettes, moins de bruit et des animations sobres.
Tests & itérations
Les itérations clés portent sur la place du CTA, le niveau de contraste, la densité des blocs informatifs et l'équilibre entre ambiance et lisibilité. C'est précisément ce type de réglage qui montre la maturité UX d'un redesign immersif.
WIREFRAMES
Les wireframes servent ici à vérifier la montée en tension: installer l'immersion, garder les informations pratiques trouvables et placer le CTA au moment où l'attention est encore haute.
Cette couche de travail vérifie la progression de lecture, la place du CTA et l'équilibre entre immersion et informations pratiques.
Solution finale & logique de redesign
Design UI haute fidélité & micro-interactions
Le redesign repose sur une idée simple : transformer l'information en expérience. Le noir profond, le cyan lumineux et les références abyssales ne servent pas à styliser le site pour le plaisir. Ils servent à mieux faire ressentir la promesse de visite. En parallèle, la navigation, les blocs pratiques et les CTA deviennent beaucoup plus explicites.
Avant
Page institutionnelle plus descriptive qu'expérientielle, densité visuelle moyenne, peu de tension, CTA peu mis en scène, informations utiles présentes mais peu valorisées.
Après
Parcours immersif, hiérarchie plus forte, ancrage de marque immédiat, contenu plus mémorisable, et chemin vers la réservation plus logique.
Avant: la page d’origine de La Cité de la Mer pose bien l’information, mais l’expérience reste plus institutionnelle que narrative.Après: le redesign assume une dramaturgie plus forte, une hiérarchie plus franche et un CTA mieux intégré au récit.
Pourquoi ce bouton ici ?
Le CTA apparaît après un premier niveau d'immersion et de contexte, pour parler aux personnes déjà engagées sans disparaître pour les plus pressées.
Pourquoi cette micro-interaction ?
Elle aide à lire la page et renforce la sensation de profondeur, sans détourner l’attention de l’essentiel.
Design system
La palette, la typographie et les composants sont pensés comme un langage de tension : fond sombre, accent technologique, blocs structurés, transitions sobres. Le système visuel soutient la narration sans la surjouer.
Ce que je ferais différemment
Regard critique
Si je reprenais Le Redoutable, je testerais une hiérarchie mobile encore plus directe sur les informations pratiques et je réduirais légèrement la dépendance aux effets visuels sur les premiers écrans. Je renforcerais aussi les états de contraste pour mieux servir l'accessibilité.
Infos pratiques plus tôt
Je ferais remonter les horaires, tarifs et CTA plus explicitement pour diminuer le temps de recherche sans casser l'immersion.
Animations plus sélectives
Je garderais l'effet de profondeur, mais je réserverais les micro-interactions aux points où elles aident vraiment la lecture.
Hypothèses de travail & learnings
Impact mesuré
Ces hypothèses s'appuient sur un benchmark de sites patrimoniaux, des heuristiques UX et des retours qualitatifs simulés centrés sur la narration et la réservation.
Hypothèse : une immersion plus progressive peut augmenter le temps passé sur la page sans perdre le fil narratif.
Hypothèse : une meilleure hiérarchie des informations pratiques peut réduire le temps nécessaire pour les trouver.
Hypothèse : remonter le CTA principal peut améliorer les clics vers la réservation sur un contenu patrimonial.
Hypothèse : une narration plus lisible peut renforcer la mémorisation de marque dans un test qualitatif.
Réflexion personnelle
Le principal apprentissage, c'est qu'une refonte UX ne tient pas seulement à un meilleur look. Elle fonctionne quand le sujet, le rythme de lecture et l'action attendue vont dans le même sens.
PDF UI intégrés
Dossier maquettes et UI
Dossier maquettes et direction artistique : concept, palette, écrans et univers visuel complet du projet.
