Service:
Design UX/UI
Industrie
Éducation
Année
2024
Voir le Projet:

SkillTrack

Suivi de compétences ludifié pour les apprenants à vie.

SkillTrack

Introduction

Le Défi : Pourquoi abandonnons-nous ce que nous commençons ? Nous vivons à l'âge d'or de l'auto-éducation, et pourtant, terminer un cours ou maîtriser un nouveau passe-temps reste incroyablement difficile. L'enthousiasme est là, mais la structure manque.

La Solution : SkillTrack est un compagnon d'apprentissage mobile conçu pour combler le fossé de la régularité. En combinant des mécaniques de suivi d'habitudes avec la gamification (ludification), il transforme le processus chaotique de l'auto-apprentissage en un parcours structuré et gratifiant.

Recherche & Découverte

Comprendre les obstacles de l'apprenant : J'ai lancé le projet avec une question simple : Qu'est-ce qui empêche les gens d'apprendre ? Grâce à un mélange de sondages et d'entretiens individuels, j'ai creusé les habitudes des utilisateurs.

Les données ont révélé un schéma clair : le problème n'est pas la motivation, c'est la régularité. Les utilisateurs se sentent dépassés par des ressources désorganisées et manquent de boucles de feedback immédiates qui rendent l'apprentissage addictif.

Peinent à trouver du temps régulier 61%
Utilisent YouTube ou des plateformes en ligne 73%
Veulent un apprentissage structuré mais flexible 82%
Préfèrent des sessions courtes 58%
Ont besoin de motivation et de ludification 47%

Définir les Utilisateurs :Pour garder le design centré, j'ai synthétisé mes recherches en deux personas clés :

  • L'Ambitionneur : A besoin d'efficacité et de progrès mesurables pour monter en compétences au travail.
  • L'Apprenant Curieux : Cherche un moyen ludique et sans pression d'explorer des loisirs créatifs.

Malgré leurs objectifs différents, tous deux avaient le même besoin : la responsabilité (accountability).

Architecture de l'Information

Construire une structure qui a du sens :J'ai organisé l'application pour minimiser la charge cognitive. L'architecture s'articule autour du Tableau de bord (Accueil) — une source de vérité unique où les utilisateurs voient leurs tâches quotidiennes et leurs progrès en un coup d'œil.Autour de cela gravitent le Hub d'apprentissage (où se trouvent les ressources) et le Profil (où les succès sont célébrés).

Onboarding & Configuration
Saisie des compétences, du temps libre et du rythme. L'IA génère un planning personnalisé.
Accueil (Tableau de bord)
Hub central pour suivre les progrès, les leçons à venir et les recommandations IA.
Profil (Coin supérieur)
Réussites, badges, paramètres et gestion du planning.
Cartes Mémoire (Flashcards)
Cartes générées par IA pour réviser. Balayez pour marquer "Maîtrisé" ou "À revoir".
Chatbot IA
Tuteur virtuel pour Q&A, explications et interaction vocale sans interrompre le flux.
Parcours d'apprentissage
Leçons structurées étape par étape, quiz, ajustement de difficulté et ressources.

Flux d'utilisateurs

Cartographier le chemin vers la satisfaction :Avant d'ouvrir mes outils de design, j'ai cartographié les parcours critiques. Mon objectif était d'éliminer les frictions entre "ouvrir l'application" et "apprendre". Les flux ci-dessous visualisent le processus d'intégration et la boucle principale de "pointage quotidien".

Flux 1 : Intégration et création d'un calendrier

L'utilisateur ouvre l'application
L'écran de bienvenue affiche une brève introduction. L'utilisateur clique sur "Commencer".
Sélection ou saisie de la compétence
L'app suggère des compétences ou permet une saisie manuelle. L'utilisateur choisit son sujet cible.
Saisie du temps libre
L'utilisateur définit sa disponibilité (ex: Lun 22h-23h, Mer 8h-9h).
Choix du rythme d'apprentissage
Court 15-30m
Normal 30-60m
Intense 1h+
L'IA génère le planning
Traitement des données pour créer un plan sur mesure. Affiche date de début, durée et aperçu.
Confirmer & Commencer
L'utilisateur clique sur "Continuer", termine l'onboarding et accède au Tableau de bord.

