Case Study

Sujet

Pour notre travail de fin d'année 2020 , nous devions travailler sur un projet prototype et un site général présentant un service ou ayant une utilité simple . L’objectif principal de ce projet est de montrer nos compétences pour obtenir un stage en 3ème Bachelor .

Pour mon TFA , j’ai choisi de partir sur la création d’un site ou d’une application reprenant les informations utiles pour les étudiants de l’Heaj souhaitant réaliser leur stage à l’étranger . L’objectif est donc de proposer une solution web afin de faciliter le départ de l’étudiant .

Prototype

Approche du contenu

Recherche

Lorsque j’ai commencé ce projet , je ne connaissais pas du tout le sujet , J’ai donc décidé d’effectuer quelques recherches , d’une part , en allant voir la documentation que Madame Brandt met à disposition des étudiants souhaitant faire leur stage à l’étranger et , d’autre part , en cherchant si des solutions existaient déjà . J’ai trouvé quelques groupes Facebook et un site pour les étudiants Français .

recherche

Screen de site recherche

Ensuite , j’ai appelé Laura Durieux , étudiante en 3ème année Bachelor de l’Heaj , car elle est partie au Japon cette année dans le cadre de son stage . Ceci m’a permis d’avoir un retour sur son expérience , une vue des problèmes qu’elle a rencontrés et de lui poser quelques questions afin de creuser ma réflexion sur les différentes pistes que j’avais à ce moment-là .

conversation laura

Screen appel

Après ces recherches concernant l’existant et une seule expérience réelle , il me manquait encore les avis d’autres étudiants qui ont fait leur stage à l’étranger . J’ai donc décidé de créer un sondage pour avoir confirmation de ma réflexion et voir si il y avait un besoin de ce type de site web . Les retours ont été plutôt positifs et j’en ai ressorti deux points importants :

User Journey

Pour mon user journey , j'ai imaginé la journée d'un étudiant qui rechercherait un stage à l'étranger . Le premier n'aurait pas accès à mon site et donc chercherait dans les valves et sur différents sites et blogs .

En me mettant à la place d’un étudiant qui voudrait partir à l’étranger , je m’imaginais un étudiant devant son pc à chercher les informations dans les valves ayant des difficultés à trouver les informations qui lui manquent .

user Journey

User Journey

Notes

Une fois mes recherches terminées , j’ai compilé l’ensemble de mes notes en utilisant la technique du mindmapping pour construire un plan contenu de la structure du site web .

mindmapping

Mindmapping

De plus , comme ce site est destiné à l’Heaj , je suis allé plus loin dans ma réflexion en me disant qu’intégrer les contacts de la cellule internationale ainsi qu’un rappel pour la prochaine réunion organisée pour les élèves pouvaient avoir leur utilité .

Test Papier

Avec un premier jet de mon contenu structuré , j’ai commencé des prototypes papiers pour tester différentes manières de proposer l’information .

Prototype 1

Premier test papier

En conséquence du confinement , j’ai dû soumettre ces prototypes papier en face à face à ma famille et en visioconférence à des amis . Il en est ressorti que la plupart des éléments étaient bien présentés . En retour , ils m’ont fait savoir qu’ils étaient perdus par rapport au fait que mon site était coupé en deux parties avec d’un côté , les informations sur les pays et de l’autre , un annuaire des entreprises . Ils préféraient avoir directement les informations des entreprises par rapport au pays qu’ils ont choisi .

slide naviguation

Naviguation pas retenu après test

J’ai donc redessiné mon prototype pour avoir une onepage plus globale avec toutes les informations directement par pays sélectionné par l’utilisateur .

Prototype 2

Prototype papier final

Vidéo

