Case-study

Introduction

Nous sommes le 3 février, jour de la présentation du tfa. Beaucoup de modifications ont été apportées aux consignes par rapport à l’année précédente: nous allons être plus encadrés et devrons être moins vastes quant au sujet à choisir.

La phase de recherche commence alors et l’objectif premier n’est pas de trouver un sujet précis mais une thématique qui nous guidera jusqu’à notre idée finale.

D'abord, nous devons présenter différentes thématiques parmis lesquelles trois vont être sélectionnées par les enseignants. Pour ma part, seules deux ont été retenu. Faire cela permet de réfléchir aux thèmes plus en profondeur pour aboutir à un thème unique à la fin. Après avoir discuté avec mes enseignants, j’ai finalement opté pour le projet suivant: «Quels sont les outils numériques qui peuvent être mis en place pour le street art?»

Ensuite, nous avons dû dresser une liste de présuppositions avec la méthode de 5w. A travers ces questions, j’ai exploré plusieurs pistes de projets : procuration de bonbonne, cartographie, outil de stockage pour un graffeur, …

Après quoi j’ai du me poser la question du public cible. Là était ma plus grande crainte car je voulais trouver un projet qui toucherait un public plus large et pas exclusivement les graffeurs ou les gens de ce milieu là.

Journal de bord
photos de mes 12 thématiques de bases
Mes 12 thématiques de bases.

Approche du sujet

Mon idée de base était de créer une plateforme avec les différents endroits disponibles pour faire du street art. Après plusieurs discussions par téléphone et messages avec différents artistes, j’ai pu constater que le fait de découvrir des endroits et faire du repérage par eux-même, était très important à leurs yeux..

En réfléchissant et sur base des nombreux commentaires de la part des artistes, j’ai redéfini mes idées et j’ai pensé réaliser une mini plateforme qui permettrait de créer un qr code sous forme de pochoir et qui offrirait un lien direct entre les artistes, leurs oeuvres et leurs publics.

oeuvre de Hendlisz Benjamin
© Hendlisz Benjamin
oeuvre de Zouwizouw
©Zouwizouw
oeuvre de Oré
©Oré

sondage

Pour être sûre du potentiel de mon idée, j’ai fait un formulaire afin de demander à diverses personnes si l’art dans les rues les intriguait, intéressait et si connaître l’artiste serait intéressant selon eux.

La première étape après la validation de mon sujet, est de voir ce qui est réalisable et ce qui ne l’est pas. J’ai le don de voir beaucoup trop grand et d’être engouffrée par la suite; ce que je veux à tout prix éviter pour ce travail de fin d’année.

Sondage 1 Sondage aurpès des passants
photo sondage 1 photo sondage 2 photo sondage 3 photo sondage 4

Mon projet, c’est quoi ?

C’est une mini plateforme, QR STENCIL, donnant la possibilité aux artistes de créer et commander des Qr codes sous formes de pochoir. D’une part, cela permettra aux personnes faisant du Street art d’avoir un lien direct entre leurs oeuvres et leurs réseaux sociaux et ainsi, nourrir leur notoriété. D’autre part, les gens intéressés par le street art pourront entrer directement en contact avec leurs artistes par le biais du Qr code.

photo réalisation 3d photo réalisation 3d photo réalisation 3d photo réalisation 3d

User-journey

Avant de réfléchir sur les différentes fonctionnalités de ma mini plateforme, je préfère procéder à un User journey pour avoir une visualisation des différentes étapes qu’une personne aura. Cela me permet de comprendre les besoins de l'utilisateurs et de les satisfaires.

Pour faire ce user journey, je suis passée par la case “réalisation de croquis” qui m’ont aidé à réaliser toutes mes idées en version numérique. Au départ, je suis parti sur une colorisation de celui ci mais après mûre réflexion et feed-back avec M.Marchal, ce dernier m’a dit que ce serait beaucoup plus sympa pour l’intégration d’avoir seulement le tracé.

User journey de l'artiste

image étape de user journey image étape de user journey image étape de user journey image étape de prototype image étape de user journey image étape de user journey

User journey d'un passant

image étape de user journey image étape de user journey image étape de user journey

Prototype papier

Le prototype papier a permis de me rendre compte de ce qui n'allait pas et ce qu’il faudrait modifié.

Aidée de ma soeur, la difficulté occasionnée par l’étape de la connection était flagrante. Au départ, j’avais opté pour une connection directe sur l’application mais elle s’avère être un frein car l’utilisateur ne peut parcourir les différents articles et avoir diverses informations étant donné que tout le monde ne veut pas forcément s’inscrire sur les e-shop.

Permettre l’inscription au moment de la commande afin de laisser le client se balader librement sur le site m’a sembler être une meilleure option.

Image étape différente du prototype
Prototype de ma page d'acceuil de départ
Image étape différente du prototype
Prototype de ma page d'acceuil final
Image étape différente du prototype
Prototype de l'article
Image étape différente du prototype
Différents tests de prototype avec ma soeur

Design

Voilà l’une des étapes les plus importantes: le design. Il est primordial dans le projet et doit rester dans l’univers du thème choisi.

Je ne cache pas que j’ai éprouvé une multitude de difficulté. Mon premier design était vide et n’avait rien d’accrocheur, le niveau de l’ux n’était pas top et ne permettait pas de voir le potentiel du projet final. Prendre du recul était nécessaire et dans mon cas, bénéfique car j’ai pu visualiser le schéma que je voulais obtenir pour mon travail.

