Date
2024
Client
Projet de fin de Master
Mon rôle
UX Designer, Design System Lead
Comptétences
Recherche utilisateur, UX Design, Design System, Documentation
Collaborateurs
Ludivine Porte – Direction artistique & UI, Olivia Ruf – Wireframes & User flow
APERCU DU PROJET
App d’aide à la prise de parole
"Neuf mois de travail collectif, des pivots assumés, et une application qu'on a eu envie de voir exister pour de vrai"
Ora est une application mobile d’aide à la prise de parole, conçue dans le cadre de notre projet de fin de Master à l’ECV. L’objectif était de concevoir une solution complète: de la recherche utilisateur jusqu’au design system, en réponse à un vrai besoin identifié sur le terrain.
Ce qui distingue ce projet d’un exercice académique classique, c’est la rigueur avec laquelle on l’a mené : de vraies recherches, de vrais entretiens, de vrais tests avec des utilisateurs finaux et des professionnels du design et du développement.
PROBLEMATIQUE
Une peur universelle, des solutions insuffisantes
77% des personnes souffrent d’anxiété liée à la prise de parole, et entre 40 et 78% considèrent que parler en public est leur principale crainte. Pourtant, les solutions existantes se limitent souvent à des feedbacks automatisés génériques, sans accompagnement humain et sans personnalisation réelle. Les personnes qui veulent progresser se retrouvent face à des outils trop théoriques, qui ne reproduisent pas les conditions réelles d’une prise de parole. Face à ce constat, une question s’impose : Comment concevoir une solution adaptative et inclusive qui accompagne tous les actifs confrontés à des obstacles à l’expression orale, afin d’améliorer leurs compétences en prise de parole ?
OBJECTIFS
Concevoir une solution inclusive, immersive et accessible
Ora devait répondre à trois enjeux simultanément : proposer un entraînement immersif et personnalisé grâce à l’IA, offrir un accès à des coachs professionnels certifiés pour aller plus loin, et inclure les personnes neurodivergentes (TDAH, TSA, dyslexie) souvent laissées de côté par les solutions existantes. Le tout dans une application mobile accessible, pensée pour s’intégrer dans un quotidien professionnel chargé, sans pression ni jugement
PROCESSUS
RECHERCHE UTILISATEUR
Comprendre avant de concevoir
Avant de toucher à Figma, nous avons passé plusieurs mois à comprendre le problème en profondeur. Entretiens qualitatifs, questionnaires quantitatifs, analyse du marché, rien n’a été laissé au hasard. C’est cette phase qui a tout changé dans notre façon d’appréhender le projet
ANALYSE & RECHERCHE
Analyse du marché
Nous avons commencé par cartographier le marché du coaching en prise de parole. Le constat est sans appel : en France, le marché du coaching a dépassé les 350 millions d’euros en 2022, avec une demande croissante pour des solutions numériques. 64% des professionnels préfèrent aujourd’hui des solutions de coaching digital. Pourtant, les applications existantes restent génériques et peu personnalisées. Notre benchmark sur des concurrents comme Yoodli, Speeko, BetterUp ou Bravely a confirmé un manque d’accompagnement humain et d’inclusivité
RECHERCHE UTILISATEUR
Comprendre avant de concevoir
Avant de toucher à Figma, nous avons passé plusieurs mois à comprendre le problème en profondeur. Entretiens qualitatifs, questionnaires quantitatifs, analyse du marché, rien n’a été laissé au hasard. C’est cette phase qui a tout changé dans notre façon d’appréhender le projet
RECHERCHE UTLISATEUR
Entretiens utilisateurs
Nous avons mené des entretiens qualitatifs et quantitatifs auprès de profils variés : des cadres, des chefs de projet, des commerciaux, des ingénieurs. Mais aussi une psychomotricienne spécialisée dans les troubles neurodivergents, pour construire une application vraiment inclusive dès la conception.
Ces entretiens ont été déterminants. Ils nous ont permis d’identifier les vraies freins des utilisateurs, pas seulement la peur de parler en public, mais le manque de feedback concret, l’absence de mise en situation réelle, et le sentiment de ne pas progresser malgré les efforts
RECHERCHE UTLISATEUR
Les pivots qu'on a pris
La recherche nous a conduits à remettre en question plusieurs de nos hypothèses de départ. Le premier pivot majeur a été notre cible : nous imaginions initialement une application dans un cadre personnel. Les entretiens nous ont montré que le vrai blocage se situait dans le cadre professionnel, devant les collègues, les supérieurs, les clients
Nous avons aussi revu notre approche des fonctionnalités IA. Certaines mises en situation virtuelles que nous envisagions avaient un coût de développement trop élevé pour une V1.
Nous avons cherché des alternatives plus réalistes sans sacrifier l’expérience.
Enfin, notre entretien avec la psychomotricienne a révélé des problèmes concrets sur nos premières maquettes : les animations en boucle perturbaient les personnes neurodivergentes, les interlignages étaient trop serrés, et certaines consignes d’exercices manquaient de clarté. Chaque pivot était ancré dans un résultat concret, pas dans une intuition
RECHERCHE UTLISATEUR
Des utilisateurs, pas des profils fictifs
À partir des données collectées, nous avons construit des personas représentatifs, anxieux, neurodivergents, perfectionnistes, afin de mieux cerner leurs attentes, leurs freins et leurs objectifs. Un Lean UX Canvas a ensuite synthétisé les hypothèses et les axes prioritaires
IDEATION
De l'insight à la solution concrète
Une fois la recherche terminée, nous avons traduit nos apprentissages en décisions de conception. Cette phase a été collective, toutes les trois autour du même FigJam
IDEATION
Crazy 8
Nous avons commencé par un atelier Crazy 8 pour générer rapidement des idées sans se censurer. L’objectif était de sortir des premières intuitions et d’explorer des directions qu’on n’aurait pas envisagées spontanément. C’est lors de cet atelier que certaines fonctionnalités clés ont émergé, notamment l’idée de mises en situation avec un public virtuel généré par IA, et le système de progression avec des défis et des badges
IDEATION
Nos fonctionnalités clés
Nous avons ensuite listé et priorisé les fonctionnalités en trois niveaux : primaires, secondaires et autres. Les fonctionnalités primaires regroupent ce qui est indispensable à l’expérience, l’enregistrement vidéo avec retours IA, les exercices personnalisés, le tableau de bord de suivi, les sessions de coaching et les mises en situation. Les fonctionnalités secondaires enrichissent l’expérience sans en être le cœur, la bibliothèque de ressources, la communauté, les ateliers
IDEATION
Architecture & parcours
Une fois les fonctionnalités définies, nous avons construit le site map, les user flows et les user maps, trois outils complémentaires pour s’assurer que chaque écran avait sa raison d’être et que les parcours étaient fluides et logiques. Nous avons travaillé sur plusieurs scénarios d’usage : la première utilisation, l’engagement sur le long terme, et la préparation à un événement imminent
CONCEPTION
Donner forme à nos décisions
C’est à partir de février que nous nous sommes réparti les tâches. Chacune avait son périmètre, mais nous restions en lien constant pour s’assurer que tout s’articulait bien. La conception n’était pas une phase isolée, c’était un dialogue permanent entre les wireframes, la direction artistique et le design system
CONCEPTION
Wireframes & parcours utilisateur
Olivia a pris en charge les wireframes et le parcours utilisateur complet, happy path et alternative path. L’objectif était de valider la logique de navigation avant d’investir dans le visuel. Chaque écran était justifié par un besoin identifié pendant la recherche
CONCEPTION
Direction artistique
Ludivine a défini l’identité visuelle d’Ora de façon à ce que chaque choix soit au service de l’utilisateur, pas de l’esthétique seule
LE NOM & LE LOGO
Ora évoque le souffle, l’instant présent et la lumière intérieure. Court, doux et universel, il résonne avec l’ambition de l’application. Le logo traduit cette intention : la lettre « r » manuscrite suggère le mouvement fluide de la voix et de la respiration, tout en ajoutant une touche humaine. Elle relie les autres lettres comme un fil conducteur entre le corps et la parole
LES COULEURS
La palette a été pensée pour équilibrer impact visuel et douceur émotionnelle. Le bleu primaire incarne stabilité et concentration. Les tons pastels (corail, rose, violet, turquoise) introduisent une dimension sensorielle et rassurante, sans agressivité visuelle. Le dégradé est lui aussi fonctionnel : chaque teinte correspond à un type d’exercice, permettant à l’utilisateur de ressentir visuellement dans quel espace il se trouve
LES MASCOTTES
Nos mascottes sont des formes abstraites, expressives et non genrées. Ce choix n’est pas seulement esthétique, il est stratégique. En évitant tout anthropomorphisme ou stéréotype, nous permettons à chaque utilisateur de projeter librement ses émotions sans biais culturel. Leur minimalisme réduit aussi la surcharge cognitive, ce qui était essentiel pour notre approche inclusive. Elles interviennent ponctuellement pour encourager ou valoriser, créant une connexion émotionnelle discrète mais marquante
CONCEPTION
Design system
Ma mission était de construire le design system complet sur Figma, puis de le documenter sur Supernova. L’objectif était double : garantir la cohérence visuelle de toute l’application, et produire une documentation solide pour qu’un développeur ou un designer externe puisse s’en emparer.
Le design system couvre les fondations (tokens de couleur, typographie, espacement, grille, bordures, icônes, illustrations et animations), ainsi que tous les composants organisés par catégorie : navigation, actions, feedback, formulaires, structure. Chaque composant est documenté avec son aperçu, son anatomie, ses variantes, ses règles d’usage et ses do & don’t
En parallèle, j’ai également produit une mini-documentation directement dans Figma, intégrée au plus près des composants. L’idée était simple : permettre à un designer ou un développeur de trouver l’essentiel (do & don’t, cas d’usage, specs) sans avoir à naviguer jusqu’au Supernova pour chaque détail. Deux niveaux de documentation complémentaires pour deux niveaux de besoin
TEST
Tester pour améliorer
Une fois les maquettes et le design system finalisés, nous avons organisé deux cycles de tests distincts : un sur l’application, un sur le design system. L’objectif n’était pas de confirmer que tout fonctionnait, mais d’identifier ce qui pouvait être amélioré avant de considérer le projet comme abouti
TEST
Tests de l'application
Nous avons fait tester l’application à quatre profils complémentaires : une utilisatrice sans pathologie, une utilisatrice avec un TDAH, un coach en prise de parole et une psychomotricienne spécialisée dans les troubles neurodivergents. Ce panel nous permettait d’évaluer l’expérience à la fois du point de vue de l’utilisateur standard et des personnes pour lesquelles l’inclusivité était un enjeu central
Les retours ont été concrets et actionnables. Les animations en boucle perturbaient les personnes neurodivergentes, nous les avons supprimées. Certaines consignes d’exercices manquaient de clarté, nous les avons réécrites. Les interlignages étaient trop serrés, nous les avons espacés. L’utilisatrice avec un TDAH nous a confié que l’IA lui semblait moins intimidante qu’un humain, et que les repères visuels répétitifs de l’interface la rassuraient. C’est exactement ce qu’on cherchait à obtenir
TEST
Tests du design system
Le design system a été testé auprès de quatre professionnels : un directeur artistique, un développeur front-end, un UX/UI designer et une design system leader. L’idée était de vérifier que notre documentation était utilisable en conditions réelles.
Les retours ont confirmé que la structure était solide. Le développeur a salué la cohérence avec la terminologie CSS et l’utilité des do & don’t. Le designer expérimenté a pu intégrer une page complète en s’appuyant uniquement sur la documentation, sans avoir besoin de nous solliciter. La clarté des noms de composants a été notée 4,5/5 en moyenne
Nous avons intégré les axes d’amélioration identifiés : ajouter des aperçus visuels en tête de chaque composant, rendre la section espacement plus visuelle, et préciser certains cas d’usage comme le positionnement fixe du header. Les lignes de code ont été identifiées comme une priorité pour la V2, que nous aurions développée avec un développeur dans un contexte réel
CE QUE JE RETIENS
Neuf mois: une vraie méthode, un vrai produit
Ora est le projet qui m’a montré que chaque décision de design avait une raison d’être, chaque pivot était ancré dans un résultat concret
Ce que je retiens surtout, c’est la valeur des tests. On aurait pu considérer que les maquettes étaient finies et s’arrêter là. On a choisi de faire tester l’application par des utilisateurs finaux, le design system par des professionnels. Et c’est exactement ces retours qui ont fait la différence entre quelque chose de bien construit et quelque chose de vraiment utilisable
Ma partie le design system, m’a appris une chose que je n’attendais pas : documenter, c’est concevoir. Chaque choix de naming, chaque règle d’usage, chaque do & don’t demandait autant de réflexion qu’un composant lui-même. C’est un travail invisible qui conditionne tout le reste, la cohérence de l’interface, la rapidité d’exécution d’un designer, la clarté pour un développeur
Voir d’autres projets
- UI DESIGN
Marmande
- NO-CODE, RECHERCHE UTILISATEUR, UI DESIGN, UX DESIGN