CARGO SCHOOL

Cargo School est un centre de formation spécialisé en logistique et sécurité. Il disposait d’un site vieillissant, complexe à gérer et peu clair pour les utilisateurs.

L’objectif : clarifier l’offre, moderniser l’image et rendre l’équipe 100 % autonome grâce à une refonte Webflow structurée et efficace.

Avant même d’entrer dans la conception du site, la première étape a été un travail de moodboard et d’exploration visuelle.
Cette phase a joué un rôle clé pour repositionner Cargo School : leur image ne reflétait plus la qualité de leurs formations ni leur professionnalisme.

Les moodboards ont permis :

• d’identifier les codes visuels cohérents avec leur secteur (logistique, cargo, aviation),
• de distinguer ce qui inspire confiance pour des publics très variés (salariés, demandeurs d’emploi, entreprises, RH),
• de définir une atmosphère graphique plus moderne, structurée et accessible,
• et surtout d’aligner dès le départ la direction artistique avec les enjeux pédagogiques et UX du projet.
  ‍

Une des particularités du projet Cargo School est que les formations ne sont pas présentées sous forme de fiches complètes sur le site.
Les informations détaillées (objectifs, programme, modalités…) sont données directement sur Digiforma, ce qui impose une approche différente en termes d’UX.

L’enjeu n’était donc pas de réécrire l’ensemble de l’offre, mais plutôt de structurer la découverte pour aider les utilisateurs à s’orienter rapidement parmi les différentes thématiques.

La phase de wireframing a permis de clarifier plusieurs points essentiels :

• Rassembler les formations par catégories logiques (Transit & Douane, IA, Commerce et Matières dangereuses).
  Cette approche simplifie la navigation et permet aux visiteurs de comprendre en un coup d’œil l’étendue de l’offre sans être noyés dans trop d’informations.
• Créer des cartes formations homogènes, suffisamment informatives pour donner envie d’en savoir plus, tout en restant légères : un titre, un court descriptif, et un accès direct vers la page Digiforma correspondante.
  L’objectif : donner un aperçu clair sans dupliquer les contenus existants.
• Fluidifier la redirection vers Digiforma, en s’assurant que les transitions soient naturelles et que l’utilisateur comprenne qu’il accède à la page détaillée de la formation.

Cette étape UX a permis d’obtenir une architecture plus intuitive, où chaque section agit comme un point d’entrée vers un univers de formations clairement identifiées. 

Une fois la direction artistique validée (moodboards, palette, typographies, iconographie), l’enjeu principal a été de transposer cet univers graphique dans des maquettes UI fonctionnelles, sans perdre la simplicité et la clarté nécessaires pour un centre de formation.

Le travail d’UI s’est concentré sur trois aspects :

• Donner un habillage cohérent aux maquettes UX, en respectant les codes visuels définis en amont : couleurs structurées, typographies professionnelles, visuels sobres et adaptés au secteur cargo.
• Créer des sections aérées et hiérarchisées, permettant aux utilisateurs de scanner l’information rapidement : un point essentiel pour des publics parfois peu familiers avec le digital.
• Concevoir des cartes formations modulaires, clairement identifiables, qui servent d’entrée vers les catégories et renvoient naturellement vers Digiforma pour le détail.

L’objectif n’était pas d’en faire trop, mais de construire une interface moderne, lisible et intuitive, qui valorise l’offre sans complexifier le parcours.

La phase de développement Webflow a été pensée pour offrir à Cargo School un site à la fois robuste, évolutif et facile à maintenir au quotidien — même sans CMS dédié aux formations.

L’objectif n’était pas de complexifier l’architecture, mais au contraire de créer une structure logique et durable, adaptée à leur fonctionnement réel :

Un système basé sur des pages templates pour les catégories

Comme les formations sont détaillées sur Digiforma, il n’était pas nécessaire d’intégrer un CMS dédié dans Webflow.
J’ai donc mis en place des pages templates réutilisables pour chaque catégorie (Transit & Douane, IA et Matières dangereuses), permettant à l’équipe d’ajouter facilement une nouvelle catégorie ou d’en modifier la mise en page sans repartir de zéro.

Des composants Webflow modulaires et personnalisables

Pour garantir une grande autonomie, chaque section a été construite avec :

• des composants réutilisables (cards, CTA, blocs titres, bandes colorées, sections visuelles),
• des propriétés claires pour contrôler facilement les variations (couleurs, icônes, espacements),
• une logique qui permet de modifier un design dans un composant et de le retrouver mis à jour partout où il est utilisé.

Cette approche assure une cohérence visuelle tout en offrant une grande flexibilité pour faire évoluer le site.

Un CMS utilisé uniquement là où il est vraiment utile

Pour éviter de multiplier les systèmes inutiles, j’ai limité le CMS aux besoins essentiels :

• les témoignages, pour pouvoir en ajouter ou en modifier facilement,
• la FAQ, afin de maintenir une base d’informations claire et vivante.

Cette organisation permet d’utiliser le CMS de manière intelligente, tout en conservant des pages statiques pour les sections où la structure est fixe.

Accompagnement et autonomie grâce à des vidéos tutoriels

Pour que l’équipe puisse gérer le site en toute confiance, j’ai enregistré plusieurs tutoriels expliquant :

• comment modifier une catégorie de formation,
• comment mettre à jour une card,
• comment changer une image ou un texte,
• comment gérer la FAQ et les témoignages,
• comment ajuster un composant ou en réutiliser un dans une nouvelle page.

Résultat : un site performant, cohérent et évolutif, avec un niveau d’autonomie très élevé et une structure pensée pour durer à long terme.

‍