J’ai opté pour le orange comme couleur première. Pourquoi ce choix? Car c’est une couleur qui véhicule des valeurs de communication et de créativité, une couleur remplie d’énergie et d’action, ce qui fait écho au sujet abordé.

Image design de depart
Mon design d'acceuil de depart
Image design de depart
Mon design d'article de depart
Image design de depart
Prototype du générateur de Qr code.

Typographie

Ensuite, pour ce qui est de la typographie principale, qui reprendra les titres et le logo, j’ai fait plusieurs recherches sur Google Font, Typekit, Dafont et j’ai opté pour la Outrun future. C’est une typographie dessinée qui reprend le style de la peinture. Pour les paragraphes, j’ai choisi la Lato, qui est une typographie qu’on peut qualifier de classique et qui a été trouvé sur google font.

Photo Différente taille de typographie utilisé Photo Différente taille de typographie utilisé Photo Différente taille de typographie utilisé Photo Différente taille de typographie utilisé Photo Différente taille de typographie utilisé Photo Différente taille de typographie utilisé

Phase de recherche

Concernant les photographies, après maintes recherches d’illustrations que je pourrais utilisées et modifiées, j’ai penché sur la création 3D pour réaliser les objets concernant la mise en vente sur mon E-shop.

Une fois le tout réalisé, je me suis lancée dans un design plus concret et ancré dans cet univers qu’est le graffiti. Mon but ultime est de garder ce côté clean qui était présent dans ma première version tout en y ajoutant de nouveaux éléments et ma touche personnelle qui rend le tout plus chaleureux.

Tableau pinterest
Capture d'écran du tableau pinterest
Une partie de mon tableau Pinterest

Prototype mobile

Après l’étape du design, je me suis attaquée au prototype mobile pour avoir une harmonisation dans mon travail et ne pas partir dans tous les sens.

J’ai constaté que je n’avais pas assez de connaissances sur figma pour les prototypes, j’ai donc dû faire quelques recherches pour arriver à ce que je voulais. Pour moi, il était très important d’avoir toutes les étapes différentes.

Prototype
Gif prototype Dark mode
Prototype Dark mode

Modules techniques

Place à la partie la plus complexe. Bien que cette étape soit compliquée, j’éprouve de la joie à chaque fois que j’apprends de nouvelles choses et ça me pousse à explorer des techniques que je connais pas.

Nous avions 3 modules techniques à réaliser. Pour le premier, j’ai opter pour un ajout et retrait du panier de mon shop. Ensuite, vient l’affichage du panier.

Et le dernier est le light mode qui permet à l’utilisateur de mettre en version “claire” si il en a envie étant donné que mon site de base est en mode sombre.

Pour la réalisation du travail, j’ai pu m’inspirer du cours de Monsieur Therasse et différents Youtubeur ( Telmo, PrimFx).

J’ai d'ailleurs constaté que faire des recherches est un atout majeur dans la conception de tout projet et ce plus particulièrement dans le milieu du web. On ne se rend pas vraiment compte de toute les possibilités qui s’offrent à nous.

Beaucoup de doutes m’ont traversé l’esprit lors de cette dernière étape notamment sur ma capacité à gérer mes modules techniques. Finalement je suis fière de ce que j’ai pu réaliser.

Modules
capture d'écran code du module techniques
Capture d'écran de mon code pour mes modules

Module d'animation

A travers ma vidéo, je voulais mettre en avant la partie la plus importante de mon shop: le qr code.

Quand on a pas pas l’habitude d'utiliser un programme, il est toujours difficile de se souvenir des bases cependant, les pdf de M. Tournay m’ont beaucoup servi.

Après plusieurs expérimentations, je suis parvenue à me remettre dans le bain et la réalisation de la vidéo m’a parue alors beaucoup plus simple.

Animation d'interface
Gif de la video d'animation
Gif accélérer de mon module d'animation

Conclusion

Vu l’échec de mon précédent travail de fin d’année, j’ai eu des réticences quant à ce projet. En manque d’inspiration, j’ai voulu plusieurs fois baisser les bras, notamment lorsque ma première idée de thème n’a pas connu franc succès auprès des graffeurs. De nature ambitieuse et grâce aux différents rendez-vous avec mes professeurs, j’ai rapidement trouvé une idée qui me faisait vibrer et qui a bien été accueilli par le public.

L’envie de créer un projet clean ne m’a pas quitté et m’a poussé à sortir de ma zone de confort et des acquis que je possédais.

Niveau code, j’ai exploré et testé différentes choses. J’ai étoffé mes connaissances de l’outil After Effect, appris à utiliser la 3D grâce à Adobe Dimension et j’ai approfondi mes compétences en JavaScript.

Le rendu final me plait et cela me prouve que lorsque je trouve l’envie, je peux réaliser de beaux projets.

Je voudrai prendre le temps de remercier tous les professeurs qui m’ont aidé et accompagné durant toutes les étapes de mon travail. Leurs conseils m’ont permis d’aboutir à un résultat plus que satisfaisant.

Il me tarde d’utiliser mon savoir-faire et d’en apprendre d’avantage.

Decouvrir mon projet