décoration avec la lune

Case-Study

Le TFA

Cette année n’est pas une année comme les autres. Bien au contraire, face au Covid-19, nous sommes obligés de rester chez nous ce qui signifie :

Juste toi face à ton ordinateur…

Montre la terre & covid
Nuage

Avant tout ça

Cette année, en plus de faire notre TFA chez nous, on doit incorporer un service dans notre application ou site internet. Il a fallu trouver un sujet pour la réalisation de notre projet. Pour avoir plus facile, nos professeurs nous ont demandés de dresser une liste de 10 thématiques.

Le verdict des professeurs tombe et… Ils se sont tous mis d’accord pour que mon sujet de cette année soit : Paranormal : Les esprits.

Nuage

Avis extérieurs

En ce moment c’était compliqué d’aller demander des avis en face à face avec d’autres personnes. J’ai donc réalisé un formulaire pour pouvoir récolter des informations. J’ai attendu quelques jours pour obtenir un maximum des réponses.

Toutes les réponses récoltées et analysées, je passe à l’écriture de mon contenu.

User Journey

Une fois mon contenu rédigé et corrigé, j’imagine des situations auxquelles les utilisateurs pourraient être confronté à visiter mon site :

Freddy

Alors Freddy est un garçon plutôt normal, avec une vie bien tranquille, il travaille dans une compagnie de communication et vit avec sa tendre épouse Rosalie dans leurs maison. Malheureusement, Freddy a déjà entendu des bruits suspects dans sa maison, des bruits pas très rassurants. À cause des films d’horreur, documentaires et encore bien d’autres, avec les années, il a développé cette peur pour les fantômes. Un soir, après avoir entendu des bruits suspects, Freddy commence à faire des recherches sur internet sur les fantômes, esprits, etc… En essayant de trouver des solutions pour soulager son imagination. Freddy tombe sur mon site d’explication. Tout de suite, Freddy se rend compte que c’est un site qui explique ce que sont réellement toutes ces choses et qu’il ne faut pas en avoir peur. Au fur et à mesure de la lecture du site, Freddy se rend compte qu’il faut répondre à des questions. Vers la fin de la lecture, Freddy comprend vite certaines choses et est agréablement surpris par la solution proposé à la fin du site. Soulagé par tous ses bons conseils, il est désormais mieux dans ses baskets et est plus serein quand il entend des bruits anormaux chez lui.

Nuage

Coralie

Coralie est une femme très terre à terre. Elle ne croit que ce qu'elle voit. Forcément, pour elle, tout ce qui porte sur le paranormal, elle n'y croit absolument pas. Comme toutes personnes curieuse, Coralie, en traînant sur les réseaux sociaux, tombe sur une publication qui lui donne envie d'en savoir plus. Bien sûr il s'agit de mon site sur les esprits. Elle clique sur le lien et commence à lire. Elle découvre cet univers totalement inconnu pour elle, fantômes, esprits, bruits douteux et j'en passe… Au début, Coralie, reste sur ses gardes, elle n'y croit pas mais en apprend quand même sur ce sujet. Pendant sa lecture, elle tombe sur des questions, elle y répond, sans trop de conviction et à la fin du site, celui-ci lui dit tout simplement qu’elle n’y croit pas et que ce n’est pas quelque chose de mal. D’accord avec le résultat final, Coralie quitte le site en ayant appris quelques petites choses mais les oubliera vite.

Nuage

Maxime

Maxime travaille comme garde du corps dans les magasins de luxe. Il paraît être quelqu’un de normal, mais cache un secret. Ce secret est qu’il a développé une peur phobique sur les fantômes. Il est totalement fermé d’esprit à ce sujet et ne veut pas en entendre parler, car ça l'effraie beaucoup trop. Durant une soirée entre amis, le sujet qui fait peur tombe. Personne ne sait que Maxime en a très peur, donc tous ses amis en parlent comme s’il s’agissait de la pluie et du beau temps. Voyant que Maxime pâlissait de plus en plus, une de ses amies vient vers lui en demandant si tout allait bien. Malheureusement, Maxime fût obligé de révéler son secret. Après cette « grande » révélation, son amie lui parle d’un site qui pourrait l’aider à le rassurer sur les esprits. Le lendemain, après sa journée de boulot, Maxime regarde sur son téléphone le site que son amie lui a conseillé la veille. Plus sa lecture avance, plus il se sent soulager. A sa grande surprise, le site lui propose une solution pour son bien être. Après avoir éteint son téléphone, Maxime est content d’en avoir appris plus sur le sujet mais ça ne fera pas disparaître sa peur à 100%.

Un prototype ?

Hé oui, il n’y a pas que sur Adobe XD que je met en place mes idées, je dessine avant toute chose ! Quelque chose me donne de l’inspiration et vite je griffonne ce que j’ai dans la tête. Voici mes prototypes papiers :

Nuage

But du site

J’ai voulu donner à mon site un côté informatif mais aussi un côté neutre. Souvent quand on va sur des sites à propos de ce sujet, on tombe sur des images à glacer le sang et je ne veux pas que l'utilisateur ai cette peur. Je veux que mon site transmette à l'utilisateur ce message de neutralité et qu’après la lecture du site, qu'il en déduise que les phénomènes paranormaux ne sont pas que des mauvaises choses.

Pour ce qui est du site, j’ai fait une navigation toute simple. En voici un aperçu :

Navigation design

Un bref aperçu de l'architecture des informations.

Les détails

La typographie

Pour la typographie j’ai pris la police de caractère « Lato » pour le texte courant, pour les titres et sous-titres j’ai pris la police de caractère « Noto Serif » .

J’ai choisi la « Noto Serif » , car je voulais garder des empattements pour mes titres et sous-titres pour rappeler que mon sujet existe depuis la nuit des temps. Comme on le sait tous, les empattements viennent de la trace laissé par l’outil (plume, pinceau, etc…) lorsque la main s'élève en achevant le geste d'écriture. Il y a une autre particularité avec cette police de caractère, elle rend le web plus beau. Oui tu as bien lu « plus beau » . Mais pourquoi ? Pour la simple et bonne raison que le web sait lire tous les caractères de cette police sans laisser de carré d'incompréhension.

Pour finir, la « Lato » est une police de caractère sans empattement. Je l’ai donc mis pour mes textes courants pour faire ainsi un contraste.

Nuage

Les couleurs

Les couleurs ont été simple à choisir. Pourquoi ? Car on ne trouve pas de couleur dans ce domaine là…. Pour les nuances de gris, j’ai fait attention pour que le contraste soit bien réalisé et que ça reste lisible / visible (le fond en gris et la police en noir).

Couleur

Le petit plus, j’ai ajouté la couleur violette pour les questions ainsi que pour la solution proposée à la fin. Pourquoi le violet ? Cette couleur signifie :

Nuage

Code

Go pour la partie la plus drôle. Avec les erreurs aussi stupides les unes que les autres, un élément qui ne veut pas se placer… J’ai été agréablement surprise qu’au final, tout a roulé, sans trop de complication et des petits soucis vites réglés.

Nuage

Mot de la fin ?

Un projet s’achève… C’est émouvant quand même, vous ne trouvez pas ?

J’aimerais remercier mes camarades de « discord » 

et toutes les personnes qui ont aidé à l’évolution de ce projet. Cela concerne, entre autre, les feedbacks donnés par les professeurs, les conseils, les avis et critiques constructives que j’ai pu recevoir.