UX design d’une application mobile
Sarah Leclerc
Sommaire
Brief Problèmatique Études documentaires Benchmark & Audit Hypothèses Cibles Personas Atelier d’idéation User flow Wireframe Test utilisateur et itérations 1 Moodboard Design system Iconographie Maquette Prototype Test utilisateur et itérations 2 Skills dans le futur
01
Intro
Aujourdhui, nous sortons d’un confinement total, où bon nombre de personnes se sont retrouvées confinées avec enfin du temps devant elles et l’occasion de se former.
Phase de recherches
02
Brief
Les offres pour se former en ligne sont aujourd’hui nombreuses et variées. Mais peu proposent des formations personnelles gratuites telles que la photographie, le dessin, la céramique, la poterie etc. Les utilisateurs sont obligés d’aller rechercher ces formations sur différents supports : youtube, instagram, etc.
02
Brief Besoins
Avoir accès à une source de formation
Pouvoir s’organiser et gérer son planning de formation
Se former n’importe où quand, gratuitement
02
Brief ProblĂŠmatique
Comment former des utilisateurs Ă des hobbies ludiques et culturels via une application?
02
Brief Solution
L’application SKILLS répondra à ce besoin, en proposant aux utilisateurs des formations artistiques, ludiques et gratuites proposées par d’autres utilisateurs passionnés.
03
Etude documentaire Chiffres
Diverses applications existent pour aider à la formation professionelle. Je m’en suis inspirée pour développer SKILLS, une application simple et intuitive pour se former de façon ludique.
03
Etude documentaire Chiffres formation profesionnelle 72%
92%
des Francais pensent que la formation est utile professionnellement
La formation est vue comme efficace en particulier pour acquérir de nouvelles compétences professionnellement
des Francais ont déjà suivi ou suivent une formation
69%
des Français ont une bonne image de la formation
03
Etude documentaire Chiffres formation plaisir 21%
des 18-24 ans et
17% des cadres, ont suivi une formation pour le plaisir
48%
des Français utilisent ce terme, pour la formation en entreprise seulement
24%
des Français pensent que l’avenir de la formation est en distanciel
Pour les Français, la notion de formation renvoie avant tout à l’univers des salariés en entreprise.
03
Etude documentaire Questionnaire
10%
8,3
%
J’ai pu créer mon persona grâce aux véritables données que j’ai récoltés via le questionnaire sur les habitudes des utilisateurs en matière de formation professionnelle et personelle
03
Etude documentaire Synthèse questionnaire
Age 26,7%
CSP 8,3%
8,3%
30%
10% 11,7%
10% 20%
11,7% 38,3%
35,7%
Moins de 25 ans Entre 25 et 30 ans Entre 31 et 36 ans Entre 37 et 41 ans Plus de 42
Etudiant
Agriculteur
Artisan
Sans emploi
Cadre
Intermittent
Employé
Profession libérale
03
Etude documentaire Synthèse questionnaire
Dèjà suivi une formation 47,5%
Pour quelles raisons
Accroitre mes connaissances
77,4 %
Découvrir d’autres domaines 14,8%
25,8 % 22,6 %
Pour l’ouverture d’esprit 37,7%
Moins de 25 ans Entre 25 et 30 ans Entre 31 et 36 ans
Par curiosité
25,8 %
J’aime apprendre
41,9 %
Enrichir mon cv
41,9 %
Préparation à des concours
3,2 %
03
Etude documentaire Synthèse questionnaire
As tu envie de suivre une formation sur ton temps libre ?
Combien de temps aurais-tu à lui consacrer ?
29%
99,9% 22,6%
12,9% 19,4%
Oui
1 h/jour
Non
2 h/jour 30 m/jour Pas le temps Journée compléte
1 h/ semaine 2 h/ semaine 4h/ semaine Le week end
03
Etude documentaire Synthèse questionnaire
35,7%
29%
2h / semaine
- 25 ans
83,9% Parcours
96,9% Formation
51,6% Collaborer
03
Etude documentaire Benchmark & audit
Je vais essayer d’analyser la concurrence, leurs notes sur l’App Store et Google play store ainsi que leurs fonctionnalités.
03
Etude documentaire Benchmark & audit
Lien vers le benchmark
03
Etude documentaire Benchmark & audit
18/40
33/40
23/40
26/40
03
Udemy Etude documentaire Benchmark & audit Rappel d’apprentissage
Partager cours
Devenir formateur
03
Tuto.com Etude documentaire Benchmark & audit
Onboarding
Notation et avis cours
Inscription obligatoire pour visualiser le contenu
03
Openclassrooms Etude documentaire Benchmark & audit Sommaire programme
Tableau de Bord CompĂŠtences acquises
03
Fun-mooc Etude documentaire Benchmark & audit
Planning & Infos Formation
Surcharge cogintive
Recherche avec Filtres
04
Hypothèses
• Je crois que les utilisateurs ont envie de se former mais ne disposent pas du budget nécessaire. • Je crois que les utilisateurs ont besoin de formations courtes, à la carte avec des parcours personalisés et un mentor pour les guider. • Je crois que ma cible veut avoir un ressenti sur le temps de travail que la formation va lui demander. • Je crois qu’avoir un rappel d’apprentissage personnalisable et modifiable pourra aider la cible à s’organiser. • Je crois que les utilisateurs veulent collaborer et s’entraider dans leurs différentes formations.
05
Cibles Cœur de cible
Salariés Entre 30 et 35 ans Connectés Souhaitant se former encore
Cible principale
Etudiants Entre 25 et 30 ans Très connectés Ayant déjà eu des formations
Médias et blog dédiés à la formation et a l’éducation Influenceurs
Cibles secondaires
06
Personas CĹ“ur de cible
06
Personas Cible principale
Phase de production
07
Atelier d’idéation Méthodologie
Se tenant pendant le confinement, les ateliers d’idéations ont étés fait en visio, avec des outils comme Zoom et Mural.
Mural Zoom
1h20
4 users
07
Atelier d’idéation Icebreaker
Pour l’icebreaker, j’ai proposé à un groupe d’utilisateurs représentatif de la cible, de faire un nuage de mots autour du thème de la formation, Cela a permis de détendre les participants, et de les «mettre dans le bain».
Lien vers l’ice breaker
07
Atelier d’idéation Atelier de priorisation
Pour prioriser les fonctionnalités voulues pour l’application Skills, j’ai mis en place un atelier d’idéation, le MoSCoW, avec un groupe représentatif de la cible.
07
Atelier d’idéation Le MoSCow
J’ai demandé aux particpants de répartir des fonctionnalités parmi les quatres catégories de la méthode MoSCoW : • M - Must have this : Il s’agit véritablement des points critiques qui doivent êtres traités en priorité. • S - Should have this : ces points apportent une vraie valeur ajoutée et/ou leur importance contribue à l’atteinte des objectifs. • C - Could have this : Ces point peuvent être retirés des priorités si des choix doivent être faits. • W - Won’t have : Ils sont exclus du projet, mais font partie des points qui restent dans les cartons pour un traitement ou une intégration ultérieure.
07
Atelier d’idéation Methodologie Moscow Fonctionnalités qui pourraient être faites
Fonctionnalités Indispensables Fonctionnalités qui devraient etre faites
Fonctionnalités à venir en V2, V3
Liste des fonctionalités
07
Atelier d’idéation Analyse
07
Atelier d’idéation Résultats
Voila la répartition des fonctionnalités par catégories, faite par les participants 1/ Les indispensables ( Must have ): • Tableau de bord • Tchat • Sommaire et chapitres • Notation et avis sur cours 2/ Celles qui devraient êtrez faites ( Should have ) : • Recherche avec filtres • Création de compte • Mettre en favoris • Télécharger les modules
07
Atelier d’idéation Résultats
3/ Celles qui pourraient être faites ( could have) : • Devenir formateur • Accès à des sites marchands • Programmation d’un cours dans un agenda • Partager cours • Prévisualisation d’un cours en vidéo 4/ A faire plus tard (wont have) : • Marque page vidéo • Rappel d’heure d’apprentissage Lien vers l’atelier d’idéation
08
User flow
L’user flow est un chemin à parcourir et des actions à mener par un utilisateur à travers une application. Ce type de parcours permet d’optimiser l’expérience et les trajets clés utilisateurs.
08
User flow
J’ai crée plusieurs Userflows pour Skills tels que : •Mettre en Favori •Contacter un MentoR •Mettre en favori •Télécharger un cours etc Lien vers les userfow Vous trouverez dans la page suivante l’user flow « chercher un cours»
08
LĂŠgende Start / end
Process
Questions
Interactions
User flow Rechercher un cours
09
Wireframe
Les wireframes sont le squelette de l’application, ils permettent de placer les éléments et le contenu sans s’occuper du design. L’avantage est de pouvoir modifier l’application rapidement.
09
Wireframe
09
Wireframe
09
Wireframe
09
Wireframe
09
Wireframe
09
Wireframe
09
Wireframe
Prototype wireframe
Ecrans wireframe
Test utilisateur & itĂŠration 1
10
Test utilisateur & itération 1 Pannel d’utilisateurs
J’ai demandé à un panel d’utilisateurs de tester le prototype du wireframe. Certains font partie de mon cœur de cible, d’autres, ma cible principale.
Léa
Celine
Elodie
Andréa
Jennifer
Melissa
10
Test utilisateur & itération 1 Scénario
Durée du test 48 min
C’est le week end, il pleut, tu es chez toi et tu trouves enfin le temps de chercher une formation en ligne. Tu a entendu parler d’une nouvelle application qui propose des cours gratuit de formations , tu es prêt à l’essayer. Parcours 1 : Cherche un cours de poterie pour débutants (en utilisant les filtres) Pacours 2 : Tu as une question, tu as besoin de contacter un mentor Parcours 3 : Note le cours de poterie que tu viens de visionner Guide d’entretien
10
Parcours 1 Chercher un cours de poterie (en utilisant les filtres)
5
6
Utilisateurs
Problèmes rencontrés : - Pas de niveau « intermédiaire » parmi les filtres - Le filtre débutant n’est pas cliquable - Le titre de la catégorie « Les bases de la poterie » porte à confusion avec le cours de « Poterie pour débutants »
Verbatims « J’aurais bien aimé avoir un tag pour le niveau intermédiaire » « Je voudrais cliquer sur débutant » Avant
Après
10
Parcours 1 Chercher un cours de poterie (en utilisant les filtres)
3
6
Utilisateurs
Problèmes rencontrés : - Le Bouton « Commencer le cours » n’est pas assez visible - Le volet sommaire ne peut pas se fermer - On ne voit pas la note du cours sur la page
Verbatims « Je ne vois pas la note sur le cours lui même» « Pas moyen de fermer le petit volet » « Le bouton « commencer le cours, n’est pas assez visible »
Avant
Après
10
Parcours 2 Contacter un Mentor
2
6
Utilisateurs
Problèmes rencontrés : - Le Bouton « Contacter mentor» n’est pas assez visible - La dispositions des onglets ; Sommaire/cours et progrès perturbe lors du défilement
Verbatims « Ah je n’ai pas vu le bouton « Contacter mentor » « Ca me perturbe, je m’attendais à ce que le mot ne bouge pas de son onglet »
Avant
Après
10
Parcours 3 Donner une note au cours
6
6
Utilisateurs
Problèmes rencontrés : - Les 6 utilisateurs testés s’attendaient à pouvoir noter le cours à la fin de celui-ci et non en allant sur le profil comme je l’avais conçu. J’ai donc retravaillé le parcours, pour pouvoir noter le cours à la fin.
Verbatims « Je suis un peu coincée» « Je ne vois pas bien comment noter mon cours » « Je m’attendais à pouvoir le noter sur la page cours et pas dans mon profil »
Avant
Après
10
Evaluation de la plateforme SUS Evaluer les wireframes
Le System Usability Scale (SUS) est un questionnaire normalisé simple et rapide, composé de 10 questions, et qui a pour objectif de déterminer le niveau de satisfaction des utilisateurs d’un service. SUS ( System usability Scale)
1= Pas du tout d’accord 5 = Tout à fait d’accord
1 2 3 45 1. Je pense que j’aimerais utiliser fréquemment ce système 2. J’ai trouvé ce système inutilement complexe 3. J’ai trouvé ce système facile à utiliser 4. Je pense que j’aurais besoin du support technique pour être capable d’utiliser ce système 5. J’ai trouvé que les différentes fonctions de ce système étaient bien intégrées 6. J’ai trouvé qu’il y avait trop d’incohérence dans ce système 7. Je pense que ce système sera facile à apprendre pour beaucoup de personnes 8. J’ai trouvé ce système très contraignant à utiliser 9. Je me suis senti(e) en confiance lorsque j’ai utilisé ce système 10. J’ai dû apprendre beaucoup de choses avant de me sentir familiarisé(e) avec ce système
10
Score SUS Score
J’ai demandé aux utilisateurs de cette première itération, de noter Skills. L’application à obtenu un score de :
85/100
Lien vers le score SUS 1
10
Prototype wireframe Après 1ere itération
La phase de prototypage consiste à animer la maquette graphique. C’est-à-dire à rendre cliquable certaines parties de l’écran pour simuler une interface codée. Vous trouverez le lien du prototype du wireframe ci-dessous. Prototype wireframe
11
Moodboard
La nunito , sans serif, est une linéale géométrique, modérée par des rondeurs, elle est aussi optimisée pour le web.
Des couleurs vives, et dynamiques qui correspondent aux attentes d’une cible connectée et plutôt jeune.
Des illustrations qui injecte de l’humanité, et qui ont un aspect ludique.
12
Design system
Typographie
Couleurs
Boutons
Iconographie
13
Iconographie
14
Maquette
Maquettes jpeg
Test utilisateur & itĂŠration 2
15
Test utilisateur & itération 2 Scénario
Durée du test 40 mn
Aprés avoir itérer une premiere fois sur les wireframe, je propose à des utilisateurs de tester le prototype de l’application avec le design final. Le but ici est de refaire tester les pages qui ont été modifiées lors du premier test.
15
Parcours 1 Chercher un cours de poterie
3
5
Utilisateurs
Problèmes rencontrés : - 2 utilisateurs, ont étés perturbés par les mots «Recherches populaires», alors qu’ils pensaient obtenir des filtres - Les filtres de niveaux doivent êtres rassemblés côte à côte.
Verbatims « Je m’attendais à voir des filtres, mais là je ne vois que Recherches Populaires » « Pourquoi les filtres niveaux ne sont pas ensemble ? » Avant
Après
15
Parcours 2 Contacter un Mentor
2
5
Utilisateurs
Problèmes rencontrés : - Les utilisateurs ont exprimé leurs étonnements face aux deux textes «Je réponds aux demandes de» et «Adèle a dèjà aidé sur» et trouve qu’ils sont redondant et répétitifs. - Ils ont aussi trouvés le texte de présentation pas assez visible.
Verbatims « Je pense que c’est la même info, ça se repète un peu » «Le texte n’est pas assez visible et contrasté» Avant
Après
15
Parcours 3 Donner une note au cours
2
5
Utilisateurs
Problèmes rencontrés : - Problème d’accessibilité sur les drapeaux «Populaires» avec du texte blanc sur le fond vert. - Les utilisateurs ont émis le souhait de noter le cours directement sur la page de visionnage.
«Je ne vois pas bien, ce qui est écrit dans le petit drapeau» « Je voudrais noter directement sur le cours, ce n’est pas possible ? » Avant
Après
15
Score SUS itération 2 Score
Pour cette deuxième itération, j’ai demandé à mes utilisateurs de noter Skills, et l’application à obtenu un score de :
86,6/100
Lien vers le score SUS 2
16
Prototype
En me basant sur les résultats des deux tests utilisateurs, j’ai fait des modifications pour améliorer l’expérience de l‘application Skills. Vous trouverez le lien du prototype final ci-dessous.
Lien vers prototype final
Skills dans le futur
17
Skills dans le futur
Il reste encore beaucoup de possibilités d’implémentations de nouvelles fonctionnalités pour la V2 de Skills, qui feront l’object de nouvelles analyses et itérations avant d’êtres développées, parmi lesquelles :
Programmation d’un cours dans un agenda
Prévisulisation en vidéo du cours
Accès à des sites marchands
Devenir formateur
Partager cours
Merci