Création du Design System de la Région Occitanie / Pyrénées-Méditerranée.

Suite au travail de refonte graphique que nous avons entrepris pour le portail de la Région Occitanie, nous avons poursuivi notre collaboration en créant un des premiers Design System à l’échelle d’une région. L’objectif de la mission était d’initialiser une première version comprenant la définition de la structure et un premier UI kit avec sa documentation associée.

Objectif

Comment concevoir un Design System sur un écosystème de 40 sites ayant chacun leur propre identité ?

L'approche Yumans

Un Design System sur mesure à l'échelle d'une région

Une unité sans uniformisation

Un suivi hebdomadaire des avancées

Des sessions d'évangélisation à la démarche

Réaliser un inventaire complet de l'écosystème

Tout Design System commence par un inventaire. Il doit se penser et se structurer à l’échelle des besoins de l’entreprise, son organisation et des processus internes. Pour créer le Design System de la Région Occitanie, nous avons donc passé en revue les spécificités de 40 sites de l’écosystème. Nous avons pour chacun créé une fiche d’identité reprenant le nom de l’éditeur, la typologie, la cible, la thématique, la technologie front-end utilisée et bien évidement les composants et modules principaux (header, footer, bloc de contenu, bloc de carte, formulaire…).

inventaire La Région
Matrice Composants Design System La Région

Structurer et définir le Design System

L’inventaire nous a permis de créer des regroupements de besoin par typologie de site. De cette manière, nous avons pu déterminer 3 groupes de sites qui devront appliquer différents niveaux du Design System. Pour simplifier la démarche nous avons conçu un arbre décisionnel (4 à 5 questions) permettant de savoir sur quel niveau le site devra se positionner. L’inventaire a aussi permis de lister les composants et modules prioritaires. De cette manière, nous avons pu identifier le périmètre de la version 1. L’ambition était de pouvoir rapidement présenter un Design System à une échelle réduite pour convaincre de la démarche en interne. Ce dernier continuera d’évoluer au fil des ans.

Créer et tester les nouveaux composants graphiques

Une fois le périmètre de la V.1 défini, nous avons identifié 10 sites représentatifs de l’écosystème, qui ont servi de base de travail. Les sites ont été sélectionnés pour leur diversité de typologie (site d’actualité, immersif, évènementiel…) et de composants. L’objectif était de partir de la direction artistique du portail La Région et d’en extraire des règles de styles et d’utilisation de composants modulaires. Au final, la V.1 du Design System de la Région Occitanie / Pyrénées-Méditerranée comporte 15 composants et 6 modules avec de nombreuses variantes.

UI Kit La Région
Zeroheight Lax Région

Documenter et communiquer en interne

La documentation d’un Design System est primordiale. Elle permet de communiquer l’intérêt de l’approche et les principes de design généraux au plus grand nombre. Elle est également conçue pour rentrer dans le détail des styles graphiques (couleurs, typographies, icônes), de la structure (grille, espacement, navigation), des composants et des modules. Pour la première version du Design System de La Région Occitanie / Pyrénées-Méditerranée , nous avons utilisé la solution de zeroheight. Pour découvrir le site rendez-vous sur : https://www.laregion.fr/design