Lancement du sujet de fin d'année
Pour la réalisation de notre travail de fin d'année, nous avons eu pour thématique la conception d’un service, afin de mettre en avant nos compétences et capacités apprises tout au long de l'année. Tout cela, dans le but de trouver un stage pour l’an prochain. En premier lieu, nous devions réfléchir à des thématiques concernant des problèmes auxquels nous pouvons être confrontés. Par la suite, il a fallu définir 10 thématiques, les soumettre à nos professeurs qui ont sélectionné l’une d’entre elles, afin qu’elle constitue notre thème de TFA.
Mes 10 thématiques ont été :
- S’aimer pour pouvoir aimer les autres
- Comment maintenir sa motivation au quotidien ?
- L’addiction aux écrans dans l'ère du numérique
- Les facilités des rencontres virtuelles au réel
- Comment avoir le sens de la répartie ?
- Comment sortir de la dépendance affective ?
- Comment apprendre à relativiser?
- Comment déceler si une personne nous est nuisible ?
- Comment faire les bons choix dans notre vie quotidienne ?
- Comment créer des interactions sociales ?
La phase de recherche
Une fois ma thématique sélectionnée par mes professeurs « S’aimer pour pouvoir aimer les autres » , je me suis donc penchée sur l'amour de soi, ce qui m’a amené à élargir mon sujet vers l’estime de soi qui est un élément essentiel pour apprendre à s’aimer.
J’ai commencé par définir ce qu'était l’estime de soi :
Sentiment de valeur personnelle et d’importance en tant qu’être humain, c’est une évaluation de nous-mêmes sur nos pensées, nos sentiments, et nos expériences tout au long de la vie.
L’estime de soi est constituée de 4 axes principaux :
- Confiance en soi : Sensation intérieure de pouvoir réaliser ses désirs, ses projets, c’est avoir confiance en notre capacité à faire des choix, à s’adapter au changement et à être heureux. C’est l’aptitude à « faire » et « agir » .
- Vision de soi : C’est la représentation de soi intériorisée, elle se traduit par la caractérisation de notre identité. Cette vision peut être globale ou spécifique à différents domaines (affectif, professionnel, identité physique..).
- Acceptation de soi : L’acceptation est étroitement liée par l’amour de soi, c’est reconnaître que l’on est unique et savoir faire de nos défauts une qualité et supprimer le jugement négatif de soi.
- Amour de soi : L’amour de soi est lié à nos expériences vécues, la façon dont on nous a aimé. C’est une appréciation de soi qui doit être réaliste et non idéalisée, c’est aimer ce que l’on est et non ce que l’on souhaite être.
L'étude de cas
Après diverses recherches, j’ai découvert une échelle de l’estime de soi, développée par le sociologue et docteur Rosenberg Morris. Elle permet d'évaluer l’estime de soi en utilisant une échelle de valeur de 0 à 40 calculée à partir de 10 caractéristiques ou descriptions soumises aux interlocuteurs.
J’ai donc testé cette échelle sur une quinzaine de personnes, voici les résultats.
Ce test m'amène à conclure que l'estime de soi sur les personnes testées varie principalement de faible à fort, avec une majorité de personnes ayant une estime de soi moyenne.
Le système d'évaluation :
- Additionner les scores aux questions 1,2,4,6 et 7.
- Pour les questions 3, 5, 8, 9 et 10, la cotation est inversée, c’est-à-dire qu’il faut compter 4 si vous entourez le chiffre 1, 3 si vous entourez le chiffre 2, 2 si vous entourez le chiffre 3 et 1 si vous entourez le 4.
- Faites le total de vos points. Vous obtenez un score entre 10 et 40.
- Si le score est inférieur à 25, votre estime de soi est très faible. Un travail dans ce domaine semble souhaitable.
- Si le score est entre 25 et 31, votre estime de soi est faible. Un travail dans ce domaine serait spécifique.
- Si le score est entre 31 et 34, votre estime de soi est dans la moyenne.
- Si le score est entre 34 et 39, votre estime de soi est forte.
- Si le score est supérieur à 39, votre estime de soi est très forte et vous avez tendance à être fortement affirmé.
Le formulaire et entretien avec une professionnelle
Me voilà, recentrer ma thématique sur l’estime de soi, qui est un sujet que je trouve particulièrement intéressant à étudier. J’ai ensuite élaboré un formulaire afin d’effectuer un sondage sur l’estime de soi, voici le formulaire, les réponses et mes conclusions.
Suite à mes conclusions, j’ai donc songé pour commencer, à concevoir un site proposant des conseils ainsi que des exercices afin d'améliorer l’estime de soi.
J’ai également pris contact avec une professionnelle (Justine Tabacu) avec qui j’ai pu approfondir le sujet de l’estime de soi et des exercices existants et abordables pour l'améliorer. Voici le questionnaire et ses réponses.
Lors d’une discussion avec deux de mes professeurs, ces derniers m’ont conseillé de me pencher sur l’un des exercices suggérés par la professionnelle. J’ai donc opté pour l'exercice « ligne de vie » , que je trouve le plus intéressant à exploiter par rapport aux différents exercices proposés par la professionnelle précédemment et à mes conclusions faites du premier formulaire. L'accent sera donc mis sur les évènements de vie personnelle.
Le concept
Maintenant est venu le temps d'élaborer mon 5W(what ? Who ? Where ? When ? Why ?) afin de définir mon projet et d'élaborer le principal aspect (top task) de celui-ci.
Le 5W est : un site qui permet à l’utilisateur de créer une ligne de vie de 5 à 10 événements marquants durant sa vie, conçu pour des personnes ayant des difficultés à se sentir bien. Ce concept offre la possibilité à l’utilisateur de faire un état des lieux de sa vie, en parcourant l’histoire de ses événements, et leurs dénouements.
Le top task principal serait donc d’aider l’utilisateur à se sentir mieux par le biais d’une analyse de ses expériences personnelles.
J’ai également réfléchi aux informations que l’utilisateur entrera dans le formulaire et qui me permettront de concevoir sa ligne de vie. Il y aura 6 catégories par évènement : nom de l'évènement, année, histoire, ce qu'il a apporté, intensité de l'impact et le type d'évènement.
L'intensité de l’impact émotionnel me sera utile car il me permettra d'élaborer un système graphique de cercles de 3 tailles différentes en fonction de l'impact (moyen, fort, très fort).
Le type d'événement me permettra de générer différentes couleurs sur le graphique (exemple: rose pour événement amoureux). Les couleurs permettront également à l’utilisateur de repérer le domaine auquel l'événement se rattache.
À la fin de l'expérience l’utilisateur pourra télécharger sa timeline afin de la conserver ou la partager.
Le but est de faire participer directement l’utilisateur en l’invitant à créer sa propre ligne de vie. L’insertion de ses événements personnelles et de leurs dénouements va permettre à l’utilisateur de s’auto-conseiller et d’évoluer par lui-même. Je pense que tirer soi-même des conclusions par l’analyse de son vécu peut avoir un impact plus marquant pour avancer.
L'élaboration de mes 3 modules techniques
Il nous a été demandé de concevoir trois modules techniques pour la réalisation de notre projet. Mes 3 modules seront la conception d’un formulaire, la création de la ligne de vie générée par les informations du formulaire, ainsi que l’histoire de l'événement qui s’affichera en cliquant sur son intitulé.
Je tenais à concevoir un design coloré et épuré, j’ai donc trouvé préférable de dissimuler l’histoire des événements derrière leurs intitulés, afin de mettre en avant l’aspect graphique sous forme de data-visualisation de la ligne de vie.
L'approche Design/Contenu
J’ai commencé par rechercher des inspirations de visuels circulaires pour l'élaboration de ma ligne de vie. Je tenais à utiliser une forme circulaire pour concevoir la ligne de vie, forme circulaire symbole d’harmonie et de positivité, symbolisation qui se prête parfaitement au projet qui a pour but d’apporter un regard plus positif sur la vie de l’utilisateur.
J’ai très longtemps hésité sur mon design, ce qui m’a fait perdre pas mal de temps. J'étais partagée entre la volonté d’un design très graphique et symbolique (comme l'utilisation de motif d'empreinte digitale pour rappeler l'aspect intime et unique), et à la fois un design coloré et qui renvoie plus vers une datavisualisation. Je suis partie dans un premier temps sur une ligne de vie linéaire constituée de cercles mis bout à bout dont je n'étais pas totalement satisfaite.
Par la suite un autre souci est survenu je ne pouvais pas avoir une visualisation globale de la ligne de vie sans scroller, alors que je tenais à ce que l’utilisateur puisse télécharger le visuel global de celle-ci. Il me fallait donc visualiser l'entièreté de la ligne de vie en une seule fois. Monsieur Marchal m’a également conseillé de créer un visuel qui regroupe les événements en une forme globale plutôt qu’en une ligne composée de formes, ce qui me renforça dans mon insatisfaction de mon premier visuel.
Je me suis ensuite inspirée d’un graphiste Joseph - Muller - Brockmann qui a conçu une affiche basée sur un système circulaire pour un concert de Beethoven pour le Zurich Town Hall.
Le système graphique
J’ai donc conçu un nouveau visuel moins lourd et plus compréhensible visuellement, où je pouvais y intégrer l'intégralité de mon système aisément. Je tenais à ce que ma forme globale contienne les couleurs des domaines dans lesquels les événements se rattachent, mais également l'intensité de l’impact de chaque événement qui se traduira par des arcs de cercle plus ou moins épais et plus ou moins long.
Le user journey et le prototype papier
En parallèle, j’ai également élaboré un user journey ainsi que des prototypes papier afin de concevoir la structure de mon site et d’analyser le parcours de l’utilisateur, dans le but de créer mon design et donc mon prototype final.
Consulter les prototypes papier
Le choix des couleurs
Dans un premier temps, je me suis interessée à la roue des émotions de Robert Plutchik qui met l'accent sur le sentiment que procure chaque couleur. Mais j'ai pu constaté que je pouvais difficilement adapter ce principe à mon système de couleurs qui me permet de classifier les domaines auquels se rattachent les évènements de l'utilisateur. J'ai donc pensé à l'ambiance que je souhaitais offrir, j'ai choisi une gamme de couleurs tirant vers le pastel qui évoquerait un esprit apaisant et doux. Je suis partie sur des nuances rosées et bleutées (faisant écho à la douceur et à la sérénité) car je tenais à créer une atmosphère de bien être et de calme, tout en gardant un visuel confortable. J'y ai ajouté quelques touches un peu plus contrastées pour apporter du dynamisme.
L'experience de l'utilisateur
Ayant créé un système visuel de ligne de vie au premier abord simple mais difficile à comprendre sans explication préalable, il m'a été évident de concevoir une page d’accueil afin d’expliquer le projet et d’y renseigner le fonctionnement du système pour l’utilisateur et pour finir de l’inviter à concevoir sa ligne de vie.
Après l’apparition et l’analyse de sa ligne de vie, je souhaitais que l’utilisateur puisse repartir avec une trace de sa création. C’est la raison pour laquelle j’ai voulu fournir un service supplémentaire qui donnerait la possibilité de télécharger sa ligne de vie dans le format qu’il désire. Je ne tenais pas à inclure la fonctionnalité d’inscription de l’utilisateur car la ligne de vie doit rester un système spontanée et unique qui procure un impact plus important et un souvenir plus durable. Vous pouvez consulter la version mobile où la version desktop de la simulation du projet complet.
Le code
Je ne vais pas m’en cacher, le code aura été une des parties les plus complexes dans la réalisation de mon projet. Il me fallait concevoir un formulaire enregistrant les réponses de l'utilisateur afin de les faire apparaître sur la ligne de vie de façon graphique, ce qui nécessite pas mal de javascript, mon point faible. N'ayant jamais conçu de formulaire pour mes projets précédents c'était un certain challenge que je me lançais. Cette partie a été éprouvante car elle m'a pris pas mal de temps et de réflexion mais grâce à l’aide d’un ami j’ai pu palier à mes problèmes. J'aurai pu optimiser mon code javascript en y ajoutant plus de boucles pour diminuer les lignes mais n'étant pas totalement à l'aise avec celà j'ai préféré avoir un code fonctionnel plus qu'optimal.
Concernant la conception de mes cercles pour la ligne de vie, n'ayant pas assez de connaissance pour l'utilisation de canevas, et l'utilisation de css nécessitant beaucoup de lignes, j’ai préféré utilisé des images svg qui m’ont permises d'alléger mon contenu. Malheureusement, j'ai mal géré mon temps et n'ai pas pu modifier l'épaisseur de ligne des svg afin de les rendre parfaitement adaptés à mon design car il fallait que je les intègre tous un par un dans mon code pour que je puisse avoir accès à leurs épaisseurs.
Vous pouvez consulter l'intégration des modules techniques.
Réflexion sur le module d'animation
Concernant l’animation mobile qui nous a été demandée sur after effect, j’ai opté pour le formulaire et l’apparition de la ligne de vie qui selon moi est la fonctionnalité principale de mon projet. Vous pouvez consulter ici la vidéo du module d'animation.
Mes conclusions
La conception de ce projet a renforcé mon envie de vouloir travailler dans le domaine du design tout en sachant que le code reste indispensable et qu’il faut être polyvalent et savoir s’adapter.
J’ai appris que le stress peut également avoir un effet bénéfique, nous pousser à rebondir pour mieux avancer, et à nous améliorer pour aboutir à un meilleur résultat. J’ai pu approfondir mes connaissances en web et concevoir un projet qui parle d’un aspect de vie important selon moi.
J'espère que ce projet vous aura plus, vous pouvez consulter mon site personnel pour me contacter ou consulter mes autres projets, en cliquant sur le lien ci-dessous.
Consulter mon site personnel