Case Study 02 · Rebranding immersif · UX/UI

Le Redoutable

Case study UX/UI complète d’un redesign immersif pensé pour transformer un site institutionnel en expérience de visite mémorable.

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.

Couverture du dossier Le Redoutable avec logotype du sous-marin, fond sombre et palette cyan militaire.
La première impression pose immédiatement le ton: univers sombre, militaro-tech, tension silencieuse et immersion contrôlée.
Année 2026
Rôle UX/UI Designer solo, redesign, direction artistique, hiérarchie de contenu, narration immersive
Type Redesign immersif · Projet personnel
Outils Figma, Illustrator, branding, UI design
Livrables Brief simplifié, refonte visuelle, maquettes desktop/mobile, dossier maquettes
Enjeu Rendre la visite désirable avant la réservation, sans perdre les infos pratiques

Contexte & enjeu de redesign

Brief client & objectifs business

Le point de départ est très fort: un site existant jugé trop scolaire, trop dense et pas assez immersif au regard du sujet. Le Redoutable n’est pas un simple objet de musée; c’est un mythe industriel, militaire et narratif. Or si la page n’incarne pas cette tension, elle réduit la visite à une information froide.

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 plus rapides l’accès aux infos pratiques, aux spécifications et au CTA de réservation.

Les objectifs business sont de moderniser l’image, d’augmenter l’envie de visite et de rendre les informations utiles plus rapidement accessibles. Le projet devait donc équilibrer immersion et efficacité.

Recherche & benchmark

Le brief simplifié m’a servi de point de départ, mais la version détaillée ici développe surtout mon propre raisonnement de redesign. J’ai travaillé le 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

Public primaire

Visiteurs grand public, familles, passionnés d’histoire militaire et amateurs d’expériences immersives. Ils n’ont pas tous le même niveau d’expertise, donc le contenu doit être à la fois séduisant et rapidement compréhensible.

Insight clé

Le wow effect ne peut pas être cosmétique. Il doit renforcer la compréhension: révéler, guider, ordonner et densifier l’univers, pas l’embrouiller.

Références utiles

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.

Metrics simulées à afficher

+24 % de clics vers la réservation, +29 % de mémorisation de marque, -42 % de temps pour trouver les horaires et infos pratiques, +35 % de temps passé sur la page.

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 fonctionne bien dès lors qu’on l’explique comme une séquence d’écrans à tension croissante: hero immersif, contexte narratif, spécifications remises en valeur, preuves pratiques, puis réservation. Cette logique est plus efficace qu’un simple scroll descriptif sans crescendo.

User flow Le Redoutable montrant le parcours visiteur solo et groupe, de l'accueil immersif à la découverte, aux tarifs, à la billetterie ou au devis personnalisé jusqu'à la confirmation.
Le user flow clarifie deux parcours distincts: un parcours visiteur solo orienté découverte, créneau et e-billet, et un parcours groupe/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.

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 profiter de l’immersion, pas attendre que l’utilisateur ait presque terminé la page.

Itération 04 · Mobile d’abord

Le projet doit tenir sur mobile avec la même tension visuelle, ce qui impose 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.

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, mais à 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.

Pourquoi ce bouton ici ?

Le CTA apparaît après un premier niveau d’immersion et de contexte, pour capter un utilisateur déjà engagé tout en restant visible aux profils plus pressés.

Pourquoi cette micro-interaction ?

Parce qu’elle guide la lecture et renforce la sensation de profondeur. Elle ne doit jamais distraire ni ralentir l’accès à l’information.

Design system

La palette, la typographie et les composants sont pensés comme un langage de tension: fond sombre, accent technologique, blocs plus structurés, transitions sobres. Le système visuel soutient la narration sans la surjouer.

Résultats simulés & learnings

Impact mesuré

  • +35 % de temps passé sur la page grâce à une immersion plus progressive.
  • -42 % de temps pour trouver les informations pratiques.
  • +24 % de clics simulés sur la réservation après remontée du CTA principal.
  • +29 % de mémorisation de marque en test qualitatif simulé.

Réflexion personnelle

Le principal apprentissage ici, c’est qu’une refonte UX réussie n’est pas seulement un meilleur “look”. C’est une meilleure correspondance entre le sujet, le rythme de lecture, la hiérarchie de l’information et l’action attendue.

Brief & dossier complets intégrés

Aperçu du brief UX UI Le Redoutable.

Brief UX/UI Le Redoutable

Version simplifiée du brief UX/UI, conçue comme un point d’entrée rapide avant la lecture détaillée du projet.

Ouvrir le brief
Ouvrir le brief sur Google Drive

Sur mobile, le brief s’ouvre directement sur Google Drive pour un affichage plus fluide.

Aperçu de la couverture du dossier complet Le Redoutable.

Dossier maquettes et UI

Dossier maquettes et direction artistique: concept, palette, écrans et univers visuel complet du projet.

Voir les visuels PDF UI
Voir les visuels PDF UI sur Google Drive

Sur mobile, les maquettes et visuels UI s’ouvrent directement sur Google Drive.