Réalisations / Paris Styleguide
Paris Styleguide
Création d'un design system
La Ville de Paris agit énormément pour la modernisation et la digitalisation de ses services publics. Chaque année, des services qui étaient hier encore accessibles que par papier ou par rendez-vous en mairie d'arrondissement sont restructurés et rendus accessibles par internet.
Aujourd'hui, la Ville de Paris compte à son actif pas moins d'une centaine de services numériques permettant d'effectuer ses démarches administratives depuis son canapé.
Voir le prototype
Gagner en cohérence et en efficacité grâce à un support de travail flexible et centralisé
Objectifs
Après avoir développé une dizaine de services numériques, j’ai pu observer différentes problématiques récurrentes qui impactaient mon travail et celui de mes collègues.
Les deux points noirs étaient : la perte de temps et le manque d’homogénéité, tant visuelle qu'ergonomique.
J’ai donc initié la conception d'un système de conception (design system) dont les objectifs étaient :
- Adapter au numérique la nouvelle charte graphique pensée initialement pour le print
- Déployer massivement la charte graphique de la Ville et gérer les évolutions graphiques
- Harmoniser la mise en page et l'ergonomie de l'ensemble des services numériques
- Gagner en efficacité et en qualité UX en réduisant la charge de travail en phase de prototypage
Proposition de solution
L'objectif principal étant de centraliser toutes les informations et outils permettant de garantir un design de qualité, Paris Styleguide donne accès à :
- La charte graphique digitale
- Une bibliothèque de composants
- Une bibliothèque d'exemples de pages principales
01
Une charte graphique évolutive
Une charte peut être amenée à changer tous les 5 ou 10 ans mais, remettre à la charte des dizaines de sites à chaque modification coûte cher et demande du temps, que l'on n'a pas...
Paris Styleguide a donc pour vocation de permettre une grande flexibilité en standardisant le code source des services numériques de la Ville de Paris. Ainsi, si l'on change les caractéristiques d'un composant, cette modification s'appliquera partout où il apparait.
Modification du titre de niveau 1 sur le logiciel de prototypage Adobe XD
Commentaires sur le prototype en ligne
02
Un support de travail collaboratif
Le design de system de la Ville de Paris étant évolutif, il sert de support de discussion et de réflexion.
L'objectif est que tout un chacun puisse donner son avis et rapporter ses observations afin de faire évoluer ce guide de conception.
03
Un allié pour les équipes techniques
Conçu avec le logiciel de prototypage Adobe XD, Paris Styleguide permet aux équipes de travailler plus vite.
Le prototype en ligne donne accès à des spécifications techniques qui aident les développeurs à identifier rapidement les différentes composantes d'un élément, et ce, déjà formulé sous forme de code CSS.
Commentaires sur le prototype en ligne
Utilisation d'un composant dans un prototype
Le fichier source du prototype est un document très riche pour les designers qui donne accès à une multitude de composants déjà dessinés.
Le designer n'a plus qu'à copier-coller un composant et l'adapter pour le prototype sur lequel il travaille.
04
Un guide de conception détaillé
La majorité des services numériques de la Ville de Paris sont des formulaires et utilisent donc le même type de composant.
Jusqu'ici, il n'était pas rare de "réinventer l'eau chaude" au cours des ateliers de création car nous n'avions pas forcément conscience qu'une fonctionnalité similaire avait été conçue dans un autre service quelques années plus tôt.
La centralisation de ces composants permet de définir une fois pour toutes quel élément utiliser à quel moment, bien qu'il pourra toujours être modifié. Chaque composant est présenté dans une page détaillée qui explique sa composition, ses comportements, ses déclinaisons et ses règles d'usage.
Page de détail du composant "Case à cocher"
