I
Le projet
L'entreprise, le public cible et le périmètre.
Personas Empathie MoSCoW
Projet 01 · 2026 · Site catalogue
IngeniumHUB
Ingenium Digital Learning, expert Moodle, a un vrai savoir-faire : plugins, multimédia, ingénierie pédagogique, qui manquait d'impact en ligne. IngeniumHUB est le site catalogue WordPress sur mesure qui le rend visible : conçu et développé de A à Z, du cahier des charges à la mise en production.
100
PageSpeed performance (bureau) · Core Web Vitals verts
59
pages de cahier des charges
4
livrables de soutenance
A→Z
cadrage, UX/UI, dev et mise en ligne, en solo
00 · Repères
EN 30
SECONDES.
Un projet mené seul, du cadrage à la mise en ligne. Ce qu'il fallait résoudre, ce que j'ai livré, et ce que ça donne en production.
- Rôle
- Conception et développement, de A à Z
- Commanditaire
- Ingenium Digital Learning, filiale de l'EM Normandie
- Année
- 2026 · roadmap en 7 phases
- Livrables
- Cahier des charges 59 pages · 3 personas et parcours · wireframes · charte et maquettes Figma · thème WordPress sur mesure · motion et infographie
Le problème
Un savoir-faire réel — plugins Moodle, multimédia, ingénierie pédagogique — que le site institutionnel ne montrait nulle part. Aucun plugin n'y était présenté.
Ce que j'ai fait
Un cahier des charges de 59 pages, une recherche utilisateur, une charte créée de zéro, puis un thème WordPress sur mesure sans page builder, mis en production.
Le résultat
Le site est en ligne, administrable sans redéveloppement, et ses quatre notes PageSpeed bureau sont 100, 93, 96 et 92.
01 · Le cahier des charges
LE PROJET CONDENSÉ
EN 59 PAGES.
Avant une seule ligne de code, tout le projet a été cadré par écrit : le besoin, les cibles, l'étude de l'existant, les fonctionnalités, les choix graphiques et techniques, la planification et le bilan.
Rien n'a été développé avant d'avoir été écrit — et tout ce qui suit est le développé de ces sept sections.
Le document est le condensé de tout ce dossier. En voici les 7 sections.
II
Étude concurrentielle
Concurrents, site actuel d'Ingenium, valeur ajoutée.
Benchmark Positionnement
III
Objectifs & stratégies
Objectifs, outils de suivi, référencement naturel.
KPI GA4 SEO
IV
Fonctionnel & technique
Arborescence, fonctionnalités, contenus, stack.
Arborescence WordPress ACF
V
Graphisme
Charte, design system, maquettage.
Charte Wireframes Maquettes
VI
Résumé du projet
Tâches, Gantt, acteurs, roadmap, maintenance.
~52 jours Roadmap 7 phases
VII
Conclusion
Résultat, performances, conformité, livrables.
PageSpeed RGPD 4 livrables
Le document
Cahier des charges · PDF, 59 pages
Document interne d'Ingenium Digital Learning. Il n'est pas publié ici tant que les droits de diffusion ne sont pas réglés — il est présenté en entretien sur demande.
02 · Le projet · L'entreprise
RENDRE VISIBLE UN
SAVOIR-FAIRE RÉEL.
Une entreprise reconnue dans son métier, dont la spécialité la plus pointue n'apparaissait sur aucune page.
Le constat fondateur tient en une phrase : le site institutionnel ne présentait aucun plugin.
Ingenium Digital Learning (filiale de l'EM Normandie) est une référence de la formation digitale : plugins Moodle, création multimédia, ingénierie pédagogique. Mais ce savoir-faire manquait d'impact en ligne — le site institutionnel ne présentait aucun plugin.
Le constat fondateur du projet : combler ce manque avec un catalogue web visuel et pédagogique, centré sur les plugins et réalisations d'Ingenium, qui rende le savoir-faire lisible et amène le visiteur vers la prise de contact.
Entreprise
Ingenium DL
Filiale de l'EM Normandie, créée en 2003. Environ 20 collaborateurs, à Colombelles (Caen la Mer).
Cœur de métier
Moodle & digital learning
Plugins, multimédia (2D/3D/VR), ingénierie pédagogique, hébergement de plateformes Moodle.
Cible du site
B2B / B2G
Universités, centres de formation et entreprises qui digitalisent leur formation.
2003
année de création (université + 2 CCI)
20
collaborateurs aux compétences complémentaires
2
Trophées du Digital Learning (2021 et 2023)
1
prix EdTech Normandie 2023 (HUB SIMERROR)
03 · Public cible
TROIS
PROFILS D'ACHETEURS.
Le site s'adresse à des structures professionnelles (B2B / B2G) : des acheteurs potentiels et des curieux de Moodle. Trois personas ont guidé les choix de conception.
Les trois profils veulent la même chose sous trois formes : comprendre vite, sans jargon, et pouvoir se projeter.
Marie Dubois, 57
Adjointe de direction
Objectif
Une info accessible à tous et un espace de ressources.
Contexte
Curieuse des nouvelles technologies ; on apprend de plusieurs façons.
Frustration
Manquer d'infos, un outil incompris ou inaccessible.
Benjamin Blaue, 36
Directeur RH
Objectif
Se renseigner, centraliser, réduire le temps de formation.
Contexte
Veut le meilleur ; cherche à automatiser la formation des arrivants.
Frustration
Pas de réponse rapide, un outil non adaptable.
Armand Loutte, 43
Directeur de formation
Objectif
Multi-supports, parcours logiques, solution personnalisée.
Contexte
Veut créer une plateforme de formations en ligne.
Frustration
Ne pas pouvoir personnaliser, être limité dans l'évolution.
Parcours utilisateur · avant, pendant, après
Ce que vit la personne avant, pendant et après sa visite du site. L'émotion de chaque étape est écrite, pas seulement colorée.
Avant
1 · Recherche d'un prestataire
Hésitante
« J'espère trouver… »
2 · Trouvé
Positive
« Super ! »
3 · Je me renseigne
Négative
« Peur d'un travail mal fait »
Pendant
4 · Prise de contact
Positive
« Ça me paraît bien, j'y vais »
5 · Réception du devis
Négative
« C'est un peu cher… »
6 · Validation
Hésitante
« C'est long. »
Après
7 · Réception de la commande
Positive
« Parfait ! Je recommande ! »
Le site doit rassurer dès les étapes 1 à 3.
04 · Étude concurrentielle
UN ESPACE LIBRE
ENTRE DEUX EXTRÊMES.
Entre l'annuaire officiel moodle.org (exhaustif mais austère) et les sites d'agences (rassurants mais peu détaillés), il manquait un catalogue visuel et pédagogique.
Rivaliser sur la lisibilité, pas sur l'exhaustivité : c'est l'enseignement qui a décidé de la forme du catalogue.
Entre l'annuaire officiel moodle.org et les sites d'agences, il manquait un catalogue visuel et pédagogique. Quant au site actuel d'Ingenium, il ne met pas ce savoir-faire en avant.
Annuaire officiel open source
moodle.org/plugins
Forces
- Exhaustif — la référence mondiale
- Filtres multicritères
- Stats de téléchargement visibles
Faiblesses
- Très dense, intimidant
- Peu visuel, pas d'aperçu rapide
- Aucune dimension conseil
Enseignement : rivaliser sur la lisibilité, pas l'exhaustivité.
Agence Moodle Partner · Lyon
Pimenko
Forces
- Certifications mises en avant
- Études de cas détaillées
- Appels à l'action clairs
Faiblesses
- Navigation dense
- Peu de transparence tarifaire
- Plugins peu détaillés
Enseignement : raconter les cas (contexte, réalisation, résultat).
Partenaire Moodle Premium
E-learning Touch'
Forces
- Offre structurée en piliers
- Témoignages crédibles
- 40+ logos clients affichés
Faiblesses
- Menus redondants
- Peu de démos produit
- Peu de précisions techniques
Enseignement : la preuve sociale rassure fortement en B2B.
Site vitrine WordPress
Le site actuel d'Ingenium
Forces
- Navigation claire, CTA visible
- Clients prestigieux, certifications
- Identité pro
Faiblesses
- Les plugins ne sont présentés nulle part
- Contenu descriptif minimaliste
- Pas d'espace catalogue
Le constat fondateur : le savoir-faire plugins manquait d'impact en ligne. IngeniumHUB le lui donne.
Le positionnement d'IngeniumHUB
La place et la valeur ajoutée du site face aux trois concurrents étudiés, en quatre partis pris.
Pédagogique
Des explications accessibles aux novices : ce qu'est Moodle, un plugin, ce qu'il rend possible.
Visuel
Des fiches produit illustrées, des exemples concrets, une navigation par catégories.
Relié
Connecté au site institutionnel et aux actualités : chaque page mène vers le contact.
Crédible
Projets, réalisations et références clients racontés : la preuve par l'exemple.
05 · Objectifs & périmètre
INFORMER, VALORISER,
PROVOQUER LE CONTACT.
Un site catalogue, sans vente en ligne, aux objectifs SMART mesurés par les outils de suivi.
Trois objectifs, cinq indicateurs chiffrés, et un tri des fonctionnalités écrit avant le premier écran.
Visibilité
Faire exister les plugins et réalisations sur le web, référencement travaillé.
Notoriété
Renforcer l'image d'expert Moodle auprès des clients et prospects.
Informer
Expliquer simplement ce qu'Ingenium sait faire : plugins, multimédia, pédagogie.
Indicateurs cibles à 6 mois
Les objectifs chiffrés qui serviront à juger la réussite.
100%
des fiches indexées
300+
visites / mois
5+
contacts / trimestre
≥90
PageSpeed maintenu
15+
fiches au catalogue
Priorisation MoSCoW
Méthode de tri des fonctionnalités : Must (vital), Should (essentiel), Could (confort), Won't (plus tard).
Must · vital
- Charte graphique
- Catalogue & fiches produit
- Ajout de produits
- Contact
- CMS & droit du site
Should · essentiel
- Back-office personnalisé
- Front-end personnalisé
- Référencement
- Accessibilité
- Mobile friendly
Could · confort
- Multimédia par produit
- Explication plugins & Moodle
- Mascotte pédagogique
- Barre de recherche
Won't · plus tard
- Écoconception
- Multilingue
- Actualités des réseaux
- Automatisation des thèmes
Référencement naturel · le poids des 3 piliers
Le SEO, c'est l'ensemble des techniques qui font remonter le site dans les résultats de recherche. Trois familles, très inégales.
06 · Conception UX → UI
DU WIREFRAME
À LA CHARTE.
Six étapes, dans l'ordre où elles ont eu lieu : du cadrage écrit à la mise en production.
La charte n'a pas été choisie dans un catalogue : elle a été créée de zéro, puis tenue par un design system.
01
Cadrage & cahier des charges
Analyse du besoin avec le pôle dev d'Ingenium : cibles B2B/B2G : clients entreprises (Business) et administrations ou collectivités (Government)., périmètre (MoSCoW : tri des besoins — Must (vital), Should, Could, Won't (plus tard).), arborescence et planning, formalisés dans le CDC.
02
UX — recherche & parcours
Étude concurrentielle, Persona : portrait-robot d'un utilisateur type, pour concevoir en pensant à ses besoins réels., carte d'empathie et parcours utilisateur, puis Wireframe : maquette « fil de fer » — la structure d'une page posée avant le style. des pages clés.
03
UI — charte & maquettes
Création de la charte de zéro (bleu nuit, corail, jaune or) et du design system, puis maquettes haute fidélité sur Figma.
04
Technique — WordPress sur mesure
Thème theme_HUB : le thème WordPress sur mesure développé spécifiquement pour ce projet. et plugin métier avec ACF (Advanced Custom Fields) : extension WordPress pour créer des champs de contenu personnalisés — ici la version gratuite., sans Page builder : outil de montage visuel de pages (par exemple Elementor) — volontairement écarté ici, pour la performance., en HTML/CSS/JS/PHP natifs.
05
Développement & back-office
Front-end responsive, catalogue filtrable, fiches, et back-office autonome pour le service Marketing & Communication.
06
SEO, tests & mise en ligne
SEO (référencement naturel) : les optimisations qui font remonter le site dans les résultats de recherche. (titres, métas, webp, sitemap), tests, puis mise en production sur hub.ingenium-elearning.com.
Arborescence · 5 entrées claires
Le plan des pages du site et la façon dont elles s'organisent entre elles.
Accueil
Point d'entrée
Catalogue
Recherche par filtres, fiches produit
Expertises
Multimédia · Ingénierie · Plugin Moodle
Actualité
Reliée au site Ingenium
Nous joindre
Prise de contact / RDV
Roadmap · 7 phases
Le planning du projet, du cadrage à la mise en ligne. Une semaine de calendrier vaut deux jours travaillés.
1 · S.1-3
Cadrage & CDC
2 · S.4-9
UX / UI
3 · S.10-11
Technique
4 · S.12-19
Développement
5 · S.20-22
Contenus & SEO
6 · S.23-24
Tests
7 · S.25
Mise en ligne
Wireframes · la structure avant le style
Maquettes « fil de fer » : elles posent la hiérarchie de l'information avant les couleurs. Le responsive est traité dès cette étape — desktop 1440 et mobile 375 en même temps.
Design UI · les pages maquettées
Les maquettes finales en haute fidélité, créées sur Figma.
4 autres pages maquettées : Catalogue, Qui sommes-nous, Réalisation, Projet — exports haute définition en cours d'intégration.
Charte graphique · créée de zéro
Les couleurs, les typographies et les composants qui donnent son identité visuelle au site.
Bleu nuit
#181B48
Titres, pied de page
Bleu
#36388D
Structure
Corail
#E16251
Boutons / appels à l'action
Jaune or
#F0A500
Ponctuation
Lavande
#EEF0FF
Tags, fonds de carte
Design system · les états du bouton
Le corail décliné en quatre états, plus les tags du catalogue en typographie Open Sans.
Neutre
#E16251
Survol
#EA644E
Actif
#C94D3C
Désactivé
#9AA0B0
Tags catalogue : MOODLE MULTIMÉDIA PLUGIN SITE — bleu #36388D sur lavande #EEF0FF dans la charte du client.
07 · Technique
WORDPRESS SUR MESURE,
SANS PAGE BUILDER.
Trois fonctionnalités structurent le projet : la gestion des réalisations et projets, la recherche par filtres, et la mise à jour autonome du contenu.
Aucun page builder : le thème porte le rendu, et c'est ce qui tient les 100 de PageSpeed.
Le tout sur une architecture développée sur mesure, pensée performance.
WordPress 6.9
CMS (Content Management System) : outil de gestion de contenu — ici WordPress — pour publier sans coder. : gestion autonome des contenus par l'équipe.
Thème theme_HUB
Thème sur mesure qui porte le rendu, sans page builder.
Plugin métier
Plugin maison pour la logique du catalogue.
ACF gratuit
Champs personnalisés des fiches, sans ACF Pro.
HTML/CSS/JS/PHP
Intégration native pour un chargement rapide.
Git · OVH
Versioning des évolutions ; hébergement dans l'Union européenne (RGPD).
Back-office
Les pages Réalisations et Projets font office de portfolio administrable : le service Marketing & Communication ajoute, modifie ou supprime une fiche (photo, description, catégorie) en autonomie, sans redéveloppement.
08 · Rendus & livrables
LES 4 LIVRABLES
DE SOUTENANCE.
Le site en production, le cahier des charges, un motion de présentation et une infographie pédagogique.
Le livrable principal n'est pas un document : c'est un site en ligne, que l'équipe alimente sans moi.
Le motion de présentation
Une courte vidéo animée qui présente le site en mouvement, dans les formes et les couleurs de la charte. Elle ne part qu'à la demande.
L'infographie du parcours projet
Un visuel pédagogique qui résume les étapes de prise en charge d'une demande.
Le site en ligne et le cahier des charges
Les deux livrables consultables : la production, et le document qui l'a précédée.
Le rendu final
hub.ingenium-elearning.com
Catalogue filtrable, fiches projets et réalisations, pages expertises, prise de rendez-vous.
Nouvel onglet
Le document
Cahier des charges · 59 pages
La feuille de route complète du projet. Document interne du client, non publié ici — voir la section 01.
09 · Résultat & performances
LIVRÉ, EN LIGNE,
AU VERT.
Relevé du 4 juillet 2026 sur pagespeed.web.dev. Les huit notes et les quatre Core Web Vitals.
Huit notes relevées, la plus basse est 92 — et le Total Blocking Time est à zéro milliseconde.
PageSpeed · Bureau
100Performance
93Accessibilité
96Bonnes pratiques
92SEO
PageSpeed · Mobile
96Performance
94Accessibilité
92Bonnes pratiques
92SEO
0,4 s
First Contentful Paint
0,5 s
Largest Contentful Paint
0 ms
Total Blocking Time
0,002
Cumulative Layout Shift
Résultat
Site livré et en ligne sur hub.ingenium-elearning.com : catalogue filtrable, fiches projets et réalisations, pages expertises et prise de rendez-vous, administrable en autonomie. Tous les Core Web Vitals : indicateurs Google qui mesurent la vitesse et la stabilité de chargement telles que l'utilisateur les perçoit. sont au vert.
Le socle est livré et en ligne. Le remplissage du catalogue se poursuit côté Ingenium : cette fiche présente le design, l'architecture et les livrables réalisés.
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
- Ingenium Digital Learning, filiale de l'EM Normandie · Colombelles
- Mon rôle
- Cahier des charges, UX Research, wireframes, charte et design system, maquettes, thème WordPress et plugin métier, SEO, mise en production
- Avec
- Le pôle développement d'Ingenium pour l'analyse du besoin, le service Marketing & Communication pour les contenus
- Publication
- Le cahier des charges est un document interne d'Ingenium et n'est pas diffusé ici. Les marques, contenus et visuels d'Ingenium Digital Learning lui appartiennent et sont cités à titre d'illustration.