Découvrez comment Wondertale a transformé Flowr en une application web intuitive grâce à un travail approfondi de UI design et UX research. Cette étude de cas illustre notre approche pour créer des produits numériques où la fonctionnalité rencontre la passion, offrant une expérience utilisateur exceptionnelle qui favorise l'engagement et les conversions.
Flowr est une application web ambitieuse destinée à révolutionner l'automatisation des workflows grâce à l'intelligence artificielle agentique. Dans un marché en pleine effervescence où les assistants IA se multiplient, l'équipe Flowr avait besoin de se démarquer avec une interface utilisateur exceptionnelle qui allie sophistication technique et simplicité d'utilisation. Wondertale a été mandaté pour concevoir l'intégralité de l'expérience produit, de la recherche UX au prototypage final.
Concevoir une application chat-based pour l'automatisation agentique
Le défi principal résidait dans la nature même du produit : une application web conversationnelle pour l'automatisation de workflows agentiques. Il fallait créer une interface qui rende accessible des concepts techniques complexes (agents IA, automatisations, connexions API) tout en conservant la fluidité naturelle d'une conversation. L'enjeu était de taille : permettre aux utilisateurs de construire et gérer des workflows sophistiqués simplement en discutant avec l'application.
S'Inspirer des leaders du marché
L'équipe Flowr avait des références précises en tête : Den, Cofounder et Manus, trois applications à l'esthétique distinctive et aux interactions remarquables. Le défi consistait à s'inspirer de ces références premium tout en créant une identité visuelle unique pour Flowr. Il ne s'agissait pas de reproduire, mais de comprendre ce qui rend ces interfaces exceptionnelles et d'adapter ces principes à la vision spécifique de Flowr.
Architecturer un écosystème complet d'écrans
Flowr n'était pas une simple application de chat. Le projet nécessitait la conception d'un écosystème complet de 11 types d'écrans différents : nouvelle conversation, gestion des agents, mémoire système, connexions externes, espaces de travail, historique des conversations, paramètres utilisateur, facturation et usage, workspace collaboratif, notes de version et documentation. Chaque écran devait être cohérent avec les autres tout en répondant à des besoins fonctionnels distincts.
Équilibrer puissance et accessibilité
Comment créer une interface suffisamment puissante pour des utilisateurs avancés qui souhaitent créer des automatisations complexes, tout en restant intuitive pour des néophytes découvrant l'IA agentique pour la première fois ? Cet équilibre délicat entre profondeur fonctionnelle et simplicité d'usage représentait un défi UX majeur.
Valider internationalement dans un délai serré
Avec une ambition de déploiement en France et au Royaume-Uni, l'interface devait être testée et validée auprès d'utilisateurs des deux marchés pour s'assurer que les choix de design, la terminologie et les parcours utilisateurs fonctionnent dans deux contextes culturels et linguistiques différents. Le tout en seulement 4 semaines.
Recherche compétitive et inspirations (Jours 1-3)
Notre démarche a débuté par une analyse approfondie des applications de référence : Den, Cofounder et Manus, mais également d'autres applications chat-based émergentes dans l'écosystème IA. Nous avons décortiqué leurs interfaces pour identifier les patterns de design qui fonctionnent, les interactions innovantes, et les choix typographiques et chromatiques qui créent une expérience premium.
Cette recherche intensive ne se limitait pas à une simple observation visuelle. Nous avons testé chaque application en profondeur pour comprendre les flows utilisateurs, les micro-interactions, les feedbacks visuels et les hiérarchies d'information. L'objectif était de constituer rapidement un référentiel solide de bonnes pratiques tout en identifiant les opportunités de différenciation pour Flowr.
Parallèlement, nous avons exploré les plateformes d'automatisation existantes (Zapier, Make, n8n) pour comprendre comment elles représentent les concepts de workflows, d'agents et de connexions, afin d'adapter ces conventions aux spécificités d'une interface conversationnelle.
Wireframing et User Journey (Jours 4-8)
Fort de ces inspirations, nous avons entamé la phase de wireframing structurel. Plutôt que de nous précipiter sur le design visuel, nous avons d'abord cartographié l'ensemble des parcours utilisateurs possibles, de la première connexion à la création d'automatisations complexes.
Le user journey a été conçu en trois niveaux d'expérience : le parcours de découverte pour les nouveaux utilisateurs (onboarding, première conversation, découverte des agents), le parcours intermédiaire pour les utilisateurs réguliers (création de workflows standards, gestion de plusieurs espaces), et le parcours avancé pour les power users (configurations complexes, connexions multiples, gestion d'équipe).
Les wireframes ont permis de résoudre les questions d'architecture d'information avant toute considération esthétique : où placer la navigation principale ? Comment organiser la sidebar pour accéder rapidement aux conversations, agents et espaces ? Comment structurer les paramètres complexes (facturation, usage, connexions) sans submerger l'utilisateur ? Quelle hiérarchie donner aux différents types de contenu dans la zone de chat ?
Cette phase a également impliqué la conception du système de navigation : navigation principale pour les sections clés, navigation contextuelle dans chaque écran, et navigation secondaire pour les sous-sections comme la documentation et les release notes.
Design system et design visuel complet (Jours 9-18)
Une fois l'architecture validée, nous sommes passés au design visuel complet de l'ensemble des 11 écrans. Cette phase a commencé par l'établissement d'un système de design cohérent : palette de couleurs inspirée des références mais unique à Flowr, typographie soigneusement choisie pour allier lisibilité et personnalité, grille et spacing system pour une cohérence parfaite, et bibliothèque de composants réutilisables (boutons, inputs, cards, modales, etc.).
Chaque type d'écran a été conçu avec une attention particulière à sa fonction spécifique. L'écran de nouvelle conversation privilégie la simplicité et l'invitation à l'action. Les écrans de gestion des agents présentent visuellement les différents agents disponibles, leurs capacités et leurs statuts. L'écran de mémoire rend tangible le concept abstrait de la mémoire système à travers des visualisations claires. Les écrans de connexions simplifient la complexité technique des intégrations API. Les espaces de travail facilitent l'organisation collaborative.
Les écrans de paramètres, facturation et usage ont fait l'objet d'un soin particulier : ces sections critiques mais souvent négligées devaient être aussi élégantes et faciles d'usage que le reste de l'application. Nous avons conçu des dashboards de facturation clairs, des indicateurs d'usage visuels, et des paramètres organisés de manière intuitive.
La documentation et les release notes ont été pensées comme une extension naturelle de l'application, avec une navigation fluide et une présentation visuelle attrayante qui encourage la lecture.
Le design statique a été simultanément transformé en prototype interactif haute-fidélité dans Figma. Ce prototype reproduisait les transitions, les animations, les micro-interactions et les feedbacks visuels qui donnent vie à l'interface. Les interactions conversationnelles ont été particulièrement travaillées : animation de l'indicateur de typing, apparition progressive des messages, transitions entre les différents états de l'interface, et feedbacks visuels lors des actions utilisateur.
UX Research et Validation (Jours 19-28)
La phase finale mais cruciale consistait en une UX research approfondie avec 20 utilisateurs potentiels : 10 basés en France et 10 au Royaume-Uni. Cette double validation géographique était essentielle pour un produit avec des ambitions internationales.
Les sessions de recherche combinaient plusieurs méthodologies. Des tests d'utilisabilité ont permis d'observer comment les participants naviguaient dans le prototype, identifiant les points de friction et les moments de confusion. Des interviews semi-structurées ont révélé les attentes, les craintes et les besoins réels des utilisateurs face à l'automatisation agentique. Des questionnaires de satisfaction ont quantifié la perception de l'interface, la clarté des concepts et l'intention d'usage.
Les retours ont été précieux et ont conduit à des itérations finales du design : simplification de certains parcours jugés trop complexes, ajout de tooltips explicatifs pour les concepts techniques, ajustement de la terminologie pour plus de clarté, et optimisation de l'onboarding pour réduire le temps d'apprentissage.
Résultats & Impact
Une interface qui démystifie la complexité
Le design final de Flowr réussit le pari de rendre accessible la puissance de l'automatisation agentique. Les utilisateurs testés ont souligné la clarté de l'interface, la fluidité des interactions et la courbe d'apprentissage douce malgré la sophistication technique sous-jacente.
Une identité visuelle distinctive
Tout en s'inspirant des leaders du marché, Flowr a acquis une identité visuelle propre qui le distingue dans un paysage concurrentiel saturé. L'application respire la modernité et le professionnalisme tout en conservant une chaleur humaine essentielle pour une interface conversationnelle.
Un système de design scalable
Au-delà des 11 écrans initiaux, Wondertale a livré un système de design complet et documenté permettant à l'équipe Flowr de continuer à développer de nouvelles fonctionnalités en maintenant la cohérence visuelle et l'excellence UX.
Validation cross-culturelle
Les tests en France et au Royaume-Uni ont confirmé que les choix de design transcendent les barrières culturelles. Les retours positifs des deux marchés valident l'approche universelle tout en permettant des ajustements linguistiques et contextuels mineurs.
Livraison express sans compromis
Malgré le délai serré de 4 semaines, le projet a été livré à temps avec zéro compromis sur la qualité. Cette performance démontre la capacité de Wondertale à combiner rapidité d'exécution et excellence design.
Méthodologie de Design
Ce projet illustre l'approche intensive de Wondertale pour les produits digitaux complexes sous contrainte temporelle : recherche compétitive rapide et ciblée (3 jours), wireframing structurel pour valider l'architecture d'information (5 jours), design system cohérent et design complet de 11 écrans en parallèle (10 jours), et UX research internationale avec 20 utilisateurs pour valider les hypothèses (10 jours incluant itérations finales).
La collaboration avec l'équipe Flowr s'est déroulée de manière ultra-itérative, avec des points bihebdomadaires pour présenter les avancées, recueillir les feedbacks instantanés, et ajuster la direction créative en fonction des priorités business évolutives. Cette cadence soutenue a été essentielle pour tenir les délais sans sacrifier la qualité.
Technologies & Outils Utilisés
Figma pour l'intégralité du design, wireframing et prototypage, FigJam pour les sessions de brainstorming et user journey mapping rapides, Maze et UserTesting pour les tests UX à distance en parallèle sur deux marchés, Notion pour la documentation du design system et des insights de recherche, Loom pour les mises à jour vidéo quotidiennes avec l'équipe Flowr.
Pourquoi ce projet est emblématique
Flowr représente le type de défi que Wondertale affectionne particulièrement : un produit techniquement sophistiqué qui nécessite un design rendant cette sophistication accessible, le tout dans un délai très serré. Quand le produit rencontre la passion, comme le dit notre tagline, le résultat est une application qui ne se contente pas de fonctionner : elle inspire, engage et transforme la manière dont les utilisateurs pensent l'automatisation.
Ce projet démontre notre capacité à naviguer dans l'écosystème complexe des applications IA, à comprendre les attentes d'utilisateurs internationaux, à livrer un design complet de 11 écrans différents, et à valider le tout avec une UX research internationale — tout cela en 4 semaines. C'est cette combinaison de rapidité et d'excellence qui définit l'approche Wondertale.
Vous développez un produit SaaS complexe qui mérite une interface exceptionnelle en un temps record ?
Réservez votre consultation gratuite avec Wondertale pour transformer votre vision technique en expérience utilisateur remarquable, sans compromis sur les délais ni la qualité.
