Design system de Sciences Po

Nous avons commencé par un atelier de cadrage collaboratif, dont l'objectif était de définir les valeurs de design propres à Sciences Po, à la manière des « 10 principes de design (lien externe) » de Dieter Rams. Ce temps de travail a permis de clarifier les objectifs du design system, d'identifier ses parties prenantes et ses futur·es utilisateur·rices, de recenser les outils et ressources existants (charte graphique, fichier Adobe UX, documents internes), et de formuler des critères de réussite partagés. L'atelier comprenait également une formation introductive sur les design systems : origine, objectifs, bénéfices, limites et conditions de déploiement.

Nous avons ensuite réalisé un inventaire complet des interfaces numériques existantes à Sciences Po. Chaque interface a été étudiée pour repérer les composants existants, leur usage, leur fréquence et leur état. Ce travail a permis de dégager les composants fondamentaux nécessaires à la première version de l'UI Kit (lien externe), et d'avoir une vision globale de l'écosystème numérique.

À partir des résultats de l'inventaire, nous avons construit une première version de l'UI Kit directement sur Figma. Sciences Po ne disposait alors que d'un fichier Adobe UX ancien, peu exploité par les équipes. Ce nouveau kit rassemble les fondamentaux graphiques de l'institution (typographies, couleurs, logotypes, grilles, espacements) et un ensemble de composants adaptés aux besoins récurrents de l'ensemble des interfaces (boutons, en-têtes, cartes, formulaires, pieds de page, etc.).

Ce second atelier a permis de former les équipes à l'usage collaboratif de Figma, puis de présenter l'architecture et les premiers composants de l'UI Kit. Nous avons défini ensemble une méthode de co-construction du design system, fondée sur une gouvernance souple, itérative mais encadrée. Ce temps de travail a aussi permis d'identifier les composants à produire en priorité, et de rédiger une première version de la roadmap, incluant les aspects de documentation, de nommage, d'outillage et de maintenance.

Les composants du kit ont ensuite été utilisés pour concevoir les interfaces numériques à destination des enseignant·es. Cette mise en situation concrète a permis de valider la pertinence du kit, d'optimiser les temps de design et de faciliter les tests utilisateurs. Ce travail a aussi permis à l'équipe en charge de l'UI Kit d'améliorer certains composants en conditions réelles.

La dernière phase de la mission a consisté à produire une documentation complète de l'UI Kit à destination des équipes internes. Cette documentation permet de faciliter l'appropriation du système, en particulier par les développeur·euse·s en charge de son implémentation, mais aussi par les futurs designers amenés à l'enrichir.