Case-study

Ici regroupe toutes les étapes de la réalisation de mon projet TFA 2019-2020 en design web & mobile de l’HEAJ. Il s’agit du prototype de site que j’ai crée où je retrace les solutions que j’ai trouvé. Ainsi que l’état du système actuel grâce à un sondage que j’ai réalisé autour de la problématique de l’orientation des études.

Avant de commencer ce (très long) case-study, vous pouvez accéder aux « liens utiles » pour avoir directement tous les liens que vous pourriez rechercher (markdowns, test utilisateur, modules, ...). Ceci histoire que vous puissiez rechercher plus facilement ce que vous souhaitez.

Les premiers pas

Les premières informations que nous avons reçu sur le projet TFA était au courant du début du deuxième quadrimestre. Cela s’en est suivi d’une longue présentation de nos différents professeurs nous expliquant ce que nous devions réaliser, comment les réaliser et par quoi commencer. J’étais très motivé dès le départ.

Ils nous ont bien expliqué que malgré le fait qu’il s’agisse d’un TFA, il s’agit principalement d’un petit projet utile, nous devions partir sur cette idéologie pour pouvoir choisir un thème qui nous plait et que l’on trouve pertinent. Malgré ça j’étais un peu perdu sur le côté « utile » de la chose. Mais cela allait s’éclaircir à l’avenir.

Les premiers esquisses des thèmes

Les jours qui ont suivi nous avons principalement essayé de choisir notre thème. Et pour cela nous avons pratiqué différentes étapes en se posant à soi-même certaines questions comme :

• choisir 10 besoins qu’on ne pourra pas vivre sans
• décomposer les thèmes pour des problématiques
• trouver des problèmes à résoudre
• Élargir les étapes précédentes
• Choisir un thème et une question qui s’y raccorde

Honnêtement, cela n’était pas de tout repos ! On devait constamment se creuser la tête pour pouvoir trouver des idées qui puissent nous plaire et qui sortent au moins un minimum de l’ordinaire.

Direction et confinement

J’ai choisi comme thème l’orientation des études. Je voulais expliquer le point de vue de la population sur le système actuel, en précisant les qualités et les défauts qu’il a. Cela me permet à la fois d’expliquer que changer d’orientation n’est pas du tout une mauvaise chose. Bien au contraire !

Nous devions maintenant procéder par étape pour que nous puissions bien avancer pertinemment et avoir une bonne analyse. Pour analyser des données, il me fallait des volontaires. Mais seul soucis, je souhaitais faire ça en interview mais c'était malheureusement pas possible. A cause du confinement, nous n’avions plus beaucoup de moyen de récupérer des informations et c’est pour cela qu’une large partie des étudiants s’est tournés vers des sondage. Cela permet d'avoir directement des graphiques précis.

Récolte et recherche

Pour être sûr de pas me perdre, j'ai fais les 5 W. Il s’agit ici d’expliquer avec what, who, when, where, why notre thème et notre direction. Cela permet directement de cibler toutes les informations nécessaires pour sa compréhension. Dans mon cas voici l’ordre :

• what : Le système scolaire est-il adapté au choix de sa filière
• who : Les élèves
• when : durant les études
• where : l’école, le travail
• why : Pour faire quelque chose qu’on aime et nous motive

Je me suis après interessé sur tout ce que les utilisateurs pourraient avoir besoin/envie d’accomplir. J'ai donc effectué plusieurs approches complémentaires dans le but de choisir dans le sens dont je vais se diriger

Votre avis, je le veux

Certes faire un sondage n’était pas la méthode que j’aurai souhaité employé mais même si le confinement l’oblige il s’agissait ici de la manière la plus large pour récolter des retours. Et des retours plus j’en avais mieux c’était.

Etant donné que l’orientation des études est un sujet très large qui touche presque la totalité des gens, mon sondage s’est partagé de très nombreuses fois et à tel point que j’ai pu avoir le retour de plus de 300 personnes ! Les réponses sont disponibles à la lecture. C’était plus que ce que j’aurai imaginé mais avec le recul j’ai compris qu’il était primordial d’en avoir autant. Vous pouvez avoir accès au sondage si vous le souhaitez.

