Case-study

L'avancée pas à pas

Commencement

Ce site web, Vers le Vert, fait partie de mon projet de TFA lors de ma 2ème année de supérieure à l' HEAJ infographie de Namur en option DWM.

Rencontres

Nous avons débutés cet atelier le 26 février 2021. Pour l'occasion, nous avons eu la chance de rencontrer de nombreux professeurs qui nous ont accompagnés durant ce travail. Ils nous ont partagés leurs connaissances afin de rendre cet exercice attrayant et ludique.

MVP, erreurs de parcours, pivots, analyses, etc. Voici différentes notions explorées par les différents cadres durant les cours. Celles-ci sont importantes car elles représentent des points clefs à l'avancement de notre projet !

Thème et idée

Lorsqu'on a tout d'abord du choisir un thème et une idée de TFA, j'ai directement choisi l'écologie. Il s'agit d'un des sujets les plus importants pour moi et auxquels je réfléchis à chaque instant ! En effet, respecter l'environnement et me préoccuper du bien-être de notre planète fait partie de mes valeurs les plus importantes.

En outre, le timing de ce domaine est parfait car l'écologie est de plus en plus présente en ancrée dans notre quotidien ! Il s'agit d'une cause vitale, impactant notre survie, nous touchant tous, devant impérativement être mise sous les feux des projecteurs.

un père et son fils plantant un arbre en souriant

Analyse du sujet

Diverses méthodes ont été utilisées afin d'analyser le thème choisi.

Tout d'abord, j'ai déterminé les clients potentiels : il s'agirait en général de personnes souhaitant améliorer leur comportement vis-à-vis de l'écologie et qui aimeraient en savoir plus. J'ai également analysé le marché, comme dit précedemment, qui est de plus en plus demandeur.

Ensuite, j'ai recherché quelques services pronant l'écologie. Il y avait autant des moteurs de recherche semblables au célèbre Ecosia, des sites web comme Ca Commence Par Moi ou bien des chaines Youtube tels que Et Tout Le Monde S'en Fout . Cependant, après réflection, j'ai décidé de ne pas les considérer comme des concurrents mais plutôt des alliés. En effet, c'est dans un domaine tel que l'écologie où tout le monde doit se serrer les coudes et s'entraider ! J'ai donc décidé d'amener ma pierre à l'édifice.

3 'concurrents' à Vers le Vert : Et Tout Le Monde S'en Fout, Ecosia et Ca Commence Par Moi

Première idée concrète

Mon projet est un site web répertoriant des solutions pour améliorer son comportement écologique. Cette idée a été ma première et a évoluée au fil du temps.

Je voulais qu'elle réponde aux problèmes environnementaux actuels, quelle informe l'utilisateur, lui donne des solutions, le défie, le guide, afin qu'autant l'environnement que lui soient plus heureux !

Même s'il était trop tôt pour aborder cela, quelques fonctionnalités pratiques me sont venues à l'idée : un résumé d'explication, une rubrique conseils/témoignages ainsi que des défis. En effet, dans la vie de tous les jours, j'entends des gens se plaindre, disant qu'ils ne sont pas motivés. J'ai donc voulu instaurer un processus de défis afin de les stimuler.

Trois rubriques ont cependant disparues par manque de temps : les filtres, la FAQ et la possibilité aux utilisateurs d'écrire leur propre article. Si les deux premières ont intéressés les testeurs de mon mvp, la dernière les a divisé. A l'avenir, j'approfondirai ces trois fonctionnalités à travers plusieurs tests utilisateurs. J'intègrerai les différents points pour lequels je n'ai pas eu assez de temps (les EXP, les messages encourageants, le changement de langue, etc.)

Premiers retours

Afin de voir si mon projet était réalisable, j'ai réalisé un premier questionnaire. 24 personnes ont bien voulu y répondre. Grâce à leurs retours, j'ai réalisé des graphiques concluant que mon projet était viable. Cependant, je pense personnellement que pour arriver à la meilleure version possible, cela va prendre encore beaucoup de temps pour trouver la bonne UX, les meilleurs fonctionnalités possibles.

graphiques reprenant les retours du 1er questionnaire

Hypothèse et MVP

Une fois le projet déclaré viable, j'ai donc rédigé l'hypothèse de cet atelier :

Je crois qu'un site répertoriant des solutions écologiques va produire un intérêt de la part d'autrui vis-à-vis de l'environnement et je saurai que cela se vérifie si au moins 5 testeurs de mon prototype agréent en son potentiel.

