Design system

Depuis plus de 8 ans, Vibration Design crée des produits digitaux haut de gamme sur toutes les plateformes et tous les appareils electronique pour ses clients du monde entier. Cependant, le studio s'est retrouvée dans une situation où elle produisait beaucoup de créations, mais avec peu d'optimisation dans le processus de conception pour chaque nouveau client. Le studio réinventait la roue à chaque nouveau client. Deplus, le nombre croissant de clients a poussé Vibration à se remettre en question sur gestion des nouveaux projets afin de ne pas gaspiller du temps sur des tâches à faible valeur. L'objectif était de rester productif et réactif tout en maintenant la qualité de conception des produits à chaque nouveau client.

Le système C'est ainsi qu'est née l'idée de Vibration  design system qui permettrait à chaque nouveau client de ne plus réinventer la roue. Ce design system proposerait des produits personnalisés qui répondent aux exigences spécifiques de chaque client, le tout à partir d'un seul et même système de conception. C'est ainsi que j'ai conçu le premier design system multi-produits haut de gamme, nommé Vibration. Ce système permet de concevoir n'importe quel produit sur n'importe quelle plateforme. Pourquoi "Vibration" ? Parce que la vibration est invisible (Marque blanche), elle transcende les barrières les physiques (Multi-plateformes) et on peut ressentir la même sensation n’importout où ou l'on se trouve (cohérence). L'idée avec le design system Vibration est de pouvoir créer des produits haut de gamme de manière plus rapide, tout en maintenant un niveau d'exigence et de détails avancés, comme un artisanat de qualité mis l’échelle. Nous avons créé trois sites utilisant le même design system, mais avec des marques, des plateformes et des appareils différents. Ces sites partagent les mêmes composants (Marque blanche), mais chacun possède un contenu, des objectifs, une image de marque et une architecture uniques. Vous ne trouverez pas d'application Vibration sur une plateforme spécifique, mais vous trouverez plus multitudes de produits digitaux haut de gamme créés par le design system Vibration.

Le problème Le système de conception Vibration vient répondre à un problème très simple : Supprimer les problèmes de code et design, supprimer les frictions de conception et augmenter la cohérence. Seulement sans système cela peu prendre beaucoup de temps dans la maintenance des produits pour tous les clients, ce qui a un impact significatif sur la rentabilité.

Le defi Créer un grand produit adapté à une multitude de marques, de type de projet et de plateformes peut prendre des années avant qu'un système de conception soit pleinement mis en œuvre et efficace. Résoudre les problèmes un à la fois à été avec l’équipe notre approche afin de ne pas s’éparpiller sur la montagne de travail à remettre en ordre. Nous avons convenons d'un petit objectif réalisable et validions les solutions par l'expérimentation avant l’implementation.

Le départ Nos objectifs principaux ont été de simplifier les choses :

Grâce aux outils et fonctionnalité de Figma, le système vibration peut modifier presque n'importe quelle chaîne de texte et image sur n’importe quel produit, l'espacement s'adapte en fonction du nombre de caractères grâce au contenu dynamique. Il offre également la possibilité de définir le contenu et de donner une certaine liberté au client tout en maintenant la cohérence visuelle de son produit.

Design ≠ Code Une fois la nouvelle bibliothèque de fondations et composants terminée, celle-ci nous a permis d'analyser le gap entre la conception et le code. Nous avons constaté de grandes incohérences à chaque niveau de l'interface utilisateur, allant des modèles aux composants, en passant par les propriétés fondamentales telles que la taille, la couleur et l'espacement.

L’ annalyse Nous avons effectué une annalyse approfondi de chaque composant. Ça été un travail laborieux alors pour gagner du temps, nous avons procédé à une refactorisation de ces composants ( moins de composants mais plus de possibilité dans les variations). Pour cela nous avons réalisé un mapping de l’enssemble de la bibliothèque et nous avons regroupé enssemble des composants en créant des micro-systèmes autonomes et flexibles.

