Freed
Case-study

1 - Première idée

Étant donné que je suis un 2.5, je savais à quoi m’attendre plus ou moins pour le TFA. Donc première chose que je me dis c’est de ne pas faire les mêmes erreurs que l’an passé et être à la bourre. Je me dis donc plus vite tu trouves un sujet qui t’intéresse plus vite tu peux commencer à travailler. Je réfléchis aux choses que j’aime, qui pourrait m’intéresser et là, je me dis pourquoi ne pas faire une application de voyage. Le début de mon TFA venait de commencer.

Photo de mes idées du premier sujet
Première idée de TFA

2 - Un service

Premier rendez-vous au sujet de notre TFA, on a le droit a un joli discours de M. Bourgeaux nous expliquant dans les grandes lignes notre TFA de cette année. Mais la chose importante à retenir de ce discours, c’est que cette année le TFA doit être un service et non un site de festival comme certaines personnes pourraient en faire. C’est bien beau mais un service c’est quoi ?

Service = ce que l'on fait pour qqn, avantage qu'on lui procure bénévolement.

Dans mon cas, j’ai pris le mot service comme quelqu’un chose d’utile, qui aide les personnes, qui leurs rend un service.C’est ce que j’ai cherché à faire avec mon TFA.

3 - Dix thématiques

Avant de commencer notre projet, nous devions proposer 10 thèmes, thématiques à nos professeurs et dans ces 10 thèmes plusieurs, un ou aucun ne serait validé. Dans mon cas, ayant l’idée d’une application de voyage je la propose directement mais malheureusement celle ci n’est pas validée. Pas de panique, dans mes 10 thèmes j’avais proposé le fait d’en apprendre plus et plus facilement sur la vie en van et c’est celui-ci qui a été validé. Je reste donc toujours dans l’idée du voyage mais sur un sujet un peu plus spécifique.

4 - En apprendre plus et plus facilement sur la vie en van

Me voilà avec mon sujet, un sujet qui me passionne étant donné que partir en van est un de mes rêves depuis un petit temps. J’ai choisi ce sujet parce que la vie en van devient de plus en plus à la mode ces dernières années mais il n’est pas toujours facile de se renseigner sur le sujet alors je m'étais dis pourquoi ne pas rassembler des informations utiles aux voyageurs dans une seule application.

5 - Recherche

Mon but premier était de parler de la vie en van sous toutes ses formes c’est à dire les énergies,nécessaires, le coût des rénovations, les destinations,... mais après avoir parlé avec M. Bourgeaux, il était peut être préférable de parler d’un sujet plus précis comme le premier voyage en van ou la rénovation d’un van.

Les présuppositions

Je suis partit sur l’explication du premier voyage en van, j’avais donc plusieurs présuppositions :

  • où partir pour la première fois
  • quels objets sont nécessaires
  • où je peux me garer
  • quels app télécharger
  • les infos importantes à savoir
  • comment avoir du wifi partout
  • combien de temps partir
  • où trouver de l’eau
  • bien s’organiser
  • partir seul ou accompagné

Les 5 W

J’ai aussi pris le temps de développer mes 5 W c’est à dire :

  • Who : Les voyageurs, aventuriers
  • What : en apprendre plus sur la vie nomade, en van
  • When : lors du premier voyage
  • Where : dans n’importe quelle situation
  • Why : pour ne pas s’orienter de la mauvaise façon

User journey

Mise en situation : Thomas a 18 ans, il vient de finir ses études secondaire. Il ne souhaite pas faire d'études supèrieurs de suite mais plutôt prendre une année pour pouvoir voyager.

  • Il cherche sur internet comment voyager dans le monde ou en Europe.
  • Il découvre l'idée de voyager en van et de pouvoir être autonome.
  • Il n'y connait pas grand chose sur la vie en van donc se renseigne.
  • Découvre l'application Freed
  • Grâce a Freed, il trouve tout ce dont il avait besoin, des destinations, des renseignement,...
  • Il décide alors d'acheter un van grâce aux indications de Freed
  • Il rénove lui même son van
  • Ensuite, il part un an faire le tour de l'Europe.

