Prestation

Design system.

Offrez un référentiel graphique et ergonomique à vos collaborateurs !

   

Contactez-nous
Au plus près de vos besoins

Au plus près de vos besoins

La meilleure façon d'assurer la cohérence graphique, fonctionnelle et ergonomique de toutes vos plateformes digitales !

Design System by...

Design System by...

Le Design System by Wexperience est un site web réservé à vos collaborateurs internes et vos partenaires externes (agences par exemple).

Un outil spécialisé et adaptable

Un outil spécialisé et adaptable

Chaque Design System créé par Wexperience est spécialisé et adapté au contraintes techniques de votre environnement de production

Qu’est-ce qu’un Design System concrètement ?

C’est une base de référence UX facile à mettre à jour, et qui permet de conserver de l’homogénéité au fil du temps au sein de vos sites et applications. 

C’est aussi un outil collaboratif et évolutif permettant aux multiples équipes d’une société d’assurer sa maintenance en respectant les règles d’ergonomie définies par la direction digitale et de l’utiliser sans réinventer des éléments fonctionnels déjà existants.   

La solution Design System by Wexperience intègre une arborescence logique et un moteur de recherche puissant (Full text search) pour retrouver facilement et rapidement les éléments dont ont besoin tous les acteurs de votre stratégie marketing.

 

Elle intègre également une gestion des profils qui permet de maîtriser les accès et les droits et permissions associés, ainsi qu’un système d’alerte et de notifications qui permet d’informer les utilisateurs de modifications qui peuvent les concerner, et les amener à mettre à jour simplement et rapidement les interfaces concernées.

Les éléments constituants le Design System

Les éléments constituants le Design System

  • Composants et patterns, en fonction des devices (desktop, mobile, tablettes)
  • Couleurs utilisées et leurs règles d’usage
  • Principes et fonctionnement des différents éléments visuels  (CTA, picto, footer, champ, formulaire…)
  • Comportements des éléments cliquables, loaders…
  • Informations de structuration de l’espace sur le site
  • Éléments de communications (le ton, le type de langage, le son…)…
  • Banque d’images « corporate » si elle existe
Processus d'intégration à votre organisation

Processus d'intégration à votre organisation

Pour créer votre Design System by Wexperience, nous mettons en place un processus en quatre étapes :

  1. Inventaire de l’existant et choix des modules à intégrer dans le Design System. 
  2. Paramétrage du Design System : intégration de votre organisation dans le système (collaborateurs et partenaires avec droits associés), intégration des composants graphiques et code html/CSS.
  3. Mise en ligne et formation des équipes sur l’utilisation du Design System et de son back-office. La mise en place du Design System est un moment important pour les équipes UX et IT, et nécessite un accompagnement humain pour créer de l’adhésion.  
  4. Maintenance et animation du Design System. Certains clients apprécient d’avoir un référent et expert UX externe. Dans ce cas, nous proposons un service Support pour l’animation et l’intégration de nouveaux modules dans le site.
L’Atomic Design : la méthode qui sert à définir le Design System

L’Atomic Design : la méthode qui sert à définir le Design System

L’Atomic Design est une méthodologie permettant de créer le Design System de manière claire et organisée. Cela passe par l’abolition de la notion de page, la conception d’interface dans des environnements non connus via des éléments modulaires et une décomposition des éléments d’interface en atomes, molécules, organismes, modèles et pages.

Nous ne réfléchissons pas à la construction de votre Design System  en terme d’« écrans » ou de « pages » mais en systèmes de composants.

  • Quelles sont les informations présentées ?

    Tous les éléments possèdent une documentation contenant les informations de design, le code associé, des schémas, les spécifications techniques. Ainsi, toutes les parties prenantes ont les informations nécessaires pour modifier les parcours facilement et rapidement.

  • Comment se déroule l'inventaire de l'existant ?

    Nous utilisons pour cela un moteur de crawl développé par Wexperience, qui permet de collecter ces informations de façon automatisée et les injecter dans la solution Airtable, qui permet de structurer l’information, la trier, et l’analyser. Cette collecte peut révéler des variations importantes qui existent au sein de votre site. Un traitement manuel et des prestations de conseil, voire de production graphique peut être requis pour identifier des doublons potentiels, et définir la charte graphique et ergonomique, ainsi que le code HTML/CSS correspondant (et optimisé).

  • As-t-on toujours besoin de faire un inventaire de l'existant ?

    Non ! Dans le cas d’une refonte de site sur laquelle Wexperience intervient (voir processus de refonte), la mise en place du Design System ne nécessite pas de phase d’inventaire, la nouvelle charte graphique et ergonomique est créée par Wexperience. La mise en place du Design System est ainsi  simplifiée, et c’est même le moment idéal pour le mettre en place et faciliter ainsi la maintenance graphique du site.

  • Le Design System intégre-t-il une solution de versionning et de gestion des droits ?

    Le système intègre une solution de versioning et la gestion des droits et permissions permet de déployer les modifications sur les outils utilisés par les intégrateurs (Github ou équivalents).

  • Sur quoi repose le Design System techniquement ?

    Techniquement, la plateforme repose sur un socle technique de type site web, souple et évolutif: 

    • Création de la solution et de la stack techno et de l’environnement agile (Framework Laravel, Bootstrap, Git
    • Mise en place d’un environnement continu (serveurs preprod/prod)

  • Est-ce difficile d'utiliser le Design System ?

    Il n’y a pas de difficultés techniques à utiliser l’outil, mais il faut lui donner du sens pour les contributeurs, et cela passe notamment par des ateliers physiques dans vos locaux, avec les personnes concernées : présentation du système, aborescence du site, accès aux modules, administration…

  • Et concernant l'hébergement du Design System ?

    Même si le système n’est généralement pas critique pour les clients (utilisation principalement interne), et ne suppose pas un hébergement avec continuité de services 24/7, les solutions d’hébergement et de maintenance de la solution sont étudiées pour chaque cas

Encore des questions ?

Besoin de notre expertise pour répondre à vos questions ?

Contactez-nous