Case Study - Le déroulement du projet

Les Débuts - choix de sujet

Petite présentation de soi avec ses points forts et points faibles. Il faut se fixer des objectifs mais aussi savoir ce que l’on veut apprendre en stage. En ce qui me concerne je n’ai pas de préférence entre l’UX, le design et le front-end. J’aimerais un projet qui me permet d’aborder les 3 points. Évidemment en fonction de la dead-line imposée, il m’est compliqué de travailler ces 3 aspects en profondeur.

Il faut trouver un sujet qui me plait et qui me parle. Lors de mes recherches sur le cancer du sein (mon sujet de tfe), j’ai pris conscience que beaucoup de produits cosmétiques sont controversés à cause de leurs ingrédients (on parle beaucoup de l’aluminium dans les déodorants par exemple). J’ai approfondi le sujet pour mieux comprendre et surtout pour savoir qu’est-ce que j’utilise quotidiennement sur ma peau. Mais il y a beaucoup d’informations. Au fur et mesure j’ai aussi appris à réaliser des petites recettes simples, à base de produits naturels pour remplacer petit à petit les cosmétiques industriels. Beaucoup de personnes de mon entourage ne comprenaient pas ma démarche. Je leur expliquais alors le pourquoi du comment, ils étaient étonnés d’apprendre que la casi totalité des cosmétiques qu’ils utilisaient quotidiennement contenaient des perturbateurs endocriniens, des cancérigènes, des allergènes, etc.

Cependant à ce stade je ne sais pas trop vers où je vais et comment je vais présenter les choses. Il faut donc que je réalise une AI. Pour cela, je dois collecter des informations précises pour avoir une idée de toutes les informations que je vais devoir trier. En terme de slow cosmetic il existe un livre de référence : la vérité sur les cosmétiques par Rita Stein. Une acquisition à faire. Je me lance donc dans mes premières recherches de moadboard qui seront approfondis une fois l’AI et le contenu mieux définis.

photo casestudy recherche

Les Recherches - définition du sujet

Afin de mieux définir ce que je vais présenter dans mon site il faut que je me documente. Le sujet est vaste et les sources diverses. Des plus en plus d’article fleurissent dans la presse féminine, ils sont un bon début mais je ne compte pas en rester là. Des youtubeuses et surtout chasseuses de green washing décortiquent les étiquettes et listes INCI a la recherche d’ingrédients problématiques - et il n’en manque pas. Mais en ce qui concerne le décryptage des listes INCI un livre en est la référence : la vérité sur les cosmétiques de Rita Stein, plus de 300 pages d’explications et en annexe une liste de composants notés en fonction de leur impact sur la santé mais aussi l'environnement. C’est une des questions que je me suis posée : que faire par rapport à l’environnement ? Mettre aussi en avant les problématiques environnementales ou juste celles pour la santé. En fait la question est un peu bête au final puisque notre santé est directement liée à l’environnement qu’on le veuille ou non. J’ai aussi pris des informations sur la législation via un livre de la commission européenne. Par rapport aux autres législations sur les cosmétiques dans le monde, celle européenne est assez protectionniste … mais est-ce assez ? Je n’en étais pas vraiment convaincue avant mes recherches, et ce n’était pas à tord - après tout le tabacs est en vente libre alors que le liens entre le tabac et le cancer des poumons n’est plus à prouver.

Après avoir discuté avec mes professeurs, il en est ressortis que je devais mieux définir le sujet. D’un côté il y a l’information sur les ingrédients à problèmes et d’un autre l’analyse des compositions. Et pour moi avant d’analyser les compositions il faut comprendre pourquoi les analyser. Je vais donc me concentrer sur la partie informatives. De plus, au vu de mon sujet de tfe - le cancer du sein - il est intéressant d'informer dans un premier temps les consommateurs (les deux sujets se rejoignent notamment au niveaux des perturbateurs endocriniens et cancérigènes).

ruban du cancer du sein

Le choix du nom a pris plus de temps que je ne le pensais. J’ai cherchais en français, en anglais, en latin - référence aux listes inci en latin. Mais rien n’y faisait, rien ne “sonne bien”. J’aimais beaucoup le nom “Cosm’éthique” qui exprime bien leur philosophie. J’en suis finalement arrivé à : C’décrypté. Le “C” représentant à la fois le raccourcis de “c’est” et le C de cosmétique. Le décrypté faisant référence à la compréhension des listes INCI. Le logo représente une chaine carbonnée coupé en deux pour former un C et D, premières lettre du nom. Il peut aussi représenter l'intérieur d'une cellule, comme pour aller voir ce qu'il y a dedans.

Les Inspirations - début de design

Je vais donc faire un tour sur Awwwards pour trouver des inspirations d’éléments :

Dans un premier temps je chercher à obtenir un site plutôt neutre, autant accessible aux hommes qu’aux femmes. Exit le rose pâle ou bleu roi pour faire place à un léger gris avec un fond blanc. Pour les typographies j’ai envie de légèreté et du sans-serif. Après quelques tests de hauteur, largeur de X, je choisis la Lora avec la Montserrat. Les premiers designs ne sont pas vraiment concluants. Ils sont fades et nécessitent encore beaucoup de travail. En revanche l’idée du slider pour expliquer étape par étape, et amener l’utilisateur à comprendre l’essentiel simplement me paraît bonne. Le menu à gauche divisé en 2 liens cliquables (à avoir le case study et la page crédits) et un menu hamburger pour le listing des ingrédients controversés partage les avis. Finalement j’ai choisi de revenir à un menu plus simple avec le logo en haut à gauche et les liens à droite. Le plus gros problème du design est l’organisation des éléments. Les éléments les plus imposants sont le slider et les images, le texte vient ensuite. Pourtant c’est le plus important.