Pour rédiger les questions d’une manière pertinente, j’ai demandé de l’aide à un proche qui est spécialisé dans le domaine académique. Et je me suis aussi informé d’un livre d’Erika Hall qui a été conseillé par un de nos professeurs. N’ayant pas le temps ni l’argent pour l’avoir, je me suis directement informé sur 3e chapitre qui m’intéressait le plus et qui concerne l’analyse des données.

Présupposition et topTask

Vu que mon texte va principalement visé les jeunes adolescents, voici les différents points que je compte aborder et qui vont me permettre d’en tirer des solutions :

• L’orientation est une mauvaise chose ? Expliquer les raisons pour lesquelles changer d’orientation n’est pas une mauvaise chose et que cela peut être une vraie source bénéfique pour l’utilisateur
• Des problèmes dans le système scolaire ? Détailler les problèmes du système scolaire actuel. les potentiels changement à faire pour qu’une majorité de la population ait plus de facilité pour son orientation que ça soit en secondaire ou en supérieur
• Ne pas savoir vers qui se diriger quand nous sommes perdus ? Détailler les différents aides possible et comment s’y prendre pour qu’ils nous soit bénéfiques
• Besoin de conseils car nous ne savons pas quoi faire ? Expliquer les conseils / erreurs à éviter par des personnes ayant déjà eu une expérience dans les études ou professionnels qui nous explique sur quoi faire attention durant nos choix

Chacune de ces étapes sont pour moi primordial et pour détailler et travailler sur cela pertinemment je vais utiliser la magie des données. Chacun de ses toptask va correspondre à une page de mon prototype que nous détaillerons un peu plus tard. J'ai donc avec tout ceci pu trier, et tirer des réponses du sondonge que vous pouvez retrouver ici. C'est en grande partie sur ça que je me base pour l'écriture de mon texte et de mes solutions disponible sur mon prototype.

Rédaction et pertinence

Venons maintenant au point clef qui décrit mes solutions : La rédaction. Pour commencer je me suis posé une question « Comment trouver et rédiger une solution dans un domaine dont je ne suis pas spécialisé ». La réponse était simple : les données. C’est ici qu’avoir beaucoup de participants m’a été le plus utile car ça permettait de citer des chiffres d’une manière plus précise. Je pouvais poser une question comme « sur une échelle de 1 à 5, et partant du principe que 1 veut dire mauvais, pensez-vous que le système scolaire est correct ? » Et j'avais directement le graphique.

Une fois trié et grâce aux réponses tirées, je pouvais tirer des conclusions et adapter mon texte. Mais il s’agissait ici de beaucoup de données, donc chaque page avait comme but correspondre à une partie majeur de mes top tasks. J’en parle plus en détails dans la partie prototype du case-study. La division de l'information d'une manière fluide et correct a été une petite épreuve de reflexion. Heureusement l'avis des personnes autour de moi m'ont été d'un très grand avantage

Pour réaliser plus facilement le tout plus facilement, j'ai réalisé un markdown qui me sera utile le jour où je souhaiterai le coder. J'en ai profité pour en faire également un pour mon case-study une fois celui-ci terminé.

Voice & Tone et scénario

Pour faire les choses correctement j'ai pensé avec l'idéologie du Voice & Tone. Je parle donc en tutoyant comme si je conseillais un ami. Je peux comme ça toucher directement la personne sans paraitre pour un spécialiste. j’ai de plus réalisé un scénario où l’un adolescent cherche des conseils sur un site et s’informe sur l’orientation. C’est en faisant ceci que j’ai eu mes idées de module. Le scénario m’a permis de viser directement les moyens de générer certaines solutions et qu’il soit utile à l’utilisateur.

Réaliser le scénario m'a été plus bénéfique que dans mes projets précédents. Il permet de penser aux problèmes avant de penser aux solutions. J'ai donc pour pour cette fois-ci directement appliqué les solutions au scénario et ce, pour chaque problème qui me passait par l'esprit.

Les modules techniques

Il était important pour moi de regarder qu’est-ce qui pourrait être intéressant d’ajouter comme module. J’avais au total 3 idées avec 2 en potentielles bonus :