User research

Grâce à mes présuppositions et mes 5W je pouvais me lancer dans mes top tasks. Pour cela j’ai donc créé un questionnaire pour m’aider à choisir et à trouver les bons sujets que j’allais aborder dans mon application. M’étant mis d’accord auparavant sur le fait que je ne parlerais que du premier voyage, j’avais tout de même l’envie de parler de l’achat d’un van et des informations tournant autour de ce sujet.

Dans mon formulaire, j’ai d'abord voulu m’assurer que le sujet de la vie en van et d’en apprendre plus dessus était quelques chose d’intéressant et c’était le cas :

Screenshot d'une réponse sous forme de graphique du formulaire

Ensuite, j’ai voulu savoir si les utilisateurs préféraient en apprendre sur la premier voyage ou sur l’achat d’un van :

Screenshot d'une réponse sous forme de graphique du formulaire

J’ai donc remarqué après le sondage, que les utilisateurs préféraient en apprendre davantage sur l’achat d’un van mais également sur le premier voyage. En somme, les deux sujets qu’ils désiraient.

TopTasks

Et pour finir, j’ai bien identifié les sujets que les utilisateurs étaient le plus disposés à aimer et j’ai pu sortir ceux ci :

Screenshot d'une réponse sous forme de graphique du formulaire
Screenshot d'une réponse sous forme de graphique du formulaire

J'ai pu sortir six sujets que les utilisateurs voudraient voir dans l'application :

  • Le coût total d’un van (rénovation, électricité,..)
  • Les consommations d’énergie
  • L’organisation dans un van
  • Les applications importantes lors d’un voyage
  • Comment obtenir internet en van
  • Les destinations favorables pour un road-trip

J’avais donc mes top tasks mais toujoursdeux sujets : l’achat d’un van et le premier voyage, je ne savais pas encore comment j’allais élaborer mon application.

6 - L'architecture

J’avais donc deux sujets et j’avais envie de les traiter tous les deux donc il fallait que je réfléchisse à une application qui pouvait allier les deux principaux intérêts de l’utilisateur : en apprendre plus sur l’achat d’un van et le premier voyage.

Ma première idée

Mon idée était assez simple, c’était de diviser l’application en deux parties c’est à dire “L’achat d’un van” et “Le premier voyage en van”, l’utilisateur aurait eu le choix entre l’une des deux parties en entrant dans l’application afin de s’informer sur ce qui l’intéressait. Chaque partie aurait eu son lot d’informations.

Photo de mes idées du premier sujet
Idée de séparation des deux sujets
Photo de mes idées du premier sujet
Idée de séparation des deux sujets

Pour ce qui est de la transmission de l’information, dans les deux parties j’aurais fait des articles explicatifs sur un sujet bien précis comme par exemple pour l’achat, j’aurais parlé du coût total d’un van mais aussi de la consommation d’énergie et pour le premier voyage, j’aurais parlé des destinations, de l'organisation.

Idée final

Après y avoir réfléchis longuement, je n’aimais plus vraiment l’idée de séparer les deux sujets. Je trouvais plus intéressant de rassembler tous les sujets que j’avais pu identifier grâce à mon formulaire et de faire une application centrale. Mais c’est bien beau d’avoir plusieurs sujets, il faut tout de même les trier.

Pour ça, j’ai choisi de diviser l’application en 3 grosses catégories : Achat, Préparation et Départ. Grâce à ces trois catégories l’utilisateur va pouvoir s'identifier à une partie qu’il lui convient et se situer dans la liste des catégories. De plus, j’ai rajouté une catégorie populaire, pour que les informations les plus utiles s’y retrouvent plus facilement.

Photo de mes idées du premier sujet
Structure de mon idée final

7 - Mon app

Dans cette partie, je vais vous expliquer tout ce qui va tourner autour de mon application c’est à dire un résumé de ce qu’elle propose, les fonctionnalités qu’elle embarquera, la réflexion que j’ai eu par rapport au futur de l’application mais aussi son architecture.

Ce que propose l'application

