Weborama

AI Ideation & Prototyping

Janvier 2025 à Aujourd’hui

Contexte

Weborama — SaaS Ad tech (analyse, activation et valorisation de la donnée marketing).

Mission

Je dois concevoir un nouvel outil SaaS à partir de premières explorations générées par IA, initiées par l’équipe commerciale et produit.

Contrainte

Le projet imposait une contrainte forte : l’ensemble des échanges et des décisions produit devait s’appuyer exclusivement sur le prototype généré via Figma Make, utilisé par les équipes commerciale, produit, design et de développement.

Use case

J’ai revu l’ensemble des parcours utilisateurs, conçu un Design System et réalisé les maquettes.
J’ai ensuite défini une approche permettant de réutiliser les maquettes existantes pour générer un prototype IA interactif (approche « AI Ready), facilitant l’idéation et l’exploration de nouvelles fonctionnalités directement au sein du prototype.

Résultats

Impacts

· user flow principal simplifié et aligné sur les patterns concurrents,

· design System respectants les régles d’accessibilités (mode clair et mode sombre),

· prototypes IA générés à partir de règles strictes,

· idéation directement dans le prototype IA,

· revue et validation continue des composants.

Étape 1 — Refonte des User Flows

Début du use case

Approche

Reprise complète des parcours afin de réduire la friction sur l’action principale.
Les parcours générés par IA reposent sur des itérations de couches de prompts et manquent de fluidité : trop d’étapes sont inutiles et pourraient être regroupées.

Actions

· Simplification du parcours principal : accès direct à l’objectif principal depuis la page d’accueil, en évitant les multiples clics nécessaires auparavant dans l’application.,

· Refonte du user flow autour du prompt : l’outil simplifie notre process en proposant à l’utilisateur de générer des prompts. Le parcours est réaligné sur les patterns des outils IA / LLM et l’ensemble du user flow est repensé.

Résultats

2/9

Impact sur l'action principale

· Réduction du nombre d’écrans : passant de 4 à 1,

· Réduction du nombre de clic pour l’action principale : passant de 4 à 1 clic,

· parcours plus direct et compréhensible.

New user flow

Dans cet exemple, l’action principale est la génération de résultats, à partir d’un prompt ou d’un fichier importé. Au départ, le parcours était découpé en quatre écrans successifs, ce qui ralentissait l’accès aux résultats : générer un nouveau document → choix entre prompt ou envoi de fichier → prompt (choix n°1) → envoie de fichier (choix n°2).

J’ai simplifié le parcours en un seul écran : l’utilisateur peut rédiger un prompt ou importer un fichier au même endroit, et lancer la génération de résultats.

Étape 2 — Maquettes & Design System

3/9

Maquette

Je commence par concevoir dans Figma les maquettes des premiers parcours validés.

Toutes les maquettes doivent respecter des règles strictes : nommage systématique des calques, gestion rigoureuse des auto-layouts et utilisation des composants dans l’ensemble des maquettes. Ces règles constituent une base solide pour la génération de prototypes IA.

Design System

En parallèle des maquettes, je pose progressivement les fondations du design system : définition des couleurs, des typographies, des espacements, d’une bibliothèque d’icônes et les premières variables.
Dès le départ, j’intègre un mode clair et un mode sombre, en veillant à l’accessibilité de chaque composant.

Résultats

4/9

Bases solides pour les prochaines étapes

J’ai créé une base solide composée de variables et de composants structurés selon la méthode de l’Atomic Design.

Ce Design System sert de fondation à la bibliothèque contextualisée utilisée par Figma Make pour générer des prototypes IA dédiés à l’idéation, tout en respectant les fondations, les composants, les variables, les modes clair et sombre, et en garantissant l’accessibilité.

Template

Mode clair et sombre

Bouton primaire

Étape 3 — Process Design → Prototype IA

5/9

Règles d'importations dans Figma Make ("AI Ready" process)

Avant d’importer les premières maquettes dans Figma Make, je contrôle le respect des prérequis : un nommage strict des frames, une gestion rigoureuse des auto-layouts, la gestion des scrolls avec clip content et l’utilisation exclusive des composants dans l’ensemble des maquettes.
Sans cela, les maquettes générées devraient être retouchées après import, ce qui irait à l’encontre de l’objectif : générer vite et correctement.

Importation des maquettes dans Figma Make

Une fois ces conditions réunies, je peux publier les composants et les variables du design system, puis exporter mes maquettes dans Figma Make à l’aide d’un prompt précis demandant de générer scrupuleusement les fichiers sans rien y ajouter.

Contraintes

Une fois le Design System et les maquettes importés, Figma Make génère un contexte de style, mais celui-ci reste perfectible et des ajustements demeurent nécessaires afin d’obtenir une idéation respectant strictement le Design System.

Rédaction des guidelines

Pour obtenir des prototypes IA entièrement alignés avec le Design System, je rédige directement dans le code de Figma Make un document dédié (guidelines.md) centralisant l’ensemble des règles : palettes de couleurs, espacements, typographies, ainsi que le nommage et les comportements de chaque composant et de ses variantes : couleurs, espacements, bordures, typographies et règles d’utilisation (ex : ne pas utiliser deux boutons primaires ensemble).

Résultats

6/9

Contexte de style et guidelines

Grâce au Design System lié à Figma Make et à la rédaction du fichier guidelines.md dans Figma Make, je peux sereinement importer mes maquettes.

Étape 4 — Idéation directement dans le prototype IA

7/9

Figma Make

Après avoir importé mes premières maquettes dans Figma Make, je peux générer, à partir de prompts, des propositions de nouveaux parcours utilisateurs.

Pour chaque nouvelle fonctionnalité, je produis plusieurs propositions au sein d’un même prototype afin de comparer rapidement les options.

Résultats

8/9

Impacts

Je propose plusieurs solutions en moins de temps.
Le délai de validation est fortement réduit, et l’engagement comme la capacité de projection de l’équipe produit et de l’équipe commerciale sont maximisés.

Exemple de génération de 2 propositions dans Figma Make

Étape 5 — Review des composants

fin du use case

Chromatic via Storybook

Une fois les composants créés par l’équipe front, je passe à l’étape de revue, j’utilise l’outil Chromatic, directement relié à Storybook.

Storybook

Chromatic

Recommandation

Pour toute recommandation ou retour sur mon travail chez Weborama, vous pouvez contacter Donia Ben Ghorbal, Lead Product Designer.

Merci pour votre attention

Vous pouvez consulter les autres uses case

UX Research

User Flow

Améliorations UX

Atelier

Entretiens

Figma

Notion

Mobbin

Consulter

Design System

Atomic Design

Variables

Modes

Documentations

Figma

Zeroheight

Consulter

Product Design

Améliorations UX

Atelier

Nouvelles fonctionnalités

Entretiens

Figma

Notion

Consulter