Création d’un nouveau Design System pour apporter une cohérence entre les supports web et application et une meilleure accessibilité.
Contexte
A mon arrivée chez epicery, j’ai récupéré les fichiers Figma créés par divers freelances ou agences ayant travaillé ponctuellement en fonction des projets. Il existait aussi une trame de design system mais qui n’avait pas été mis à jour depuis 2 ans.
Problématique
J’ai tout de suite mis en avant la nécessité de recréer un design system afin d’avoir des parcours cohérents et de simplifier mon travail et celui des développeurs. J’ai voulu profiter de cette opportunité pour modifier des éléments afin d’améliorer l’accessibilité pour les utilisateurs.
Cible
Le design system est à destination des équipes internes : designer, développeurs et métiers produisant des éléments visuels à destination des utilisateurs (acquisition, CRM, marketing opérationnel…)
Missions
Recrutement : convaincre la direction et les équipes interne de l’utilité de mettre en place un design system afin de pouvoir recruter un(e) Design System Manager.
Choix des outils : ensuite choisir les outils et piloter la Design System Manager pour faire un audit du design system existant réellement sur le site, puis créer le design system au fur et à mesure des mises à jour de composants sur le site (ex : cartes commerçant et produit sur l’application mobile).
Création du Design System & évangélisation : Après avoir défini les premiers éléments du design system, j’ai présenté son importance en interne, notamment aux développeurs, pour favoriser son adoption dans les projets. Cette démarche a conduit au recrutement d’un front-end developer spécialisé dans la mise en place du design system dans un lookbook.
Documentation : Une fois le design system créé et utilisé, ainsi que la documentation associée sur Zeroheigt, il a fallu en assurer la maintenance au fil des projets afin de le garder à jour.
Focus sur certains éléments
Fichier Figma
Un ficher Figma Design System epicery a été mis en place et maintenu à jour.
Il y a eu une simplification des éléments (réduction du nombre de couleurs, du choix de typographie…) mais aussi un ajustement de certains composants pour être plus accessible. Toutes ces tâches se sont faites en concertation avec la Directrice Artistique afin de conserver l’identité epicery.
Une documentation Zeroheight
Le design system sur Figma sans une documentation associée à chacun des composants n’est pas d’une grande utilité aux non designers.
Il était très important pour moi que chaque composant soit relié à une documentation indiquant précisément les conditions d’utilisation dudit composant.
Cette documentation est aussi chronophage que la création des composants, mais elle permet de partager en interne tous les éléments et de gagner en cohérence sur les différents supports (bannières d’acquisition, campagnes d’emailing…)
