Design SystemAccessibilitéUser TestingLead Design

Design System Societe.com

Créer et implémenter un nouveau design system dans l'ensemble des services et produits de Société.com avec la contribution de toutes les équipes internes afin de valoriser la marque, rendre les produits homogènes, avoir un niveau d'accessibilité correct. Le design system était le point d'entrée pour revoir des parcours business mais aussi l'UX writing.

Design System Societe.com

En bref

Rôle

Lead Design System

Durée

12 mois

Équipe

3 designers, 2 développeurs

Le design manquait de vision et de structuration, avec une dette technique importante et des pratiques UX hétérogènes selon les produits. Ma mission a été de poser un cadre commun, d'aligner les équipes autour de principes partagés et de faire progresser la maturité design de l'organisation.

J'ai commencé par un audit UX transverse afin d'objectiver l'existant : parcours utilisateurs, cohérence des interfaces, respect des fondamentaux UX et identification des frictions majeures. Cette étape a permis de formaliser des règles et standards UX jusqu'alors peu ou pas explicités.

Au-delà des quick wins identifiés, l'enjeu principal était d'initier une dynamique collective autour de l'amélioration des process, du design, de l'UX writing et de la collaboration produit / tech.

J'ai proposé un Design System comme levier pour renforcer la cohérence, améliorer l'UX et inscrire le design dans une démarche durable et accessible. En parallèle, j'ai mené un travail d'acculturation auprès des équipes produit, tech et marketing.

Problématique

Comment aligner des équipes aux pratiques hétérogènes autour d'une vision design commune, tout en structurant des process durables capables de soutenir la montée en maturité produit et technique ?

Mon rôle

  • Défini la vision et les objectifs du Design System pour structurer les interfaces et améliorer la cohérence produit
  • Conçu et structuré l'ensemble du Design System (composants, règles d'usage, accessibilité) avec l'appui de trois designers
  • Accompagné l'équipe design dans la conception et la documentation des composants
  • Acculturation des équipes au Design System et aux pratiques design
  • Favorisé la collaboration entre designers et développeurs autour d'un langage commun
  • Introduit les tests utilisateurs afin de valider certaines évolutions du système
  • Accompagné les équipes produit dans l'adoption progressive du Design System

Cadrage

Audit UX

Il avait pour but d'évaluer la qualité globale des interfaces et d'identifier des leviers concrets d'amélioration. En m'appuyant sur les lois UX, les standards d'accessibilité (WCAG), l'analyse concurrentielle et la performance (Lighthouse), j'ai mis en lumière les incohérences et les opportunités d'optimisation. Les échanges menés en parallèle avec les équipes ont permis d'aligner les constats et de poser les bases de standards design partagés, préfigurant la mise en place d'un Design System.
Audit UX

Roadmap & priorisation

À court terme, la page Offre a servi de premier terrain de test pour l'implémentation des composants de base du Design System (boutons, typographie, couleurs conformes WCAG). À moyen terme, l'objectif était de valider l'usage du Design System sur un projet à fort impact et de clarifier les règles entre création de composants et personnalisation. À long terme, cette démarche visait à installer un Design System design et technique partagé, intégrant un UX writing et un ton de voix cohérents et propres à Societe.com.
Roadmap & priorisation

Test & Learn

Test utilisateur des offres

Cette phase a permis d'introduire les tests utilisateurs afin d'évaluer la perception du nouveau design en cours d'élaboration. Les retours ont été mitigés : typographie jugée trop petite — conservée initialement pour limiter l'impact sur l'existant — et design perçu comme trop daté. Le choix d'un rendu très monocouleur répondait néanmoins à une stratégie de transition, en préparation d'un futur système de couleurs par type de données (fichiers, dirigeants, sociétés). Suite aux retours et aux critères d'accessibilité, certains éléments ont été modifiés ou supprimés afin d'améliorer la lisibilité, la compréhension et l'expérience globale.
Test utilisateur des offres
AprèsAvant
AvantAprès

Verbatims utilisateurs

Les tests menés sur d'autres projets ont servi à recueillir des verbatims utilisateurs afin de vérifier que le Design System répondait aux attentes des utilisateurs et reflétait l'image produit souhaitée.
« La page est bien structurée, plus claire. »
« Les couleurs sont agréables et c'est aéré. »
« Je trouve que ça change, c'est plus agréable à l'oeil. »
« C'est moderne, j'aime bien le nouveau branding. Ça donne confiance et ça fait plus premium. »
« C'est très bleu, ça manque de couleur. »

Déploiement du Design System

Le déploiement du Design System a d'abord reposé sur la création de composants de base conçus côté design, puis intégrés dans la librairie technique dans Tailwind. Chaque nouveau projet devenait ainsi une opportunité de développer et tester ces composants (inputs, notifications, cards, accordéons, badges, switches, steppers, modales, tableaux, tags…), afin qu'ils puissent ensuite être réutilisés facilement dans les projets suivants.

Après la phase de test sur la page Offre, nous avons engagé l'intégration d'éléments structurants comme le header et le footer, afin d'établir une base commune pour la majorité des pages.

En parallèle, les nouveaux produits et fonctionnalités — tunnel de paiement, cartographie, surveillance, Fichier.com, pages société et dirigeant, espace client — ont été conçus directement en 100 % Design System. Le déploiement s'est ainsi construit en fil rouge, sans interrompre les évolutions stratégiques et business des produits.

La Solution

Couleur et typographie

Couleur et typographie

Exemple de composants

Exemple de composants

Header et boutons

Header et boutons

Exemple de pages 100% design system

Exemple de pages 100% design system

Résultat

Le Design System est devenu un socle commun pour aligner design, développement et produit. Il a facilité la collaboration, clarifié les décisions et renforcé la cohérence des interfaces. Progressivement adopté par les équipes, il a été un levier pour concevoir plus efficacement et avec plus de qualité.

+5%

amélioration du taux de conversion

+100

composants créés dans le design system

+70%

de temps gagné à la conception