• Un générateur de conseil que vous pouvez essayer
• un carousel/slider très utile pour mes graphiques
• Des animations avec les svg grâce au scroll
• Lister et afficher toutes les écoles avec leur option (bonus)
• Créer une liste de scénario possibles par rapport à des choix choisis (bonus)

Au départ je comptais ajouter les 5 mais j’ai vite remarqué mon plus grand défaut durant la réalisation de ce projet : la gestion du temps. Etant à l’aise avec le javascript, j’étais parti d’un bon pied en me disant que tous les faire ne me prendrait pas très longtemps… Grosse erreur ! Plus j’avançais et plus les jours restants se réduisaient…

Parmis les 3, le plus simple était pour moi le slider car j’avais déjà créer un prototype semblables dans un précédent projet. je l’ai juste amélioré et optimisé pour ce projet-ci.

Le générateur de conseil était le plus long à faire car j’utilise un tableau JSON pour générer aléatoirement mes conseils en rapport à des checkbox. Même si je suis fier du résultat, avoir la logique pour chaque condition n’était pas de tout repos ! Les conseils sont ceux qui m’ont été donné dans mon google sheet des réponses. J’en avais plus d’une cinquantaine une fois trié. Elles sont aussi disponible si vous souhaitez les lire. Mais pour le module j'en ai mis qu'une vingtaine dans le but de montrer son fonctionnement principalement.

Concernant l’animation au scroll, je comptais en premier lieu mettre ma liste de scénario (qui est en bonus) en tant que 3e module. Mais vu mes très nombreuses illustrations svg, j’ai trouvé beaucoup plus élégant d’ajouter les animations pour rendre la lecture plus agréable.

A l’exeption du scroll qui n’est pas disponible sur mobile, ils ont tous été programmé sur tous les supports modernes. De plus, tous mes graphiques ont été créés à l’aide de Chart.js mais celui-ci ne compte pas comme un module. J’ai souhaité l’utiliser pour son style graphique et l’envie d’apprendre cet outil en plus du reste.

Vous pouvez avoir plus d'informations, ainsi que tester les modules si vous le souhaitez dans leur propre section. Je me devais maintenant de trouver un moyen ergonomique d'effectuer les différentes animations et interactions.

Des prototypes papiers

Un problème que j’ai rencontré était l’affichage du générateur de conseil. J’étais dès le début dans l’optique d’ajouter des tags et d’afficher les conseils. Mais ça c’était avéré plus difficile que prévu. J’avais au départ pensé d’une manière où je puisse avoir quelque chose d’assez semblable entre smartphone et desktop… Mais après plusieurs essaies par d’autres utilisateurs ainsi que certains retours sur mon design, ça n’allait pas vraiment ensemble…

La solution était d’abandonner l’idée de faire quelque chose de semblable entre les versions. Donc de créer un prototype différent pour chaque. Je me suis donc renseigner et demander conseils à mes professeurs pour recommencer les prototypes papiers.

Mais ce n’était pas pour autant parfait. Mes professeurs m’ont fait remarquer que dans la version mobile certains termes donnant lieu à des actions n’étaient pas correct. Ou encore qu’il manquait certaines fonctionnalités ce qui faisait que l’utilisateur devait se sentir isolé et bloqué dans l’utilisation. J’ai donc ajouter différents options de navigations et mis des flèches pour éclaircir tout cela. Un autre détail important concernant le mobile était le sens d’ouverture des pages. J’avais en premier lieu mis ma page de sélection apparaissent de bas en haut, mais ce n’était pas correct étant donné que celle d’après vient de la droite. J’ai donc adapté tout cela pour garder une bonne fluidité ainsi qu’un bon sens de lecture.

Design

Même si j’en ai parlé légèrement dans les précédents chapitres, le design n’a pas du tout été facile au début. Je l’ai recommencé plusieurs fois. Le premier problème qui est apparu était le choix des couleurs. J’ai toujours l’optique de partir sur du bleu mais cette fois-ci j’ai souhaité sortir de mes habitudes et opté pour quelque chose qui va bien avec mon thème.

Pour avoir quelque chose de correct j’ai décidé d’utiliser les différents sites à notre disposition pour pouvoir choisir mes couleurs convenablement. Mon choix s’est vite porté sur une palette qui me paraissait pertinente. Une fois dessus je l’ai appliqué tel quel mais visuellement ça n’allait pas.

