Contexte
Avec les nouveaux objectifs stratégiques fixés par la direction, la FHNW s’est retrouvée confrontée à une question fondamentale : comment développer une présence numérique de cette envergure de manière à attirer de manière ciblée les étudiants et les personnes intéressées par la formation continue, tout en leur facilitant l’orientation au sein de l’offre ?
La plateforme existante n'était plus en mesure de répondre aux nouvelles exigences stratégiques. Une « expertise » réalisée par Raptus a confirmé l'ampleur des mesures à prendre, allant de l'architecture de l'information et de la structure des données à l'environnement fragmenté de la plateforme, caractérisé par divers sous-domaines et interfaces.
Étape 1 : Conseil et sélection d'un prestataire
Le mandat de conseil a marqué le coup d'envoi du projet. Il comprenait l'analyse par des experts du site web existant, des ateliers ainsi que l'élaboration conjointe du modèle de projet avec la FHNW. Des bases décisionnelles ont été établies pour certains domaines spécifiques. Des échanges réguliers ont eu lieu avec les décideurs de la FHNW sur les questions en suspens.
Pour la conception UX et UI de certains domaines spécifiques, Raptus a aidé la FHNW à définir les critères d'évaluation et a apporté son propre point de vue en tant qu'agence.
Voici ce que nous avons pu apporter
- Analyse par des experts du site web actuel
- Ateliers et élaboration du modèle de projet
- Éléments de décision pour chaque domaine particulier
- Échange régulier avec les décideurs de la FHNW
- Participation à l'élaboration des critères d'évaluation pour la sélection des prestataires
Étape 2 : Concept UX pour l'accès aux offres
La FHNW propose plus de 10 000 offres (filières d'études, formations continues, cours, événements). L'ancien système les présentait selon une structure à plusieurs niveaux profondément imbriqués et une logique axée sur les hautes écoles. Il était donc difficile pour les groupes cibles d'avoir une vue d'ensemble de l'offre.
Raptus a repensé de fond en comble l'accès à ses offres : une approche fondée sur les données, méthodique et élaborée au fil de plusieurs itérations avec de véritables utilisateurs. Les nombreuses niveaux hiérarchiques ont été remplacés par un catalogue plat, qui s'utilise comme un système de commerce électronique, avec des filtres multidimensionnels et un accès par thème.
Les structures de données d'abord
Les systèmes numériques modernes ne sont évolutifs que si les données sont structurées. L'une des premières étapes a donc consisté à analyser les données existantes et à définir un nouveau schéma de données, en collaboration avec l'équipe de projet de la FHNW. C'est sur cette base que reposent aujourd'hui le backend du CMS, les modèles, les filtres et le LLMO. Elle permet en outre une utilisation multiple des données, par exemple pour un assistant IA ou des plateformes externes.
Notre contribution à ce stade
- Analyse et redéfinition du schéma de données
- Spécifications des cas d'utilisation basées sur les données utilisateur et les personas
- Tri de cartes et prototypes itératifs sous forme de wireframes
- Catalogue d'offres simple et intuitif, de type e-commerce
- Filtres multidimensionnels et accès par thème
- Base de données pour les CMS, les filtres, les robots d'indexation LLM et les applications d'IA
Étape 3 : Conception de l'interface utilisateur et système de conception
Un nouveau système visuel a été développé en s'appuyant sur l'identité visuelle existante de la FHNW. La marge de manœuvre dont nous disposions a permis une interprétation moderne du design suisse. Ce système se caractérise par la sobriété, une typographie précise et des hiérarchies rigoureuses. Les phases ultérieures élargiront le système avec des animations d'interface utilisateur, actuellement en cours de développement. L'accessibilité a été prise en compte dès le départ.
Pour y parvenir, nous avons mené des entretiens et organisé des ateliers avec chaque établissement d'enseignement supérieur. Des moodboards et des premières ébauches ont permis de cerner rapidement les styles. Une fois le style choisi, celui-ci a été défini par écrit, développé dans des projets plus détaillés, puis validé avec la FHNW.
Cela a donné naissance à un système de design dans Figma, conçu selon la méthode Atomic Design.
C'est là que Raptus est entré en scène
- Système visuel s'inspirant de l'identité visuelle existante
- Entretiens et ateliers avec les différentes universités
- Tableaux d'inspiration et ébauches de styles
- Définition et élaboration du style choisi
- Système de conception complet dans Figma, basé sur l'Atomic Design
- Prise en compte systématique de l'accessibilité
Étape 4 : Mise en œuvre technique dans le CMS Plone
Le site web fonctionne sous le CMS open source Plone, qui assure la gestion de contenu de la FHNW depuis de nombreuses années. L'objectif de cette refonte était de créer une interface techniquement robuste entre le nouveau système de design et Plone, afin de permettre une gestion flexible des contenus tout en garantissant une présentation cohérente.
Ce système de conception a été développé sous la forme d'une bibliothèque de composants React et est documenté dans Storybook. Plone intègre directement ces composants et les met en œuvre de manière flexible via un générateur de pages. Les rédacteurs peuvent ainsi créer des pages de manière autonome, et le résultat est immédiatement visible grâce à l'aperçu en direct.
L'interface utilisateur Volto, basée sur React, a été utilisée ; elle constitue l'interface standard du CMS depuis Plone 6. Une refonte a été nécessaire pour l'intégrer de manière transparente à la bibliothèque de composants. Les composants sont gérés de manière centralisée : les modifications sont effectuées en un seul endroit et s'appliquent partout où ils sont utilisés.
Du catalogue de produits à la recherche en passant par la logique de filtrage, toutes les fonctionnalités du concept UX ont été entièrement mises en œuvre. Cela n'a été possible que grâce à une étroite collaboration avec l'équipe de développement interne Kreis Web, qui a activement participé à ce projet.
Ce que Raptus a accompli
- Passerelle entre le système de conception et le CMS Plone
- Bibliothèque de composants React avec documentation Storybook
- Éditeur de pages avec aperçu en direct pour la rédaction
- Intégration et refonte de l'interface Volto
- Mise en place du catalogue de produits, de la logique de filtrage et des fonctionnalités/modèles généraux du CMS
- Développement conjoint avec l'équipe interne de Kreis Web
