Construire un design system à partir d'une landing page existante, avec l'IA en support
Client
Construire un design system - Projet fictif
Année
2026
Beaucoup de sites vitrines évoluent au fil du temps sans jamais formaliser leur propre cohérence visuelle : chaque nouvelle page ou fonctionnalité est ajoutée un peu au cas par cas, sans référentiel commun. Sur ce projet fictif de studio de yoga en ligne, l'idée était de créer une landing page from scratch et en extraire un véritable design system.
Le problème business
Sans design system, chaque nouvelle page coûte plus cher à produire et risque d'introduire des incohérences visuelles qui fragilisent la confiance de l'utilisateur, un vrai frein quand l'objectif est de convaincre un visiteur de réserver et de payer un cours en ligne. La landing page devait remplir plusieurs fonctions à la fois : présenter les services, rassurer sur la crédibilité du studio, mettre en avant des offres spéciales, et surtout convertir la visite en réservation.
Ce que j'ai mis en place
Analyse de la landing page pour en extraire les valeurs réellement utilisées : couleurs, typographies, espacements
Construction d'un design system fidèle à ces mesures : tokens, styles et composants réutilisables, plutôt qu'un système théorique déconnecté de l'existant
Conception des blocs clés de conversion : réservation de cours en ligne, réassurance ("pourquoi nous choisir", preuve sociale avec plus de 500 personnes convaincues), présentation des services, mise en avant des offres spéciales
Intégration de Claude dans le workflow de conception, en complément de Figma, pour accélérer l'exploration de variantes et la structuration des composants
Le résultat
Une landing page cohérente, appuyée sur un design system directement réutilisable pour de futures pages, et une structure de conversion pensée autour de la réassurance : montrer que d'autres ont déjà fait confiance, avant de demander à l'utilisateur de réserver et de payer.