Le Design - penser chaque éléments

Entre temps les fonds sont devenus plus colorés, réalisés a base de brush photoshop qui donne un aspect de peinture. Aspect important à mon sens car mes images sélectionnées représentent des visages / corps peints, pour représenter toutes les substances toxiques qui restent sur notre corps. Les couleurs vives dans la nature représentent et avertissent souvent de la présence d’un poison, de quelque chose de toxique et dangereux. Les fonds partent d’une couleur bleu/violette qui fait très industrie pharmaceutique, le dégradé passe par un orange rouge pour représenter le danger et se finit par le vert comme pour donner une solution implicite : se (re)tourner vers le naturel.

Les images sont utilisées comme lien entre les slides, ce qui accentue l’effet de continuité entre les slides mais aussi la continuité des idées. Je choisi cependant que ce ne soit pas systématique, car cela deviendrait ennuyeux et trop important. Dans l’idée un effet de parallax serait intéressant à mettre en place. A voir en fonction du temps.

test de design

Les textes sont mis sur fond blanc pour leur donner de l’importance, la typographie a changé pour devenir la Assitant de Google Font pour rester dans l’esprit pharmaceutique. Pour le slider des flèches en bas à droite pour naviguer, un premier bouton à la première slide pour faire comprendre à l’utilisateur le fonctionnement. Dans l’idéal j’aimerais que le slide réagisse aussi au scroll vertical, car les utilisateurs ont l’habitude de descendre dans une page. Il est intéressant d’avoir tout de même accès au plan des slides, mais ayant déjà un menu en haut à droite, j’avais peur que cela fasse “trop” de menus et que l’utilisateur ne comprenne pas la différence. Il y aura donc un bouton avec le numéro de slide ⅙ et au hover l’apparition du menu cliquable pour se rendre à une partie en particulier. En pratique j’ai manqué de temps pour coder le compteur de slide.

La page ingrédients controversés est là pour pouvoir accéder aux fiches techniques des ingrédients. Des pictogrammes illustrent chaque classe d’ingrédient, la base du pictogramme est la représentation chimique d’une molécule en mouvement. Est ensuite représenté un élément qui représente au mieux l’ingrédient comme quelque chose d’enrobé pour le silicone qui forme une couche sur les cheveux et la peau.

test de design test de design

Les fiches des produits reprenants toutes la même base : nom du groupe, les problèmes qu’ils génèrent, leurs dénominations INCI, où en trouve t’on principalement, un petit truc à savoir, et qu'est ce qu’on privilégie à la place (voir même pas quoi on peut le remplacer). Ce travail est tout de même assez long, fastidieux et complexe. Si le temps me le permet, j’aimerais mettre en place un bouton “imprimer” avec une fiche css pour permettre aux utilisateurs de garder à portée de main les fiches techniques.

Autre Support - Instagram

Après une discussion avec l’un de nos profs je me rappelle un aspect du briefing : “mettre en places les supports qui vous paraissent pertinents”. Sur le site je ne trouve pas intéressant de faire de l’analyse de produit au cas par cas, en revanche cela aurait bien plus sa place sur instagram. Il y a maintenant la possibilité de faire une publication avec 2 photos. L’idée serait que la première soit une photo du packaging vu de face avec tous les beaux arguments marketing. La deuxième photo du post serait celle de la liste INCI avec une analyse positive ou négative de celle ci.

Le Code - plus que prévus

Le code… à la base le slider devait faire partie du projet et donc ne devait pas être codé mais juste designé. Finalement j’ai du le coder. J’aurais pu utiliser des frameworks, cependant quit a devoir coder autant essayer de le faire en javascript. J’ai fait par étape, un scroll en cliquant sur des boutons. Puis résoudre les bugs et déjouer des petits malins qui clique 1000 et 1 fois sur précédent… Ensuite une réaction au scroll, qui été très vive dans un premier temps, ralenti par la suite. Et enfin un scroll avec le menu. Le tout doit bien évidemment fonctionner ensemble, de telle manière que cliquer sur précédent, puis scroller et utiliser le menu l’un a la suite de l’autre ne crée pas de bug. Le css fût plus simple que je ne le pensais, en revanche le responsive bien que embêtant à mettre en place est essentiel. J’ai profité de ce projet pour m’essayer à une transition entre la page “ingrédients controversés” et la fiche de l’ingrédient. La transition n’est pas parfaite, mais le but étant d’apprendre et de comprendre le principe.

Le Final - prendre un peu de recul

En conclusion, je me suis vraiment amusée et épanouie pendant la réalisation de ce side project. Le travail du contenu a été important, long mais très intéressant. En ce qui concerne le design et le code j'ai avancé le plus loin possible afin de montrer mes compétences en la matière. Et il y a une sacrée différence par rapport à mes projets précédents. Avec un peu de recul, je n’ai pas fait que de l’UX, ni que du design ou même que du code. J’ai touché les 3 domaines. Certe n’en faire qu’un et le pousser a fond aurait pu être une option, mais cela me représentait moins. Au fond, j’attends beaucoup du stage, pour trouver ma place que se soit en me spécialisant dans un domaine ou au contraire en m'épanouissant au travers des 3.