C’est une application pour les futurs voyageurs en van, qui leurs propose un certain nombre d'informations sur l’achat et le premier voyage en van. Toutes ces informations sont filtrées en plusieurs catégories comme populaire, achat, préparation et départ. Les informations sont transmises sous la forme d’articles afin de renseigner au mieux l’utilisateur.

Les différentes fonctionnalités embarquées

L’application embarquera plusieurs fonctionnalités pour pouvoir offrir à l’utilisateur une expérience des plus optimales. Dans un premier temps, il y aura la fonctionnalité de favoris c’est à dire que l’utilisateur pourra enregistrer les articles de son choix afin de les retrouver plus rapidement par la suite. Ensuite, il y aura la fonctionnalité de recherche qui permettra à l’utilisateur de trouver rapidement ce qu’il l’intéresse. De plus, au sein de l’article même il aura un accès rapide à l’information afin de retrouver directement ce qu’y intéresse l’utilisateur dans l’article et non devoir lire tout l’article pour trouver l'information utile. Les articles seront aussi filtrés sous forme de catégorie pour un accès à l’information plus rapide.

Screenshot des différentes fonctionnalités
Les différents fonctionnalités disponibles

Mes réflexions par rapport à l’application

Je propose déjà plusieurs fonctionnalités par rapport à mon application mais cela ne s’arrête pas là. Mes capacités de développement et mon temps manquaient à l’appel mais j’ai tout de même réfléchi à un futur pour mon application. Pour l’instant, l’application se cantonne à la transmission d’informations de ma part vers les utilisateurs mais j’aimerais dans le futur créer un espace où les utilisateurs pourront échanger leur expérience afin de s’entraider. Ensuite, j’aimerais proposer deux futurs fonctionnalités qui ajouteront un plus à mon application :

  • Check-list : l’utilisateur pourrait accéder à une check-list pré-établie avec une liste des articles nécessaires pour partir en voyage, en ayant toujours la possibilité d'y en ajouter d’autres et de créer sa propre liste.
  • Formulaire interactif : dans un de mes articles, je parle du coût total qu’un van peut revenir, c’est à dire avec l’achat du véhicule, la rénovation,... mais ce n’est pas très intuitif donc j’ai décidé de créer un formulaire interactif, c’est à dire que l’utilisateur pourrait choisir au fur et à mesure ce qu’il désire. Cette fonctionnalité permettrait de donner à l’utilisateur un budget approximatif et personnalisé pour son van.
Screenshot des différentes fonctionnalités futurs
Les différents fonctionnalités futurs

L'écriture

Étant donné que mon application est basée sur des articles, il fallait que je porte beaucoup d'importance à l'écriture de chacun des articles. Je me suis donc énormément renseigné sur les différents sujets que j'abordais, que ça soit avec des vidéos, des articles, des sites,...

Ensuite, je suis passé à la rédaction ce qui m'a prit énormément de temps mais du temps bien investi car je voulais proposer la meilleure des qualités pour mon application.

8 - Identité graphique

Avant de commencer à travailler sur l’application, je me suis énormément inspiré, que ce soit sur Dribble, Behance,.. mais aussi sur des marques bien connues qui étaient dans le thème, comme Patagonia, The North Face,... Toutes ces recherches m’ont permis de commencer avec des wireframes et des prototypes papier.

Photo de mon wireframe pour ma homepage
Wireframe de ma homepage

Polices et couleurs

Pour ce qui est de la police, à la base je voulais partir sur quelque chose de plus voyage, de plus spécial, donc j’avais trouvé la police de Patagonia qui était assez courbée mais ça ne collait pas trop avec l’application. Il me fallait quelques chose de plus lisible, de plus clair pour pouvoir donner l’information du mieux possible donc je suis resté sur une police classique.

Helvetica Neue

Lato

Deux polices très utilisé mais qui fonctionne bien et c’était ce que je cherchais des polices qu’on a l’habitude de voir et qui fonctionne.

En ce qui concerne les couleurs, étant dans le thème du voyage j’ai décidé de m’orienter sur des couleurs assez soleil, eau,... et toujours en me basant sur Patagonia j’ai trouvé ces couleurs-ci.

