Mise en place d'un Design System

Client

Leader des portails immobiliers

Au sein d’un groupe spécialisé dans la diffusion d’annonces immobilières sur internet et dans la presse spécialisée qui, depuis plus de 25 ans, met toute son expertise au service des Français afin qu’ils concrétisent leur projet immobilier.

Enjeux

Le client a une forte ambition pour son développement et met au cœur de ses préoccupations l’expérience utilisateur qui doit être personnalisable, adaptée aux besoins de chacun. Afin de gagner en temps de déploiement et en image de marque, il a souhaité se doter d’un Design System. Il a choisi Sapiens comme partenaire pour l’accompagnement dans la mise en place de son projet.

Solution

Sapiens a apporté son expertise pour mener la direction visuelle et technique de la conception, du style visuel et de l’outillage technique du Design System, en étroite collaborations avec les directeurs des équipes de conception et de développement des produits.

Pendant 20 mois, en tant que Design System Lead, Sapiens a déployé le projet au travers de 5 étapes :

  • identification des parties prenantes : définition du modèle de gouvernance de l’équipe DS, Création de l’équipe, constitution d’une communauté de designers et de développeurs
  • formalisation des principes : création des process et contributions du DS (mise en place d’un Quick Component Test, Scorecard …)
  • conception de l’outil : migration de sketch vers figma, création des process de recette QA, mise en place d’un DS Log, mise en place d’un nouveau Naming des composants pour Figma et Storybook, création d’un DS issue Tracker dans Jira, Création du DS checklist pour visualiser le statut de chaque composant, mise en place d’un DS system Updates, création d’un plugin figma lint,
  • constitution du référentiel : examiner les documents de la bibliothèque pour vérifier la qualité éditoriale, la cohérence et l’utilité des composants, enrichissement du DS
  • accompagnement : identifier et nourrir la croissance et la culture de l’équipe, identifier les opportunités pour les membres, création d’un onboarding pour les nouveaux designers, création d’un DS playbook pour rappeler les règles d’utilisation, les règles de contributions, de co-création, présentation des changements à la direction, création d’une newsletter interne, animation de 2 channels Slack dédiés, animation des rituels Agile, reporting, KPI.

Le projet a été réalise en mode Agile Scrum.

Résultats

Grâce à ce référentiel unique, le client garde une cohérence dans son image. Il renforce l’image de marque et apporte une meilleure cohésion au sein des équipes par un partage des éléments.

Les équipes gagnent du temps grâce à un processus de production efficace ce qui apporte une réduction des coûts de production.

Technologies

MacOS, Sketch, Plant, Abstract, Zeplin, Figma, Zeroheight, Storybook, Jira, Confluence, Notion, Miro, Suite Google.