Un cours complet de 5 sessions — des fondamentaux UX aux maquettes Figma — pour concevoir des produits digitaux centrés sur l'utilisateur.
« Bien designer, c'est rendre invisible toute la complexité derrière une expérience évidente. »
Deux experts du design et de l'expérience utilisateur conjuguent pratique terrain et vision stratégique.
Expert en design de l'expérience utilisateur avec plus de 15 ans de pratique terrain. Spécialisé dans les contextes B2B complexes — télécoms, services digitaux, plateformes SaaS. Pilote des projets UX de A à Z, de la recherche utilisateur à la livraison des maquettes.
Designer produit et UI System expert, passionné par la construction de design systems scalables et l'interface entre design et développement. Accompagne des équipes produit dans la mise en place de workflows Figma, tokens de design et bibliothèques de composants.
linkedin.com/in/fredericmassondelasCinq séances du 31 mars au 30 avril 2026 — Live Class, TD et présentation finale.
Présentation du cours, fondamentaux UX, principes généraux, introduction au benchmark et analyses heuristiques. Lancement de l'esprit UX — pourquoi et comment concevoir pour l'humain.
Questions / réponses, zoning, user flow, personae, apprentissage Figma. Lancement de l'étude de cas challenge avec les groupes.
Travail en équipe — personas, user journey, wireframes Figma, premières itérations de maquette sur l'étude de cas.
Approfondissement des maquettes Figma, prototype interactif, préparation de la présentation finale — story telling UX.
Restitution orale complète devant jury : recherche utilisateur, livrables UX, maquettes Figma et recommandations d'amélioration.
Évaluation continue dans le cadre de la réalisation d'une étude de cas UX complète — 4 critères, 5 livrables.
Assiduité et engagement actif lors des sessions de travaux dirigés
Profondeur et sérieux de l'investissement personnel dans le projet
Collaboration efficace et contribution à la dynamique d'équipe
Rigueur et finesse des livrables UX — personas, user journey, maquettes Figma
UX = User Experience — l'ensemble des émotions, attitudes et perceptions lors de l'utilisation d'un produit ou service digital.
En contexte numérique, l'UX inclut l'interaction avec des interfaces web, applications mobiles et logiciels. L'objectif est d'améliorer la satisfaction en rendant les produits utilisables, accessibles et agréables.
Cela implique de comprendre en profondeur les besoins des utilisateurs et de concevoir des solutions qui répondent efficacement à ces besoins, tout en offrant des interactions intuitives et valorisantes.
L'UX n'est pas une discipline isolée : elle articule la psychologie cognitive, le design visuel, l'architecture de l'information, l'accessibilité et les données comportementales pour créer des expériences qui servent vraiment les utilisateurs.
Ce que vous maîtriserez à l'issue des 5 sessions — de la recherche utilisateur à la maquette finale.
Appréhender l'ensemble des approches disponibles pour mener correctement un projet d'expérience utilisateur dans le domaine du E-business.
Donner des clefs opérationnelles pertinentes dans le cadre d'un projet digital : outils, méthodologies et livrables concrets utilisables immédiatement.
Initiation à Figma — composants, design system, tokens et IA — pour formaliser des maquettes graphiques en basse ou grande résolution.
Apprentissage des processus et de la méthodologie autour de l'expérience utilisateur dans un projet digital de E-business.
Autonomie dans la gestion de projet d'expérience utilisateur et de conception graphique avec Figma — de l'idée au livrable final.
Choisir des outils adaptés à chaque besoin — ensemble ou séparément selon le type de projet.
Profil type de l'utilisateur idéal basé sur données réelles
Analyse concurrentielle et heuristique du marché
Ateliers créatifs pour générer des solutions innovantes
Cartographie du parcours complet avec courbe émotionnelle
Ce que l'utilisateur dit, pense, ressent et fait
Narration du parcours pour aligner les équipes
Diagramme des chemins et décisions dans l'interface
Tests utilisateurs, questionnaires et focus groups
Tests rapides et informels en conditions réelles
Recherche quantitative — heatmaps, A/B testing
Une occasion d'avoir une vision globale — concevoir et améliorer la fluidité de toutes les interactions utilisateur.
Le User Flow cartographie tous les chemins qu'un utilisateur peut emprunter dans une interface. C'est un outil fondamental pour visualiser les interactions, détecter les culs-de-sac et optimiser la fluidité avant de passer à la maquette.
À réaliser en amont du wireframing, après la phase de recherche utilisateur et la définition des personae. Le User Flow sert de carte de navigation commune à toute l'équipe projet.
Chaque étape détaille l'écran affiché, l'action réalisée par l'utilisateur et la décision qui déclenche l'étape suivante. Les nœuds losange représentent des points de décision pouvant créer des chemins alternatifs.
Un seul chemin linéaire et sans branchement pour accomplir une tâche précise. Pas de décision, pas d'alternative.
Tous les chemins possibles avec décisions, branches alternatives et cas d'erreur. Vue exhaustive de la navigation.
Combinaison de wireframes basse fidélité et de flèches de navigation. Donne une vision concrète des écrans dans le flux.
Enchaînement de maquettes haute fidélité connectées entre elles. Version finale du flow avec l'UI réelle du produit.
Identifier les pain points étape par étape dans un parcours utilisateur réel — exemple d'un portail de services B2B.
Les 4 principes fondateurs de l'idéation — créer les conditions d'une génération d'idées sans limite.
Générer un maximum d'idées sans jugement ni autocensure — quantité avant qualité.
Filtrer, regrouper et sélectionner les idées les plus pertinentes selon critères définis.
Impliquer des profils variés — utilisateurs, métier, design, tech — pour enrichir les solutions.
Matérialiser les idées vite et concrètement pour pouvoir les tester et les améliorer.
La question HMW reformule un problème en opportunité de design. Elle est assez large pour stimuler la créativité, assez précise pour rester actionnelle.
La formulation HMW suit une structure précise : elle part d'un insight utilisateur fort et ouvre un espace de solutions créatives sans prédéfinir la réponse.
Le HMW s'appuie sur un verbatim ou une observation terrain réelle, pas sur une supposition.
La question ouvre un espace d'exploration — elle ne présuppose pas la réponse ni la technologie.
L'objectif est toujours une amélioration pour l'utilisateur, pas un avantage business direct.
Reformuler le même problème de 3 à 5 façons différentes pour élargir ou restreindre le périmètre créatif.
Génération libre d'idées en groupe — 10 min chrono
8 idées en 8 minutes — 1 idée par case dessinée
Inverser le problème pour libérer la créativité
Dot voting — chaque participant place 3 pastilles
Construire une métaphore Lego du produit idéal
Deux outils complémentaires pour comprendre en profondeur l'utilisateur et cartographier son expérience complète.
Approche matricielle qui capture ce que l'utilisateur dit, pense, fait et ressent. Distingue comportements déclarés et réels, et identifie les frustrations cachées.
Visualisation du parcours complet d'un utilisateur — de la prise de conscience jusqu'à l'objectif final — avec ses actions, émotions et points de douleur à chaque étape.
Primo-accédants sur un site d'annonces immobilières — identifier les frictions et opportunités d'amélioration.
Primo-accédante, cherche son premier bien immobilier via un portail d'annonces en ligne
Objectif : trouver un bien adapté et contacter rapidement un annonceur de confiance
Passer de l'intention au système — structurer, industrialiser et maintenir une interface cohérente à grande échelle grâce à l'Atomic Design, aux composants et à Figma.
Méthodologie qui structure les composants UI en couches progressives — du plus petit élément indivisible jusqu'à la page complète. Elle garantit cohérence, réutilisabilité et maintenabilité à grande échelle.
Les briques indivisibles de l'UI — impossible de les décomposer davantage sans perdre leur sens.
Assemblage de plusieurs atomes formant un composant simple avec une fonction claire.
Sections d'interface complexes, autonomes et réutilisables — elles forment une partie visiblement distincte.
Structures de page avec des zones définies — organismes disposés en layout, sans contenu réel encore.
Templates remplis de contenu réel — ce que l'utilisateur final voit et interagit avec.
Un composant bien défini documente toutes ses dimensions : parties nommées, variantes, états interactifs, tokens associés et règles d'accessibilité. Exemple avec le composant le plus fondamental — le bouton.
button-bg-primary→ color-rouge-500button-text-primary→ color-whitebutton-radius→ radius-sm (4px)button-padding-md→ space-3 space-6button-font-size→ text-sm (14px)Un Design System est bien plus qu'une bibliothèque de composants — c'est un langage partagé entre design et développement, avec sa gouvernance, sa documentation et ses règles d'évolution.
Variables nommées stockant toutes les décisions visuelles fondamentales. Organisés en 3 niveaux : primitifs (valeurs brutes), sémantiques (intentions) et composants (contextes spécifiques).
Composants réutilisables organisés selon Atomic Design — chacun documenté avec ses variantes, états, props, tokens et règles d'accessibilité.
Le Design System vit et évolue grâce à des processus clairs de contribution, de versioning et de communication — sans gouvernance, il devient rapidement obsolète.
Storybook, Zeroheight ou Supernova — chaque composant documenté avec exemples interactifs
Semantic versioning (MAJOR.MINOR.PATCH) — changelog communiqué à toutes les équipes
Processus de proposition, review et validation pour l'ajout de nouveaux composants
Figma est l'outil standard de la profession pour concevoir, prototyper et documenter des interfaces. Sa puissance réside dans ses fonctionnalités avancées de composants et variables.
Système de mise en page flexbox dans Figma. Permet de créer des composants qui s'adaptent automatiquement à leur contenu — essentiel pour des composants réutilisables et responsive.
Les Variables Figma remplacent les styles locaux et permettent de synchroniser les tokens de design entre collections (Primitifs, Semantic Light, Semantic Dark). Gestion native du thème clair/sombre.
Les composants Figma avec Variants permettent de regrouper toutes les versions d'un même élément (taille, état, style) dans une seule entité. Convention de nommage : Catégorie/Sous-catégorie/Variant.
Le Mode Dev de Figma génère automatiquement les specs CSS, les tokens et le code React à partir des composants. Élimine les allers-retours design/dev et réduit les erreurs d'implémentation.
Structure recommandée d'un fichier Figma Design System pour faciliter la navigation et la maintenance par toute l'équipe.
Les fonctionnalités IA de Figma (Make Designs, First Draft, Rename Layers) accélèrent la production de maquettes initiales. Utiles pour générer des variations rapides ou structurer des layouts de départ.
Personas, User Journey, pain points
Architecture des écrans et flux de navigation
Wireframes basse fidélité, structure des pages
Tokens, composants, bibliothèque Figma
Interface haute fidélité avec composants
Interactions et animations, test utilisateur
L'ensemble des termes clefs — définition et prompt prêt à l'emploi pour les mettre en œuvre dans vos projets.
Une sélection de ressources incontournables pour approfondir vos connaissances en UX, Design System et expérience utilisateur.