Idées noires

Avec cette hypothèse de faite, il ne me restais plus qu'à débuter le prototype !

Mais cela ne s'est pas vraiment passé comme prévu. En effet, la période de Corona semblant infinie, j'ai commencé à avoir de l'anxieté et à être totalement inerte. Je ne faisais plus rien, j'étais complêtement perdue. Je n'avais plus aucune motivation. Je ne savais même pas si j'allais continuer mes études. Cependant, les 2 jours que nous avons eu à l'école m'ont grandement remontés le moral ! Voir du monde m'a permis de me sentir plus en sécurité et m'a redonné du courage pour continuer mon travail.

personne désespérée

1er prototype

Avec mes premières idées, j'ai réalisé un 1er prototype. Grâce à celui-ci, j'ai demandé des premiers retours. Les remarques générales étaient surtout des problèmes de design (tels que la présente d'ombres portées), avoir un meilleur agencement des images, une meilleure hiérarchie de typo, etc. Les 5 personnes ayant répondu ont toutes validé ce 1er prototype et étaient enthousiastes quant à un potentiel futur !

1er prototype Invision de Vers le Vert

Pile à l'heure !

Malgré ma grande anxiété constante durant 3 semaines consécutives, j'ai réussi à rendre une 1ère version corrigée à temps pour la phase 1 (en plus d'une landing page et de slides). Après la présentation en présentiel devant le jury, les profs nous ont donnés leurs retours.

2ème prototype Invision de Vers le Vert

Dernière ligne droite !

Encore une fois, ce redondant malaise réapparaissait lorsqu'il ne le fallait pas, m'empêchant de travailler sans me sentir extrêmement mal. Mais, encore une fois, le soutien des élèves et des profs m'a beaucoup aidé.

J'ai alors pu réalisé deux user-journey. Chacun abordait une problématique : la barrière de la langue et la déficiente visuelle. A l'avenir, j'aimerais chercher encore plusieurs cas similaires afin d'améliorer mon projet le plus possible.

Après les user-journey, j'ai corrigé mon MVP avec l'aide des retours des professeurs. Les changements majeurs de cette 3ème version sont principalement au niveau du design (images, mise en page, couleurs, gestalt). J'ai également opté pour un nom de domaine plus simple. En effet, même si la réflexion du nom Litz m'a semblé pertinente, elle est moins facile à comprendre et intuitive que le simple jeu de mot : Vers le Vert !

J'ai ensuite modifié tout ce qu'il fallait sur la landing page afin d'être prête pour la phase finale...

3ème prototype Invision de Vers le Vert

Dernière chance

Dès le mois de Juin, j'ai continué à améliorer mon travail grâce aux retours des profs. J'ai regroupé les commentaires Google Sheet des 2 phases ainsi que les conseils donnés oralement suite aux 2 présentations à l'école et en ai fait une grande synthèse. Afin de m'accorder toutes les chances, j'ai essayer de répondre au mieux à toutes les améliorations listées.

Bonne nomenclature, design calibré, documents d’explication ajoutés, les plus grands changements ont surtout été au niveau du CSS. Je me suis renseignée sur Internet afin de comprendre la méthode BEM au mieux et l’ai utilisée afin de nommer les class du site. Cela m’a permis de passer à l’étape suivante : le responsive. En effet, j’ai revu le redimensionnement de toutes les pages du site afin que ce soit décent. Enfin, contrairement à toutes les remises précédentes, j’ai codé le design de ce site en SASS et à l'aide de Gulp. Les abbréviations SASS & étaient pratiques pour structurer le document scss.

Cette partie laborieuse étant terminée, j'ai conclu en réalisant 3 tests utilisateurs afin de finaliser ce travail.

Après avoir monté les vidéos, je les ai analysées afin d'en tirer des conclusions. Pour ce faire, j'ai créé un article Medium synthéthisant la procédure.

Si les retours étaient positifs, une des testeurs m'a conseillé de revoir l'UI des défis (comme déjà demandé par un des professeurs originellement). Elle m'a expliqué son idée de design et je l'ai appliqué dans une dernière version du prototype de Vers le Vert.

Une fois cela terminé, je n'ai plus eu qu'à ajouter mon cheminement sur ce site et vérifier que tout fonctionnait bien pour l'ultime remise.

Améliorations principales faites : BEM, Resize et SASS Défis du prototype de Vers le Vert améliorés