Département de Loire-Atlantique, refonte des sites orientée accessibilité, Design System et agilité

Dans l’article précédent, nous avons expliqué le projet global de refonte des sites du Département de Loire-Atlantique.

Retrouvez-ici la suite de l’article pour comprendre un peu mieux les axes stratégiques pris en cours de projet. Nous traiterons à la fois des enjeux majeurs d’accessibilité et de Design System qui dessinent cette refonte.

Projet d’envergure : définir son axe stratégique

Initier le projet par le site principal puis décliner les autres sites

Le périmètre technique et fonctionnel étant très large, la cible prioritaire du projet de refonte a été naturellement le site principal du Département. Ce site étant le plus connu et le plus utilisé par les usagers.

La suite des sites refondus à ce jour est :

Renforcer notre accompagnement au sein des équipes client

Pour s’adapter et s’assurer du succès du déploiement projet, l’équipe Digiwin a renforcé sa méthodologie d’accompagnement pour être plus au plus proche du client. Des piliers de la fameuse méthode agile a permis de dessiner la réorientation du projet :

L’agilité dans un tel projet comprend différents aspects. La nouvelle approche consiste à réaliser la refonte des sites en cascade en sollicitant main dans la main les différents acteurs du projet, internes et externes. Dans les faits, le dispositif mis en place est le suivant :

• Mettre les ressources humaines de Digiwin dans les locaux du Département pour plus d’interaction entre les différents acteurs et apporter plus de relationnel et de collaboration dans le projet,
• Réaliser la refonte des sites un par un en commençant par la rédaction des spécificités techniques de chaque site par le Département,
• Refondre un site pas-à-pas avec différents sprints et réajuster au fur et à mesure avec une logique d’itération,
• Réaliser chaque sprint par des phases de conception, développement et validation en passant par différents acteurs pluri-compétents pour s’assurer au passage de la bonne réalisation de chaque étape,
• Profiter de la refonte des sites suivants pour ajuster le Design System et les différents enjeux que composent le projet.

La réalisation du projet devient plus fluide en diminuant les temps morts tout en étant plus interactive et collaborative. D’ailleurs, ce mode de travail renforce l’aspect humain du projet en soudant d’avantage les équipes.

Construire un Design System en respectant les exigences d’accessibilité

Pour décliner les gabarits, optimiser la structuration des contenus et faciliter la contribution de chaque site, Digiwin a envisagé de travailler à la fois sur l’architecture de Jalios et sur le Design System. De plus, le Département de Loire-Atlantique a fait le choix de le rendre accessible publiquement.

Focus sur le Design System

Définition : Le Design System s’apparente à une bibliothèque de composants, visuels et de principes au code réutilisable. Il devient le kit référentiel UX/UI.

Sans oublier que dans le cadre du projet, ce Design System doit répondre à d’autres exigences telles que la conception en Mobile First et l’accessibilité (dans son développement et son rendu visuel final).

L’avantage ? Le contributeur réalise ses contenus sans se soucier de la mise en page : son choix se porte uniquement sur le gabarit de page. Ainsi, à chaque mise à jour du Design System, l’ensemble des gabarits est automatiquement mis à jour.

Quelles sont les étapes de création du Design System dans ce projet ?

• Concevoir des Wireframe pour structurer les pages types et un UI Kit pour la partie webdesign des différents composants,
• Réaliser des pistes graphiques pour définir la Charte Graphique finale. Ici, ces pistes ont été testées et validées par un panel de personnes en situation de handicap (notamment visuel),
• Développer, découper et tester les composants en continu par différents acteurs pluri-disciplinaires.

Focus sur l’accessibilité

Définition : L’accessibilité web désigne l’ensemble des techniques et bonnes pratiques ayant pour objectif de rendre un site ou une application accessible à tous – et en particulier aux personnes « handicapées » au sens large du terme.

Reportez-vous à notre article dédié à l’accessibilité et aux exigences RGAA4 pour en savoir plus.

Les choix effectués par le Département de Loire-Atlantique pour maximiser l’accessibilité :

• Tester les maquettes auprès d’un panel de personnes en situation de handicap (visuel notamment),
• Concevoir une feuille de style dans une logique AAA,
• Sélectionner le framework le plus structuré accessiblement parlant,
• Auditer les différentes parties du Design System à plusieurs reprises au cours du process de conception et de développement,
• Publier en ligne le Design System et le code en open source pour inspirer et aider les autres collectivités à la mise en accessibilité,
• Former les contributeurs à l’accessibilité pour rédiger de façon plus compréhensible pour tous.