Sarah Leclerc

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