Weborama - Product Design IA
Janvier 2025 à avril 2026
Contexte
Weborama lance un nouvel outil SaaS à partir d’explorations menées par les équipes produit (PO) et commerciales (BU), sous forme de prototypes générés par IA via Figma Make.
Mission
À partir de ces explorations, je dois concevoir les parcours utilisateurs, les maquettes et le design system de la nouvelle application SaaS.
Je définis également une approche “IA-ready” pour produire l’ensemble des maquettes via Figma Make, afin d’accélérer l’idéation et de tester des prototypes 100 % fidèles.
Mon intervention
· Analyse et création des parcours utilisateurs,
· Conception des maquettes Figma,
· Création du design system (fondations, composants, variables, modes).
· Mise en place d’un process “IA-ready” pour cadrer l’IA via des guidelines rédigées dans le code.
Cette approche accélère la discovery, aligne les équipes et réduit le temps d’exploration.
Aperçu des résultats
· Parcours utilisateur simplifié et aligné sur les patterns du marché
· Design system respectant les règles d’accessibilité (modes clair et sombre)
· Prototypes IA avec Figma Make
· Idéation IA avec Figma Make
· Revue et validation continues des composants dans Storybook.
Page d'accueil
Créer une audience
UX Design
Début du use case
Exemple de simplification du parcours généré par Figma Make
Pour cet exemple, j’ai modifié le parcours de l’action principale : générer des résultats à partir d’un prompt ou d’un fichier importé.
Le parcours initial comportait trois étapes :
la création d’une audience, le choix de l’input, la saisie du prompt ou l’import du fichier — ce qui ralentissait l’accès au résultat.
Optimisation UX
J’ai simplifié le parcours en une seule étape (un écran), permettant à l’utilisateur de rédiger un prompt ou d’importer un fichier dans un même champ, puis de lancer directement la génération du résultat.
Résultats
· Réduction du nombre d’étapes et simplification du parcours
· Accès plus rapide aux résultats
· Expérience fluide et sans friction.
Maquettes & Design System
2/5
Variables
Je définis les palettes de couleurs, crée les variables associées et deux modes (clair et sombre).
Je structure également les variables de typographie, d’espacement, de bordures et d’élévations, en utilisant une bibliothèque d’icônes.
Composants et variants
Création des composants et de leurs variants selon l’Atomic Design, chaque composant contient donc :
· des tokens de couleur et d’espacement
· des variants
· une compatibilité light / dark mode
Accessibilité
J’intègre l’accessibilité dès la création des fondations, variables (tokens), composants et variants pour garantir des interfaces inclusives.
Templates
Je conçois des templates réutilisables permettant aux équipes de produire des interfaces plus rapidement et de les importer dans Figma Make.
Résultats
Template
Gestion des modes clair et sombre (variables)
Composant button (atomic design)
Process "AI Ready"
3/5
Préparation des maquettes
Avant l’import dans Figma Make, je vérifie les prérequis :
· nommage strict des frames,
· auto-layout parfait,
· gestion des scrolls avec clip content,
· utilisation exclusive des composants dans les maquettes.
Je publie les composants et les variables du design system, puis je le synchronise avec Figma Make.
Limites du contexte généré
Figma Make génère automatiquement un contexte de style, mais celui-ci reste partiel et nécessite des ajustements pour respecter le design system.
Rédaction des Guidelines
Je structure les guidelines dans le code de Figma Make pour cadrer l’IA et rédige la documentation du design system (fondations, tokens, composants).
Le fichier guidelines.md sert de point d’entrée et oriente l’IA vers les bonnes règles, puis vers les fichiers dédiés (ex : button.md).
Résultats
Ce process strict permet de générer des prototypes alignés avec le design system et d’accélérer la discovery grâce à l’intelligence artificielle dans Figma Make.
Exemple : “Guidelines/button.md”
Exemple : “Guidelines/tokens/colors.md“
Idéation accélérée par l'IA
4/5
Idéation accélérée par IA
À partir des maquettes IA-ready et des guidelines du design system, je génère rapidement, depuis Figma Make, plusieurs propositions d’interfaces et de fonctionnalités pour accélérer l’idéation.
Cette approche permet de tester différentes pistes UX rapidement, sans produire manuellement plusieurs maquettes.
Résultats
• Exploration rapide de nouvelles fonctionnalités
• Multiplication des solutions proposées
• Réduction du temps de validation produit
• Meilleure projection des équipes produit et commerciales grâce à des prototypes interactifs.
Merci pour votre attention
Vous pouvez consulter les autres études de cas
Design System
Atomic Design
Atomic Design
Variables
Modes
Documentations
Figma
Zeroheight
Consulter
Product Design
Améliorations UX
Atelier
Nouvelle fonctionnalité
entretien
Figma
Notion
Consulter
Recherche utilisateur
UX Research
UX/UI Design
User flow
Entretiens
Ateliers
Figma
Notion
Mobbin
Consulter