Bienvenue sur la page de présentation de mon TFA en Design Web & Mobile à la Haute-École Albert Jacquard de Namur.

L’enjeu était de créer le concept d’un PPU (Petit Projet Utile) sur base d’une thématique déterminée en début de quadrimestre. La mienne étant « Quels sont les moyens à mettre en place afin d’aider les étudiants à voyager à moindre coût dans le but de découvrir d’autres cultures? ». C’est ainsi que j’ai développé l’idée d’un site web recensant différents itinéraires dans plusieurs pays, lesquels seraient accessibles sans être trop chers, minimisant les coûts de logement et de transport.

Le projet Raidlist est ainsi né.

Vous retrouverez ici les différentes étapes qui m’ont permis de concrétiser ce projet :

Parcourez le monde et forgez des souvenirs inoubliables !

Raidlist est un site web recensant les meilleurs circuits à faire dans différents pays tout en épargant un maximum votre porte-monnaie.

Votre budget ne freinera plus votre envie de découvrir le monde grâce à votre carnet de voyage en ligne !

Choisissez votre destination :

Attention : Pour l'exemple seule l'Écosse est fonctionnelle.

Animation d'interface mobile

Case study

Les premiers pas

Février 2020, en tant qu’étudiant en deuxième année de Design Web & Mobile à la Haute-École Albert Jacquard de Namur je sais que durant ce quadrimestre la plupart de mes efforts vont se concentrer sur le travail de fin d’année. Les professeurs me guident et pour commencer, je dois réfléchir à différentes problématiques, de manière très générale, sans vraiment penser à quoi que ce soit d’autre (ce qui n’est pas toujours facile car on se laisse vite influencer par des idées plus lointaines). Ces problématiques me permettront de filtrer plusieurs sujets qui pourraient m’intéresser pour la suite de mon travail. Je puise donc dans mon vécu des problèmes auxquels j’ai eu à faire face.

Screenshot de mes problématiques

Ensuite, je liste des besoins qui sont pour moi radicaux : voyager, les contacts sociaux, le sport, … Ils m’aideront également à faire un choix quant à la thématique de mon projet. Sur base d’un document regroupant mes différentes propositions, les professeurs valident certaines problématiques qui d’après eux seraient intéressantes à exploiter. Je me retrouve donc avec quatre possibilités mais à ce stade, je dois en sélectionner une et une seule.

Screenshot des thématiques validées

Je choisis donc de baser mon travail sur la thématique suivante :

Quels moyens peut-on mettre en place pour aider les étudiants à voyager entre amis à moindre coût afin qu’ils puissent découvrir d’autres cultures?

Une direction à prendre

Ma thématique désormais déterminée, je devais trouver vers quoi me diriger afin de résoudre au mieux la problématique concernée. Réaliser un site web ou une application? Destinée à qui et dans quelles conditions? Toutes des questions auxquelles je devais trouver réponse. Pour ça, les professeurs m’ont donné deux techniques. La première était de lister des présuppositions, le plus possible afin de brasser plus large. En bref, je devais trouver des moyens qui permettaient de réduire les coûts des voyages à l’étranger. Avec l’aide de proches, j’ai dressé un top des meilleurs présuppositions, elles allaient m’être utiles pour la suite.

Screenshot de mes présuppositions

La deuxième technique partagée par les professeurs était celle des 5W (pour What, Who, Why, Where et When). Le but ici était de répondre précisément à ces 5 questions pour qu’ensemble elles comblent la problématique.

Les recherches utilisateurs (et début du lockdown)

À partir de là, l’entièreté de mon tfa ainsi que les suivis auprès des enseignants se sont fait à distance, et ce dû au confinement suite à la pandémie de Covid-19. C’était une difficulté supplémentaire et non des moindres pour ma part. Moi qui ai l’habitude d’énormément partager avec les profs pour savoir si j’avance dans la bonne direction, je me suis retrouvé assez seul, ayant beaucoup de mal à m’organiser pour prendre rendez-vous et montrer mon avancement à distance. Mais ce système a eu bien évidemment d’autres effets plus positifs, lesquels je citerai à la fin.

