Product Design & Design Engineering
Une personne tient un téléphone montrant un exercice de langue Talkie. La photographie présente l’interface en situation d’usage.
Talkie
Rendre la progression dans l’apprentissage des langues plus visible, grâce à des parcours contextualisés et des repères cohérents.
UI Design, Design System
Grégoire De Gaiffier – UX Designer
Figma, Zeroheight
Rendre le progrès perceptible
Revenir régulièrement dans une application ne suffit pas toujours à sentir que l’on avance. Talkie explore des étapes, des exercices et des retours plus lisibles. Ce projet de spécialisation articule les parcours d’apprentissage avec un design system commun, pour garder des repères cohérents entre les formats.
Les écrans d’apprentissage réunissent une liste de thèmes, un cours contextualisé et des cartes d’exercice. La navigation commune propose Accueil, Apprendre, Quiz, Quêtes et Profil.
Les réponses au quiz donnent un retour explicite de réussite ou d’erreur, accompagné d’un texte et d’une action Continuer. L’information n’est pas portée seulement par le vert ou le rouge.
Un duel pose la troisième question sur cinq : Mathieu veut prendre un train, où doit-il se rendre ? Une photographie de gare et quatre réponses en espagnol accompagnent la question. Les réponses choisies par Camille et Eduardo sont marquées par leurs avatars ; leurs scores, 40 et 21, apparaissent au-dessus.
Partir d’une recherche exploratoire
Trois entretiens de 30 minutes avec des utilisateurs actifs d’applications concurrentes ont fait émerger quatre signaux : difficulté à dépasser les acquis, répétition, contenu trop généraliste et progression peu visible. Ces observations ont servi d’hypothèses de départ pour orienter la conception.
La synthèse d’entretiens relève des exercices répétitifs ou trop simples, une progression peu claire, une confusion entre mots similaires, des niveaux impossibles à passer, peu de mises en situation réelles et des interfaces trop scolaires ou peu interactives.
Les attentes exprimées sont des sessions courtes et variées, un ciblage précis des besoins, une interface vivante et interactive, une progression claire et motivante et des contenus ancrés dans la vie réelle : restaurant, voyage et travail. Le bas de la capture amorce une rubrique de pistes de conception sans en montrer le contenu.
Varier les formats, garder les repères
Cours guidés, quiz, quêtes et interactions sociales répondent à différents moments de l’apprentissage. L’enjeu est de relier ces formats dans un parcours compréhensible : apprendre, pratiquer, puis percevoir son avancée. Les composants et principes d’interface communs soutiennent cette cohérence.
La vue rassemble des extraits des parcours Talkie, avec points d’entrée, décisions et embranchements. Depuis l’accueil, les choix mènent au changement de langue, à Apprendre, Quiz, Quêtes ou Profil. Le parcours Apprendre propose catégories, recherche, mots ou expressions, cours et parcours guidés avec choix de niveau.
Les autres extraits montrent la connexion par courriel ou par connexion unique, la modification du profil, la consultation des badges et l’ajout d’un ami. Le parcours de duel relie invitation reçue ou envoyée, recherche d’un ami, choix du thème, préparation puis quiz, avec résultat de victoire ou de défaite. Plusieurs branches sont coupées par les bords de la capture : cette description couvre les extraits visibles, sans présenter le schéma comme complet.
Des composants communs pour apprendre et pratiquer
Les exercices en solo et les duels utilisent les mêmes briques : cartes, progression, modules de quiz et navigation. Chaque écran hiérarchise les informations autour d’une action principale et d’un retour clair. Le format change, mais les repères restent familiers.
Les réponses au quiz donnent un retour explicite de réussite ou d’erreur, accompagné d’un texte et d’une action Continuer. L’information n’est pas portée seulement par le vert ou le rouge.
Les écrans présentent le format de quiz en duel : les composants d’exercice, de progression et de résultat reprennent les repères utilisés en solo.
Le design system comme outil de collaboration
À deux designers sur cinq sections (Accueil, Apprendre, Quiz, Quêtes et Profil) il fallait garder des décisions cohérentes. Nous avons construit des fondations, des composants documentés par usage et des templates communs. La documentation Zeroheight, synchronisée depuis Figma, rend ces choix accessibles pour composer les écrans et leurs états.
Trois panneaux documentent le système de design. Le premier montre les variantes et états de boutons, avec ou sans pictogrammes. Le second détaille la structure d’un bouton — conteneur, pictogrammes et libellé — puis ses bonnes pratiques, propriétés, code et accessibilité.
Le troisième présente les variables partagées, classées par texte, arrière-plans, bordures, pictogrammes, rayons, focus, boutons, champs, quiz, étiquettes et minuteur. Les couleurs sémantiques distinguées sont accent, défaut, atténué, inversé, succès et erreur. La documentation relie ces variables aux composants et à leurs usages.
Observer les frictions, puis ajuster les parcours
Trois participants ont testé deux parcours et complété les scénarios sans blocage majeur. L’entrée dans les quiz manquait de clarté : elle a été retravaillée. Les frictions autour de l’invitation d’amis et de la reprise de cours ont orienté les améliorations des fins de parcours. Les titres et états manquants ont été ajoutés pour mieux situer l’utilisateur.
Quatre recommandations issues des tests sont montrées : permettre de quitter un quiz en cours, proposer une aide supplémentaire ou un indice, présenter les duels entre joueurs lors des premières étapes et permettre de quitter une leçon puis de la reprendre à l’endroit où l’on s’est arrêté.
Un système qui relie les parcours
Talkie réunit une recherche exploratoire, des prototypes desktop et mobile et un design system documenté. Le travail montre comment des décisions réutilisables peuvent soutenir plusieurs formats d’apprentissage, tout en gardant une expérience cohérente et une collaboration plus simple entre designers.