Pour ma vidéo , j’ai commencé à réfléchir à ce que je voulais présenter comme module d’animation . J’ai directement pensé à deux choses . D’abord , mon formulaire de footer c’est quelque chose de facilement réalisable puisque nous avons vu le principe en cours . L’autre animation que je voulais présenter , c’est celle de mon menu . Je voulais montrer cette navigation pour mieux se rendre compte des transitions de page entre pays .

Design Système

Couleurs

Mon site étant dirigé vers les étudiants de l’Heaj , j’ai voulu réutiliser un code couleur similaire à celui de l’école . C’est pourquoi mon choix de couleur a été assez cohérent en utilisant un noir pour les background , un blanc pour les typographies et , le rouge comme couleur de contraste .

Couleur Heaj

inspiration couleur

J’ai utilisé le site colorable afin de tester mes couleurs utilisé pour un meilleur contraste et une meilleure lisibilitée .

Contraste Couleur Contraste Couleur Contraste Couleur Contraste Couleur

Tests contrastes couleurs

Typographie

Pour mes titres , je voulais une typographie droite et avec de l’épaisseur et j’ai donc choisi de partir sur la Oswald .

Pour la typo texte de ce projet , j’ai fait plusieurs tests avec des polices qui pouvaient se lier avec la Oswald . Celle qui a particulièrement attiré mon attention c’est la Merriweather qui est une police à empattement que je trouvais plus lisible que les autres typographies essayées .

Test Typographie

Choix typo

Pour la taille de mes typographies , j’ai fait plusieurs tests pour choisir mes rapports hiérarchiques jusqu’à atteindre la taille la plus adaptée en fonction du support de l’utilisateur  ( mobile , Ipad ou ordinateurs ) .

Test Typographique

Taille typographie retenue

Ui Kit

Une fois ces premières étapes terminées , je me suis dit qu’avant de me lancer dans le design complet de mon site web , il était important d’avoir une idée plus globale de mon projet à un niveau plus atomique (boutons , sliders , select , . . . ) .

Design Système

Ui Kit

Writing Style

Pour la façon dont on va écrire sur ce site , on va suivre quelques points qui vont permettre de mieux comprendre le style que je veux suivre .

On veut le guider , c’est-à-dire l’aider à trouver les informations dont il aura besoin pour partir à l’étranger faire son stage .

On veut être clair et on veut qu’il ait directement les informations dont il a besoin de manière claire et précise pour avoir les armes nécessaires afin de partir .

On veut être utile c’est-à-dire que l’étudiant vienne sur le site et ait les informations qu’il recherche .

On veut rester sérieux , qu’il comprenne que partir à l’étranger en stage ce sera pas toujours facile et qu’il rentre dans un monde sérieux ou il aura besoin de rigueur .

Voice & tone

La voix et le ton sont deux choses bien distinctes qui vont nous permettre de parler aux clients comme ils aimeraient que soit présenté le site .

On parlera toujours avec la même voix mais le ton changera fortement en fonction du sujet qu’on veut présenter aux clients . On décidera donc de parler avec un ton pour ne pas perturber le client émotionnellement et l’aider en le mettant dans les meilleures conditions possibles . On ne perturbera pas le client en parlant de façon humoristique si le sujet est sérieux et si il ne s’y prête pas par exemple .

Voice

Le sujet ici reste dans le cadre du lien entre un étudiant et l’école . Les stages en entreprise , c’est envoyer un étudiant dans une entreprise pour qu’il y fasse son stage . Il va donc intégrer le milieu du travail dans lequel on demande un certain sérieux et une certaine rigueur .

On ne peut donc pas parler comme à un ami  avec la voix qu’on utilisera . Il faudra que le vocabulaire utilisé reste dans ce sérieux . Partir faire son stage surtout à l’étranger , ce n’est absolument pas partir en vacance s. Si cet étudiant part , c’est pour une expérience de travail à l’étranger .

Ici , on ne veut pas non plus pousser absolument l’étudiant à partir à l’étranger et le pousser précisément dans un pays . Il faut donc garder un certain recul et éviter de mettre un pays en avant plus qu’un autre . Dans ce projet , le but c’est de présenter les données pour qu’il fasse son choix personnellement .