Mais elles ne me convenaient pas vraiment, je voulais quelque chose de plus frais, de plus clair, donc je les ai changées pour obtenir :

Ensuite, en les délavant légèrement, j’ai pu obtenir des couleurs plus pâles pour certains endroits.

Nom et logo

Pour le nom de mon application, je ne trouvais rien qui me plaisait. Ma méthode de recherche était de mettre plusieurs mots en rapport avec mon application comme van, voyage, liberté,... et d’essayer de trouver un nom en rapport avec tout ça. C’est à ce moment là que j’ai trouvé, Freed.

Freed : signifie libéré en anglais, ce qui colle parfaitement à mon application car le voyage en van signifie pour beaucoup, la liberté de mouvement, le déplacement, une nouvelle vie, libérée de l’agitation de la vie quotidienne.

J’avais mes typos, mes couleurs, mon nom, je pouvais donc commencer à réfléchir à un logo. Mes premières idées étaient de mélanger le F de Freed et un oiseau, signifiant la liberté, mais pas très concluant.

Photo de mes premiers logos
Croquis de mes premiers logos
Photo de mes premiers logos
Test de mes premiers logos

Je suis donc parti sur quelque chose de plus simple mais plus efficace.

Logo final de Freed
Logo final de Freed

La vague verte représentant les vagues de la mer, le nom Freed signifiant l’océan et le rond rouge/orange signifiant le soleil. De plus, ces différents éléments graphiques pourront être réutilisés dans mon application.

Design de mon application

J’ai mes couleurs, mes typos, mon nom, mon logo, mes wireframes, il est temps de passer au design que je vais travailler dans le logiciel Sketch. C’est la partie que je préfère lors de la création d’un nouveau projet comme celui-ci. Comme tous les designs j’ai eu beaucoup de changements, d’erreurs, d’hésitations.

Essais de hompage design
Premiers essais de ma homepage

Mais après de longues heures de réflexions, de changements, d’améliorations, j’ai réussi à produire un design correct. Certes, il serait toujours possible de l’améliorer mais à un moment donné il faut s’en satisfaire auquel cas,on ne s’arrête plus. Pour ce qui est de ma landing page, je suis resté dans le thème de mon application c'est à dire sobre, frais et aéré.

Screenshot de mon design final
Une partie de mon design final

Si vous désirez voir mon design en entier, j’ai fait un prototype Invision regroupant tous mes designs mais aussi mes fonctionnalités futures.

De plus, si vous désirez observer une petite animation de mon design vous pouvez la découvrir juste ici :

9 - Le développement

Voilà ma bête noire, j’avais énormément de doutes, d'appréhension par rapport au développement de mon application. Le code c’est pas toujours quelque chose que je maîtrise facilement donc la première chose que j’ai cherché à réaliser c’était de faire au plus simple avec des fonctionnalités moindres. C’était une erreur de ma part et j’allais retomber dans le même travers que l’an passé : trop simple, pas assez recherché. Donc j’ai pris mon courage à deux mains et je me suis lancé dans le développement de mes favoris, de ma recherche et de mon filtre de contenu en JSON.

Mes erreurs

N’étant pas trop doué en dev, j’ai tendance à écrire un code pas très propre donc c’était ça mon erreur. Je devais sans cesse réfléchir à d’autres solutions pour pouvoir proposer quelque chose de propre et non pas écrire un code plus ou moins bâclé comme j’avais l’habitude de le faire.

10 - Mon ressenti

Comme l’an passé, mes défauts étaient la gestion du temps et le développement. Savoir gérer son temps est une chose très difficile mais surtout très importante dans des projets comme celui-ci donc c’est une chose que je dois corriger. Ensuite, pour le développement je pense m’être bien plus perfectionné que l’an dernier, j’ai fait des choses dont je ne me croyais pas capable.

J'ai ressenti énormément de pression par rapport à ce projet, beacoup plus que l'an passée mais je suis bien plus fier de ce dont je propose que l'an passée.

Aprés toutes ces longues explications partant d'une idée à une application développé vous souhaitez découvrir Freed, je vous invite à clicker sur ce bouton.