A look back at the UX/UI design, development, and launch of the new ENSOSP website: A simple and effective project that allowed us to improve our frontend development process with Emulsify and Storybook...
ENSOSP
A part of French civil security, Ensosp trains all professional and volunteer fire officer cadets in management, operational command, and crisis management. On average, 6,000 fire brigade officers are trained there each year. The National School also organizes simulation workshops in fire and rescue, and crisis management for elected officials, civil servants, company executives, and French and foreign experts.
It has a unique teaching structure, notably comprised of a site equipped with the logistics equivalent of seven fire stations, allowing the recreation of multiple intervention scenarios in urban and road environments. The National School allows officers to train on many specialized simulators: chemical and radiological accidents, pre-hospital emergencies, urban fires, investigation of fire causes and circumstances, hydrogen risks, and more.
As a showcase for the French civil security model, the National School welcomes each year officers from all over the world to learn French methods of command and crisis management (Spain, Morocco, Tunisia, Benin, Ivory Coast, Lebanon, Algeria, and soon Taiwan, Russia, Turkey, etc.)
The Project
The École Nationale Supérieure des Officiers Sapeurs Pompiers (ENSOSP) contacted the agency bluedrop.fr at the end of 2020 to manage the redesign of its website, which was then running on Drupal 7. The project scope involved:
- Drafting detailed functional specifications (in workshops with the ENSOSP team);
- User experience (UX) design;
- User interface (UI) design;
- Development using Drupal 9;
- SEO optimization;
- Compliance with accessibility standards;
- Training for the site’s contributors and administrators;
- Providing a deployment procedure for the ENSOSP’s IT department;
- Maintenance after launch.
The project did not include recovery of content from the previous site.
UX and UI Design
The design, achieved in collaboration with the ENSOSP project team, focused on simplifying user journeys during the UX phase (workshops confronting personae, constructing user journeys, and designing wireframes).
It then set out to modernize the school’s graphics charter and image, making it more dynamic and current. The goal was to propose a technically robust and durable site, especially in terms of image.
Development with Drupal 9, the Emulsify Theme
The site is powered by Drupal 9 and does not feature any “exotic” functionalities. This is a typical case of a corporate site, whose goal is to inform and direct visitors to the school’s various digital tools. The chosen theme is classic, effective, and free of flashy animations. It is based on Emulsify, which offers a contributed theme that makes integration in an “atomic” approach easier, with reusable components and clear guidelines for teams. Emulsify provides a Storybook component library, a Webpack development environment that we used in the redesign project for ensosp.fr.
We chose to limit ourselves to using a single content type, spread across the different sections of the site through taxonomy and enriched by using 14 paragraphs (paragraphs module).
We also connected the site to ENSOSP’s DAM (Digital Assets Management) - https://www.ephoto.fr. While we developed a small custom module to connect to the Ephoto account and ENSOSP albums, we also used:
- The Ephoto Dam Addon module, which allows importing images, videos, or documents directly into the Drupal site, in the correct format - including in field CKeditor;
- The Video Embed Field ePhoto module, which lets you import and display a video directly on the Drupal site by simply applying a link.
The site has been live since 10/07/2021. After providing training for ENSOSP developers, we are now providing preventive, corrective, and evolving maintenance for the site.
URL: https://www.ensosp.fr/
Go-live date: 10/07/2021.
Testimonial from Silvère Chieusse, ENSOSP IT Director
"I would like to thank everyone at Bluedrop for their dedication to the overhaul of our institutional website. Professionalism, listening skills, technical competence, adaptability—a perfect combination to address the many challenges and successfully complete this type of project."
Higher School for Fire Brigade Officers
For more information, you can consult our case study on the subject.