Tone

Le ton sera donc assez formel et ne présentera pas de touche d’humour ou de superflu .

On présentera donc les faits de façon claire et simple et sans y mettre son propre avis . On évitera de parler en argo et on privilégiera un français simple .

On parlera plus au futur puisque les étudiants qui utiliseront le site sont probablement là pour partir en stage à l’étranger dans le futur .

Prototype

Test

Après avoir fait mon design système , j’ai fait plusieurs tests mobile , tablette et desktop en réfléchissant sur ma maquette . Comme la plupart des gens visés par le site sont des élèves ayant un pc , j’ai pris la décision de faire ma maquette en desktop . En effet , j’ai constaté que pour ce type d’informations concernant l’Heaj , les élèves préfèrent en général utiliser leur pc plutôt que leur mobile pour accéder aux sites internet .

Test Responsive

Responsive

Maquette

Ensuite , j’ai travaillé sur les différentes pages du site web pour visualiser le projet et expérimenter l’usage du site pour bien comprendre les différentes fonctionnalités . J'en ai profité pour travailler l'espace entre mes différents composants .

Test et Espace

Espace et hiérarchie

Au début , j'avais fait ma maquette sur Invision mais je me suis rendu compte très vite que Invison me permettait pas forcément de montrer au mieux mon projet . En effet , J'avais des difficultés à reproduire les différents hovers de mes pages .

Maquette sur invision

Prototype Invision

Vu que j’avais fait mon design sur Figma , je me suis dit que j’allais faire ma maquette dessus . Étant satisfait des hover et du rendu des fonctionnalités , j’ai décidé de continuer sur Figma . Le seul inconvénient rencontrés , c'est le faite que la maquette mets du temps à se charger à cause du grands nombres de pages différentes et les liens qui les unises .

Maquette sur figma

Prototype figma

Code

Module

Étant donné que j'avais déjà mon design et mes maquettes , je savais sur quoi j’allais partir pour mes modules . Je me suis donc directement lancé en effectuant une série de tests . Ceci a probablement été la partie la plus compliquée mais à force de cafés et de persévérance , mes modules fonctionnaient au niveau du javascript et il m’a donc fallu mettre leurs styles avec la méthode Bem et Sass .

Le plus compliqué dans l’intégration de mes modules a été les sélectes et l'affichage des différentes sociétés . J’ai eu beaucoup de mal à les rendres proche de ce que je voulais pour mon projet .

Module Javascript

Partie de code d'un module pendant mes tests

Case Study

À ce stade de mon projet , je savais également sur quoi je voulais partir pour la présentation de mon Case Study . J’ai commencé par coder ma navigation entre les différentes pages et les liens vers les différentes parties extérieures de mon projet .

J’ai ensuite mis un style , toujours en suivant la méthode Bem et Sass . J’y ai intégré mes modules et mon Case Study pour obtenir quelque chose qui me paraissait en adéquation avec le design de mon prototype . Il ne me restait plus qu'à rendre responsive le site le rendre responsive .

Module Animation Interface

Pour la réalisation , j’ai découpé mes pages pour avoir le background , la carte ainsi que l’avant plan blanc séparés . Ca m’a permis d’animer ma transition de page ainsi que mon footer qui se trouvait dans le bas de la page .

Montage de la vidéo

Screen montage vidéo

Module 1

Le module 1 , c'est mon formulaire qui se trouve dans le footer de mon projet .

Module 2

Pour la réalisation , j’ai découpé mes pages pour avoir le background , la carte ainsi que l’avant plan blanc séparés . Cela m’a permis d’animer ma transition de page ainsi que mon footer qui se trouvait dans le bas de la page .

Société

Module 3

Le module 3 , c'est le menu pour naviguer entre les différents pays .