La création Pour rendre le design system à la fois stable et flexible, nous avons dû concevoir et coder des bases cores solides et adaptatif selon les contraintes de tous nos produits. Ces fondations ont servis de cadre pour la construction de n’importe quels composants simple ou complexes. Après le travail de création et d’organisation et de remise à niveau, le résultat à permis de mettre l’enssemble de nos produits dans un seul et même design system.

Les Tokens Le but final de ce system est de permettre la customisation globale pour chaque nouveau client. Nous avons alors défini les principes génériques qui sous-tendent nos produits sous forme de tokens et variables. Ces tokens sont des propriétés fondamentales qui donnent aux composants du système une apparence ou un comportement spécifique. Exemple : la disposition, les couleurs, la forme, les interactions, l'espacement, les styles de texte, les icônes, les radius, les ombres, les ratios d'image et bien plus encore... Les tokens et variable doivent avoir une sémantique très bien structuré pour aller chercher la personnalisation à la fois globale et mais aussi chirurgicale.

Le noyau Nous sommes partis pour le test du design system avec un noyau stable et qui parle le même langage (design = code), rendant ainsi la création de composants et de produits plus fluide et amméliore la communication dans le processus de conception. Nous avons ensuite conçu des micro-produits pour tester la stabilité du système dans son enssemble ainsi que la personnalisation à l'aide de ces tokens. Le but était de tester à grande echelle pour voir les micros bugs que l’ont ne pourrait pas percevoir dans un processus normal. C’est très important que les fondations doivent être solides car elles constituent le noyau sur lequel reposent l'ensemble des interfaces créées par le studio.

La marque blanche Les paramètres d'une identité de marque semblent simples à changer de prime abord (couleurs, typographies, textes, icônes, etc.), mais lorsqu'il s'agit de lancer une nouvelle marque sur un nouveau produit, il est essentiel de bien faire les choses. Toute personne créant des identités de marque le sait : changer de style d'un produit à un autre n'est pas aussi facile que l'on pourrait le penser. Il y a de nombreuses variations d'une marque à l'autre et de nombreux cas de marque ne sont pas standards (surtout pour des marque premiums) C'est pourquoi, sans un système de design, certains produits nécessitent un temps considérable pour effectuer les changements manuellement. Pour être le plus efficace possible, il faut pouvoir modifier les paramètres de manière chirurgicale afin de ne pas compromettre l'identité et avoir des glitchs visuels. J'ai dû tester plus d'une cinquantaine de scénarios possibles afin de mieux comprendre le type de tokens à utiliser et à appliquer pour que chaque nouvelle marque sur un nouveau produit s'affiche grâce au design system comme par magie. Après avoir créé l'ensemble des tokens, stabilisé et testé tous les scénarios possible lancer un produit digital pour un nouveau client peut être conçu simplement en utilisant les tokens via l'API.

L’organisation Le design system est sur Figma. J'ai également créé des bibliothèques pour délier les styles des composants du design system, mais aussi du système du nouveau client. Cela permet de modifier n'importe quel style dans l'interface utilisateur finale de manière prévisible et sans affecter les composants principaux. Si quelque chose change sur un composant principal, nous pouvons facilement mettre à jour l'interface utilisateur finale en un clic.

Le Résultat Cela a rendu le processus 10 fois plus rapide, passant de 3 mois à seulement 1 mois pour créer un nouveau produit avec une nouvelle identité d'une qualité professionnelle et haut de gamme. En utilisant les bibliothèques, Api et les plugins sur Figma, nous pouvons intégrer les styles d'une nouvelle marque dans le système en environ 15 minutes et modifier n'importe quel nouveau produit avec ses styles en moins de 30 secondes. C'est 800 % plus rapide qu'auparavant et permet de gagner environ 30 heures par semaine.

Vibration Design system ⟶ Vibration Design system showcase ⟶

Delivered Solutions Design system

Client Vibration

Sector Professionnal service

Type WEB 2 WEB3 AI

Discipline Design System

Collaborators Savee.it, Imagery

Projets fictifs à titre d’exemple.

Brand Identity