À ce stade du travail, je devais sonder les principaux concernés par ma thématique, c’est à dire les étudiants. Pour ce faire, j’ai créé un formulaire dans lequel je liste les différentes présuppositions trouvées auparavant. Les répondants au sondage devaient, sur une échelle de 1 à 5 répondre s’ils pourraient ou non utiliser ces moyens afin de réduire les coûts de leurs voyages. Après avoir reçu plus de 200 réponses j’ai, à l’aide d’un système de points, trié les moyens les plus intéressants (lien vers l'analyse).

Screenshot de l'analyse du formulaire

Grâce à ce système, je pouvais maintenant voir clairement que l’auto stop et les sites d’échange de maisons n'intéressaient que très peu de monde, mais que le reste était plutôt exploitable.

Une première idée pas très concluante

Après avoir discuté quelques temps avec mes professeurs au sujet des résultats de mon formulaire et de mon tri, une idée de site s’offrait à moi : une interface qui permettrait aux utilisateurs de trouver plus facilement des voyages humanitaires auxquels ils pourraient s’inscrire. J’ai donc fait quelques recherches afin de trouver des sites similaires pour pouvoir m’en inspirer. J’ai découvert qu’il en existait déjà beaucoup, que certains n’avaient pas forcément un très beau design mais d’autres étaient pour moi très complets et pratiques. J’ai alors compris que le thème des voyages humanitaires n’était pas une grande source d’inspiration pour moi et qu’il ne me motivait pas énormément, c’est pourquoi j’ai préféré d’abord me renseigner sur d’autres sujets dans le but de peut-être trouver quelque chose de plus motivant.

La seconde c'est la bonne

En relisant les réponses obtenues à mon formulaire, je me suis dit que je devrais chercher à créer quelque chose en rapport avec le campement et les auberges de jeunesse. C’est là que j’ai fait un parallèle avec mon passé d’animateur scout. Durant l’été 2017, nous étions parti en camp itinérant en Écosse. Nous avions marché d’Inverness à Fort William en une semaine en logeant dans des auberges de jeunesse et des campings le long des lochs. Cette idée était donc pour moi des plus intéressantes, créer un site proposant des voyages itinérants dans différents pays, ce qui réduirait le coût du transport et du logement. Il fallait donc que je me penche sur le sujet, y avait-il d’autres sites proposant un service similaire? Je suis alors tombé sur plusieurs sites mais tous assez différents les uns des autres. Premièrement, Le routard, qui propose diverses activités en fonction de la destination choisie et quelques itinéraires. Deuxièmement, Les voyageurs du monde, qui référence plusieurs itinéraires à faire et qui les illustre avec une carte. Et dernièrement, Visiteurop, qui lui propose différents circuits à faire en Europe avec un système de filtres selon les envies de l’utilisateur mais pour des prix assez élevés.

Il fallait maintenant que je trouve un moyen pour sortir du lot. J’ai donc réfléchi à une interface permettant aux utilisateurs désirant voyager économique de filtrer des itinéraires low cost selon leurs envies avec une carte les illustrant.

Tests sur papier

Lors de cette étape, j’ai dû mettre mon concept de site sur papier, et confectionner plusieurs prototypes. Avec ces-derniers, j’ai fait tester les différentes fonctionnalités à mon entourage, ce qui n’est pas des plus facile lorsqu’on est seul à son kot pendant le confinement. Ce qui est le plus revenu c’est d’abord qu’il était plus cohérent de mettre directement des itinéraires et non des pays au niveau des suggestions sur la page d’accueil.

Photo du prototype papier de ma page d'accueil

Ensuite, que les cartes pour chaque itinéraire n’étaient pas forcément nécessaires et qu’elles occupaient beaucoup de place sur la page du pays en question. Bien-sûr, ce n’est pas grâce à la carte que les utilisateurs vont choisir l’itinéraire mais surtout grâce aux informations concernant ce-dernier.

Photo du prototype papier de ma page pays

Et finalement, que les informations de l’itinéraire choisi était beaucoup trop lourdes et longues et qu’il fallait rendre le tout plus dynamique. Sur mon prototype papier ci-dessous on peut clairement voir que le tas d’informations concernant les étapes est indigeste sous cette forme, je devais donc également régler ce problème.

Photo du prototype papier de ma page itinéraire

En parallèle, j’ai également réalisé plusieurs “user journey”, ce qui m’a aidé à me rendre compte que j’avais la possibilité de rendre mon site encore plus interactif avec un espace commentaires en-dessous de chaque itinéraire, dans lequel les utilisateurs pourraient débriefer leur voyage et y ajouter des images.

Screenshot de mes user-journey

C'est l'heure du code

L’un des critère de validation du tfa était de réaliser 3 modules techniques qui intégreraient notre site/application. Je me retrouvais donc, après validation de ceux-ci par les professeurs, à devoir coder le système de filtres, la carte intéractive d’un itinéraire et la barre de recherche de pays avec auto complétion lorsque l’utilisateur entre des lettres.

J’ai commencé à travailler sur l’intégration de la carte intéractive. Je me suis servi de l’API Leaflet comme me l’avait conseillé l’un de mes professeurs. Celle-ci est très utile et facile d’emploi car elle comporte une rubrique « tutoriels » qui permet de coder une première carte de manière très rapide. De plus, on peut facilement créer des marqueurs et des tracés sur la carte ce qui m’a permis de redessiner l’itinéraire avec les coordonnées des étapes. J’ai ensuite voulu changer la tuile de la carte avec OpenStreetMap mais j’ai remarqué que ça alourdissait grandement le poids de la page, j’ai donc préféré garder la tuile de base.

Pour le module concernant les filtres, il fallait d’abord que j’intègre les différents itinéraires et leurs informations à la page. Je devais donc premièrement créer un tableau regroupant ceux-ci.

Screenshot de mon tableau javascript

Et deuxièmement, je devais faire apparaître tous les éléments du tableau. Tout cela se passait en javascript et après m’être longuement renseigné sur le net, j’ai finalement réussi à créer tous mes éléments.

Screenshot de l'intégration des éléments du tableau en javascript

Une fois que tout s’affichait correctement, il ne me restait plus qu’à lier les boutons filtres aux itinéraires concernés. Après ce que j’avais dû faire avant, cette partie était plutôt facile.

Le dernier module était celui de la barre de recherche. À première vue il me semblait plutôt simple, mais je me trompais clairement. Il ne suffisait pas de créer un formulaire en html avec les différentes suggestions de pays, je voulais que l’utilisateur puisse entrer lui même celui qu’il cherchait, pour lui éviter de scroller jusqu’à trouver son choix. Pour cela, je devais faire en sorte qu’une box d’auto complétion apparaisse en fonctione de ce qui était écrit dans la barre. J’ai donc dû utiliser deux écouteurs d’événement, le premier qui réagit quand l’utilisateur écrit et le second quand il valide. Cette tâche fut longue et frustrante car les différentes astuces que je trouvais sur internet utilisaient des principes que je n’avais jamais vus en cours ou que les enseignants nous déconseillaient, mais j’ai finalement obtenu un résultat satisfaisant.

Trouver le bon design

Comme on le fait pour tout site web, je devais désormais déterminer la charte graphique du mien. Ça va de savoir quelles couleurs utiliser, quelle typographie, quel logo va représenter celui-ci et bien évidemment quel nom il aura. Il fallait pour cela que je définisse à quel public mon site s’adresserait principalement. Il s’agissait bien-sûr des étudiants en premier lieu, mais également des backpackers ou même des animateurs scouts qui chercheraient par exemple à programmer un voyage itinérant avec leur section. J’ai donc décidé de rendre mon site un peu similaire à un carnet de voyage, c’est-à-dire économique, pratique, modeste et accessible.

Image d'un carnet de voyage

Concernant les couleurs, j’ai donc choisi de rester dans le même registre, le brun comme couleur principale, qui représente la nature, le bois, l’amitié, la simplicité et qui rappelle les vieux carnets. Et le vert comme couleur contraste qui appuie sur le côté nature et ajoute une touche de calme.

Screenshot de la signification des couleurs choisies

J’avais une idée de mes couleurs, mais il fallait que je les détermine précisément. J’ai alors choisi d’utiliser le site Adobe Color pour trouver quels bruns et quels verts fonctionneraient le mieux pour mon concept. En sélectionnant les couleurs complémentaires, je suis finalement arrivé à un chouette résultat.

Screenshot de ma palette Adobe Color

Avoir les couleurs de son site, c’est bien, mais il est tout aussi important de trouver un bon nom, qui représente parfaitement le service que celui-ci offre et qui reste bien en tête. Au début, je voulais faire un mix entre le thème du voyage et le côté économique et j’ai pensé à “Cheapway”, mais je n’étais vraiment pas satisfait de ce nom. C’est pourquoi je me suis plutôt tourné vers le côté carnet/catalogue et itinéraires. J’ai donc pensé à “Hikelist” qui se traduirait par « Liste de randonnées ». Ce nom me plaisait plutôt bien mais j’avais l’impression de pouvoir trouver encore mieux. J’ai alors réfléchi à mes camps scouts pendant lesquels on faisait de longues randonnées sur 2 voire 3 jours, et ces randonnées, on les appelle des raids. J’avais par conséquent trouvé le nom de mon site : Raidlist.

Il me fallait alors un logo pour accompagner ce nom. J’ai tout de suite pensé à une tente, pour représenter le côté « camping », mais je trouvais que ça ne marquerait pas les esprits, même si ça collait bien au thème. Puis j’ai pensé à une boussole pour insister sur le côté voyage et pour refléter le fait que le service indique le chemin à suivre. C’est cette idée que j’ai décidé de retenir comme vous pouvez le voir.

Le choix des lettres

La typographie est quelque chose de très important pour un site web, elle comprend le choix d’une police, d’un interlignage et de rapports hiérarchiques. Pour ce projet, je devais déterminer un rapport par types d’écrans utilisés par les utilisateurs, donc les smartphones, les tablettes et les ordinateurs. J’ai fait mon choix grâce au tableur excel que j’avais eu en début d’année par l’un de mes professeurs. C’est donc ceux-ci que j’ai retenus :

Screenshot de mes rapports hiérarchiques

Une fois que mes rapports hiérarchiques étaient déterminés, je devais comparer différentes polices de caractères pour prendre celles qui me paraissaient le mieux. C’est pourquoi j’ai décidé de créer plusieurs artboard sur InVision Studio avec les polices Google Fonts que j’avais retenues afin de les comparer.

Screenshot de la comparaison des mes typographies

D’après moi, la combinaison qui fonctionnait le mieux était Alegreya pour les titres et Raleway pour les paragraphes comme vous pouvez le voir au centre sur l’image précédente.

Du papier aux écrans

J’étais désormais prêt à transposer tout ce que j’avais fait auparavant sur des maquettes grâce au logiciel InVision Studio. Tout en commençant par tester la disposition de mon interface sur mobile, je compare différentes possibilités, en particulier pour ce qui est de mes vignettes d’itinéraires. J’aimerais que sur la page d’accueil, l’utilisateur ait accès à de rapides suggestions d’itinéraires mais celles-ci doivent être compactes tout en restant lisibles. Je devais faire attention et prévoir de la place au cas où les titres des vignettes pourraient par exemple être plus longs. De plus, je savais que sur mobile j’utiliserais forcément un slider pour naviguer entre les différentes suggestions, il fallait donc que je choisisse celui qui correspondrait le mieux à ma page.

Screenshot de la comparaison de mes disposition sur mobile

J’ai finalement retenu la disposition de droite sur l’image car elle était pour moi la plus adaptée à mon système.

Lors de mes différents tests, je prenais évidemment le soin d’en parler à mon entourage pour voir si mes décisions étaient les bonnes, si de potentiels utilisateurs comprendraient le fonctionnement. J’ai donc montré mon système de filtres (image ci-dessous) à mes proches et ils m’ont reproché que ça n’était pas vraiment intuitif.

Screenshot de mes filtres avant modifications

De base, je voulais qu’au clic du bouton, les itinéraires correspondants disparaissent, mais ils m’ont bien fait comprendre qu’ils s’attendaient à ce que ça soit l’inverse. C’était pourtant assez évident en me mettant à leur place, si je souhaite faire une randonnée en vélo, je vais d’office cliquer sur le bouton « vélo », et non sur les deux autres afin de faire disparaître les vignettes concernées. C’est pourquoi j’ai adapté mon système en conséquence, comme vous pouvez le voir sur l’image ci-dessous.

Screenshot de mes filtres après modifications

Des détails qui font toute la différence

Mes prototypes étant terminés, il ne me restait plus qu’à coder le tout, ce que je n’ai pas eu trop de difficultés à faire. Il ne me restait donc plus qu’une tâche à accomplir, optimiser le tout pour réduire au maximum le poids de ma page et adapter mes différents fichiers au format rétina pour que les écrans les plus performants puissent les lire au mieux. J’ai donc pris le temps de compresser toutes mes images et vidéo avant de les dupliquer avec deux fois plus de pixels via le logiciel Photoshop.

La fin d’une longue aventure

C’est ainsi que se termine ce long projet qu’est le travail de fin d’année. Après d’interminables semaines à travailler j’en ai enfin vu le bout. Je l’ai trouvé très difficile et encore plus vu les conditions dans lesquelles nous devions nous débrouiller avec le confinement. Pour ma part, ayant passé 80% du temps seul à mon kot car la connexion internet de mon domicile ne me permet clairement pas de travailler dans de bonnes conditions, j’ai énormément manqué de contacts sociaux ce qui a entraîné une baisse de moral et de motivation. Mais j’ai su prendre sur moi et me concentrer jusqu’au bout afin de terminer ce projet et d’en être le plus fier possible. Aussi, comme je l’ai mentionné plus haut, il y a également du positif à en tirer. Travailler seul et de manière beaucoup plus indépendante m’aura obligé à me remettre en question sur tous les détails du travail, mais également à avoir plus confiance en mes capacités.

Prototypes InVision Studio

Vous trouverez ici les différents prototypes que j'ai réalisés afin de concrétiser mon projet :