Premièrement je manquais de visuel, mon gros lot de texte était très lourd pour le public que je cible, j’ai donc décidé d’ajouter un tas d’illustration pour alléger le tout et cela m’a permis de plus de les animer et d’en faire un module technique. J’ai ensuite ajouté mon vert en 5% d’opacité en fond de certaines sections pour rendre le tout plus fluide et insister sur certains points.

Je vous invite d'ailleurs à voir plus précisement chaque détail, lien, marge, police de tous mes blocks directement dans mon fichier figma.

J’ai remarqué que j’utilisais énormément ma couleur de contraste sur ces illustrations. Et ce n’était visuellement pas correct étant donné qu’il s’agit aussi de la couleur de mes boutons et mes liens. J’ai donc opté pour prendre une couleur triadique de mon vert et ce violet allait parfaitement avec mes illustrations.

Et après vérification, mon orange n’était pas assez sombre pour respecter les normes de contraste AA. J’ai donc opté à le passer en AA large tout en ayant 19 px de taille et en bold. Cela me permettait de garder une couleur clair qui contraste toujours aussi bien avec le vert tout en respectant les critères.

Media, navigation et test utilisateur

Après plusieurs versions de pages, je n'arrivais toujours pas, ou plus, à voir les problèmes de cohérence. J'ai donc demandé à mon père d'effectuer un test utilisateur pour que je puisse avoir un dernier retour. J'ai essayé de faire ça correctement en lui donnant plusieurs objectifs et avec la difficulté d'avoir plusieurs médias à la fois. Ce test utilisateur m'a surtout appris que mélanger les médias sur un prototype n'est pas une chose aisée. Il existe plusieurs moyens d'y faire face mais reussir à régler le tout sans rencontrer de problème de navigation est vraiment une chose difficile.

Après analyse de la video et l'avis d'un professeur, Le passage entre différent média dans mon prototype interactif n'était pas correct pour la version dekstop et tablette. J'en ai donc profité pour ouvrir un menu déroulant pour améliorer le passage entre medias.

Révision pour la seconde remise

Après la première remise du projet, on m'a fait part que le problème n'était toujours pas réglé. Cela posait des problèmes avec l'UX et la navigation. J'ai donc supprimé la fameuse landing page que j'avais fait pour le prototype et mis directement 3 liens pour chacun des médias. Cela aide à une meilleure compréhension de ce qu'est mon prototype.

Marge et rythme

Concernant les marges j’ai directement opté pour une irrégularité, j’ai eu quelques soucis au début sur la version tablette car j’avais justement trop de marge mais plus j’avançais plus je réussissais à optimiser le tout. Et pour finir, mon rythme vertical dans mes premières versions le tout était beaucoup trop resserré. J’avais vraiment l’impression que c’était pas clair pour la lecture et espacer le tout m’a paru très bénéfique.

Une vidéo after-effect

Concernant la vidéo, je me suis posé au départ la question « que puis-je montrer d’intéressant ? ». Je me suis dit que présenter ma fonctionnalité avec les conseils pouvaient être très pertinant. Mais cela ne suffirait pas, j’ai donc décidé d’ajouter quelques navigations pour montrer la fluidité et le design du site. Mon plus gros problème durant la réalisation était de me souvenir du fonctionnement du logiciel. Il est très complexe et je l'ai très peu utilisé. Les anciens exercies faits en cours m'ont été très utile pour palier ce problème. La video est disponible sur YouTube pour ceux qui le souhaite.

Conclusion

Nous avons finalement vu le bout du tunnel. Si au départ je pensais que j’allais très rapidement finir le projet, j’étais clairement choqué du temps total que tout cela m’a pris. Mon but était de viser le meilleur de moi-même et la précision prend du temps, beaucoup de temps. Le journal de bord mis en place par les professeurs s’est avéré très utile pour la gestion. J’ai compris durant ce projet que j’ai encore du travail à faire et beaucoup de chose à apprendre. Mais au final je n’ai jamais été si motivé à faire quelque chose. Ai-je donc finalement trouver ma bonne orientation ? Je le pense bien.