Flux 2 : Apprentissage et progression des quiz

L'utilisateur ouvre l'Accueil (Tableau de bord)
L'écran affiche les leçons actuelles et à venir avec un visuel de progression.
L'utilisateur lance une leçon
Il fait défiler les sections de contenu.
Termine la leçon & Lance le Quiz
La leçon se termine, le bouton "Faire le Quiz" apparaît. Inclut QCM & Textes à trous.
Point de décision : Réussite ?
Le système évalue le seuil de score (70%).
Score ≥ 70% (Réussi)
• Reçoit les corrections
• Prochaine leçon débloquée
• Message de succès affiché
Score < 70% (Échoué)
• Explications des erreurs
• Crée une leçon de révision
• Doit refaire un petit quiz
Retour au parcours d'apprentissage
Progrès mis à jour. Prochaine leçon débloquée (si réussite). L'utilisateur peut continuer ou réviser.

Flux 3 : Obtenir de l'aide grâce au chatbot IA

L'utilisateur accède au Chatbot
Accessible via la barre de navigation inférieure (sauf pendant les quiz).
L'utilisateur tape sur l'icône "IA" pour ouvrir l'assistant.
L'utilisateur pose une question
• Tape une question personnalisée
• Utilise la commande vocale pour parler
Le Chatbot génère une réponse
L'IA fournit une explication textuelle et des liens vers des leçons ou TED talks pertinents. Elle peut aussi suggérer un quiz rapide ou une révision de flashcard.
Interaction avec les fonctionnalités
Mode Vocal : Bascule en mode conversation (parler/écouter).
Vérification des connaissances : Le bot pose des questions de suivi pour vérifier la compréhension.
Retour à l'apprentissage
L'utilisateur ferme le chatbot pour reprendre sa leçon. Le système enregistre l'interaction pour affiner les futures recommandations.

Stratégie Visuelle et Localisation

Concevoir pour une audience mondiale (LTR et RTL) : SkillTrack est conçu pour être accessible dans les langues lues de gauche à droite (anglais, français) et de droite à gauche (arabe, hébreu). Cependant, j'ai évité de refléter aveuglément chaque élément en miroir.

La Stratégie : Contenu adaptatif, navigation fixe : Tout en adaptant le flux visuel du texte, des barres de progression et des icônes directionnelles pour correspondre à l'ordre de lecture naturel des utilisateurs RTL, j'ai pris la décision stratégique de conserver la Navigation inférieure cohérente dans les deux versions.

Pourquoi ? Pour préserver la mémoire musculaire. Le pouce apprend où se situent les actions clés. En ancrant la navigation principale au même endroit, je m'assure que l'interaction physique reste familière, même si les paramètres de langue changent.

Prototypage et Design d'Interaction

📱
Tap to View Prototype
Since this screen is small, the interactive prototype is best viewed in a full browser window.
Open Prototype ↗

Réflexions

Ce que j'ai appris : SkillTrack m'a appris que la gamification est un équilibre délicat. Il ne s'agit pas simplement de coller des badges sur un écran ; il s'agit de créer des boucles de feedback significatives qui donnent à l'utilisateur le sentiment d'avoir accompli sa mission.

Prochaines étapes : Si je devais continuer à développer ce produit, j'introduirais des fonctionnalités de Responsabilité Sociale. Permettre aux utilisateurs de partager leurs jalons avec leurs amis pourrait constituer la dernière pièce du puzzle pour résoudre le problème de motivation.

Maher Berro
« Excellente recherche et excellent plan Vous auriez pu améliorer encore les interactions et les wireframes. »
Maher Berro
Maître de conférences senior UX/UI à l'A.U.B
SkillTrackSkillTrackSkillTrackSkillTrackSkillTrackSkillTrack
SkillTrack