100%
Conformité WCAG AA.
Standardisation des contrastes, états interactifs et typographies sur l'ensemble des composants.
-60%*
DE temps passé sur la conception des futures conceptions.
Grâce au système de composants modulaires et à l'unification des Design Tokens sur Figma..
x2 ~ x3*
Vitesse de prototypage
Capacité à passer de l'idée au prototype interactif en quelques heures au lieu de plusieurs jours.
*Les métriques ont été mesurées dans un cadre de test utilisateurs quantitatif faible et font aussi office d'attentes et d'objectifs qui devraient être atteints.
Cadre du projet
Le défi
ACCESS Evolution devait déployer plusieurs produits (PWA + encapsulation pour les stores, sites web, …) pour poursuivre son évolution. Sans cadre design structuré, le risque était de créer une dette technique et conceptuelle massive, incohérences UI/UX, identités, …
Réalisé en autonomie complète, ce projet est né de ma propre initiative. Face aux ambitions de la start-up, j'ai identifié les risques majeurs de dispersion et de future dette technique auxquels pouvait s'exposer ACCESS Evolution. J'ai donc formulé une proposition à la direction en démontrant le ROI direct de concevoir une solution (un Design Système) permettant de gagner du temps sur les futures productions. Une fois la vision validée, j'ai pu procéder à la conception intégrale de la solution.
La solution
La création de zéro d'un design système complet et accessible (WCAG AA) sur Figma permis de poser des fondations solides et pérennes pour la suite des développements.L'architecture pensée pour s'approcher au plus près du développement front-end grâce à une conception atomique (atomic design) garantie une cohérence totale et un gain de temps immédiat sur les futures conceptions.
L'impacte chiffré
- ✦- 60% de temps passé sur la conception des nouvelles maquettes.
- ✦100% de conformité aux normes (WCAG AA) W3C.
- ✦0 style bricolé, une dette technique maîtrisée dès le départ.
Apperçu du rendu & composants clés
Variables et tokens
↑ Ci-dessus : extrait des variables et tokens du design système.
Anatomie des composants, états et fonctionnement
↑ Ci-dessus : Animation représentant la construction des composants de manière atomique en partant des primitives jusqu'aux organismes.
↑ Ci-dessus : composant champ de saisi selon les différents états (défaut, édition, erreur, succès, focus).
↑ Ci-dessus : master composant boutons avec les différents états, styles, tailles, …
↑ Ci-dessus : anatomie d'un bouton entièrement paramétrable (style, état, taille, label, édition du label, icône gauche et/ou droite et édition respective).
Pour aller plus loin
Les objectifs prioritaires
- ✦Cohérence UI/UX totale : aligner l'ensemble des points de contact pour offrir une expérience fluide, familière et sans friction utilisateur.
- ✦Inclusion & standards web :intégrer nativement l'accessibilité (WCAG AA) et respecter les normes W3C pour une intégration technique irréprochable.
- ✦Agilité & scalabilité : anticiper le responsive (Desktop, Tablette, Mobile) et supprimer la dette technique en éliminant les styles crées au coup par coup.
Structuration des tokens et Atomic Design
↑ Ci-dessus : motion de présentation de l'organisation interne des pages du projet. "Ready", "WIP" statuts sont présents pour conserver une vision globale de l'avancée du projet.
Pour construire cette grande librairie, j'ai adopté une approche rigoureuse alignée sur les standards du développement front-end modernes.
Pour ce faire, j'ai mis en place et structuré un système de variables de base (primitives) pour centraliser la gouvernance du système et faciliter les futures mises à jour globales en "un clic".
La librairie de composant a été structurée de façon atomique et par niveau de complexité :
- ✦Atomes : radios, checkboxes, icônes, champs de texte, badges, …
- ✦Molécules : barres de recherche, boutons, cartes simples, groupes d'inputs, …
- ✦Organismes : navbars, footers, modales complexes, …
- ✦Templates et pages : mises en page type prêtes à l'emploi.
Retour d'expérience et apprentissages
Apport en compétences
Concevoir ce premier Design Système de A à Z en Figma "vanilla" a été une étape clé dans ma montée en compétences :
- ✦Maîtrise de la logique brute : m'appuyer uniquement sur les fonctionnalité natives de Figma (et quelques rares plugins ciblés) plutôt que sur des outils automatisés clés en main m'a forcé à comprendre les fondations solides d'un système.
- ✦Compréhension de l'architecture de variable : j'ai assimilé la logique syntaxique et la hiérarchie stricte des primitives vers les tokens, indispensable pour créer un système maintenable dans le temps.
- ✦Prise de conscience de l'écosystème : ce projet m'a permis de mesurer la frontière entre le design et le code, et d'identifier la nécessité d'outils avancés comme Stroybook ou Tokens studio pour pousser encore plus loin la synchronisation avec les développeurs sur de futurs projets.
↑ Ci-dessus : capture d'écran de la page "Molécules" et de son listing d'items avec leurs statuts de progression respectifs.
Autres projets pouvant vous intéresser
Ce projet vous inspire ?
Chaque produit a ses contraintes propres. Discutons de vos enjeux actuels pour voir comment appliquer cette même méthodologie à votre produit.