Retour sur la conception UX/UI, le développement et la mise en production du nouveau site de l'ENSOSP : Un projet simple et efficace qui nous a permis d'améliorer notre méthode de développement frontend avec Emulsify et Storybook...
L'ENSOSP
Organe de la sécurité civile française, l’Ensosp forme l’ensemble des officiers de sapeurs-pompiers professionnels et volontaires au management, au commandement opérationnel et la gestion de crise. 6000 officiers de sapeurs-pompiers y sont formés en moyenne par an. L’Ecole nationale organise également des stages de mise en situation en matière d’incendie et de secours, et de gestion de crise pour les élus, les fonctionnaires, les cadres des entreprises et les experts français et étrangers.
Elle dispose d’une structure pédagogique unique, notamment composée d’un site doté de l’équivalent logistique de sept centres de secours permettant de reproduire les multiples scenarios d’interventions en milieux urbains et routiers. L’Ecole nationale permet aux officiers de se former sur de nombreux simulateurs spécialisés : accidents chimiques et radiologiques, urgences extrahospitalières, feux urbains, recherche des causes et des circonstances incendie, risques hydrogènes, etc.
Vitrine du modèle français de sécurité civile, l’Ecole nationale accueille chaque année des officiers venus du monde entier se former aux méthodes de commandement et de gestion de crise françaises (Espagne, Maroc, Tunisie, Benin, Côte d’Ivoire, Liban, Algérie et bientôt Taïwan, Russie, Turquie, etc.)
Le projet
L'Ecole Nationale Supérieure des Officiers Sapeurs Pompiers (ENSOSP) a contacté l'agence bluedrop.fr fin 2020 pour prendre en charge la refonte de son site, propulsée alors par Drupal 7. Le périmètre du projet a concerné :
- La rédaction des spécifications fonctionnelles détaillées (en ateliers avec l'équipe de l'ENSOSP) ;
- La conception de l'expérience utilisateur (UX) ;
- La conception des interfaces (UI) ;
- Le développement avec Drupal 9 ;
- L'optimisation pour le positionnement SEO ;
- Le respect des normes d'accessibilité ;
- La formation des contributeurs et des administrateurs du site ;
- La fourniture d'une procédure de déploiement pour le DSI de l'ENSOSP ;
- La maintenance suite à la mise en production.
Le projet ne comprenait pas de reprise des contenus du précédent site.
La conception UX et UI
La conception, conduite en collaboration avec l'équipe projet de l'ENSOSP, s'est concentrée sur la simplification des parcours utilisateurs pendant la phase UX (ateliers de confrontation des personae, de construction des parcours utilisateurs et de conception des wireframes).
Elle s'est ensuite attachée à rajeunir la charte graphique de l'école et son image, désormais plus moderne et dynamique. Il s'agissait de proposer un site robuste techniquement et pérenne dans le temps, notamment en termes d'image.
Le développement avec Drupal 9, le thème Emulsify
Le site est propulsé par Drupal 9 et ne présente pas de fonctionnalités "exotiques". Il s'agit d'un cas typique de site corporate, dont l'objectif est d'informer et diriger vers les différents outils digitaux de l'école. Le thème proposé est classique, efficace, sans fioritures animées. Il repose sur Emulsify, qui dispose d'un thème contribué, qui facilite l'intégration dans une démarche "atomique" avec des composants réutilisables et des directives claires pour les équipes. Emulsify fournit une bibliothèque de composants Storybook, un environnement de développement Webpack que nous avons utilisés dans le projet de refonte du site ensosp.fr.
Nous avons choisi de nous limiter à l'utilisation d'un type de contenu unique, réparti dans les différentes sections du site par une taxonomie et enrichi par l'utilisation de 14 paragraphes (module paragraphs).
Nous avons en outre connecté le site au DAM (Digital Assets Management) de l'ENSOSP - https://www.ephoto.fr. Si nous avons développé un petit module sur-mesure pour assurer la connexion au compte ephoto et aux albums de l'ENSOSP, nous avons aussi utilisé :
- Le module Ephoto Dam Addon qui permet d'importer des images, vidéos ou documents directement dans le site Drupal, au bon format - y compris dans le CKeditor des champs ;
- Le module Video Embed Field ePhoto qui permet d'importer et afficher une vidéo directement sur le site Drupal en appliquant un simple lien.
Le site est en production depuis 07/10/2021. Après avoir dispensé une formation à l'attention des développeurs de l'ENSOSP, nous assurons désormais la maintenance préventive, corrective et évolutive du site.
URL : https://www.ensosp.fr/
Date de mise en production : 07/10/2021.
Le témoignage de Silvère Chieusse, DSI de l'ENSOSP
"Je remercie tous les intervenants de Bluedrop pour leur investissement dans la refonte de notre site web institutionnel. Professionnalisme, capacité d’écoute, compétences techniques, adaptabilité, un parfait cocktail pour faire face aux nombreuses problématiques et pour réussir ce type de projet."
