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’année passée 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 sur le 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 quelque chose d’utile, qui aide les personnes, qui leurs rend un service. C’est ce que j’ai cherché à produire avec mon TFA.

  • bulle 1
  • bulle 2
  • bulle 3

3 - Dix thématiques

Avant de commencer notre projet, nous devions proposer 10 thèmes à nos professeurs et dans ces 10 thématiques plusieures, une ou aucune ne serait validée. 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é confirmé. 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 me suis 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 parti sur l’explication du premier voyage en van, j’avais donc plusieurs présuppositions :

  • où partir pour la première fois
  • quels objets à emportés
  • où se garer
  • quels apps télécharger
  • les infos importantes à connaître
  • comment obtenir du wifi partout
  • choisir le durée de son voyage
  • 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 secondaires. Il ne souhaite pas faire d'études supèrieures de suite mais plutôt prendre une année sabbatique 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 à Freed, il trouve tout ce dont il a besoin, les destinations, les renseignements,...
  • 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 d'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 le désir 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 mon sujet était intéressant et ce fût 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 davantage 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 plus de la moitié des utilisateurs préférait en apprendre davantage sur l’achat d’un van mais également sur le premier voyage.

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

Six sujets en particulier se dégagent dans l'application :

  • Le coût total d’un van (rénovation, électricité,..)
  • La consommation 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 toujours deux 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 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 finale

Après y avoir réfléchi 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 d'en faire une application centrale. Mais c’est bien beau d’avoir plusieurs sujets, encore fallait-il 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 pourrait s'identifier à une partie qu’il lui conviendrait 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.

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 embarque, 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 qui 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 pourraient échanger leur expérience afin de s’entraider. Ensuite, j’aimerais proposer deux futures fonctionnalités qui ajouteront un plus à mon application :

  • Check-list : l’utilisateur pourrait accéder à une check-list pré-établie avec une liste les 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'adention à 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.

  • bulle 1
  • bulle 2
  • bulle 3

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ées mais qui fonctionnent bien et c’était ce que je cherchais, des polices qu’on a l’habitude de voir et qui fonctionnent.

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é les couleurs reprisent ci-dessous.

  • Carré 1
  • Carré 2
  • Carré 3
  • Carré 4

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 celles-ci :

  • Carré 1
  • Carré 2
  • Carré 3

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

  • Carré 1
  • Carré 2
  • Carré 3

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é 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 pour 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éflexion, de changements, d’améliorations, j’ai réussi à produire un design correct. Certes, il est 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 tellement 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, beaucoup plus que l'an passé mais je suis bien plus fier de ce dont je propose que l'an dernier.

11 - Ma deuxième session

Comme ma première session ne s'est pas précisément déroulée comme souhaitée, j'ai amélioré mon projet afin qu'il soit validé. Et grâce à cette seconde session, j'ai pris conscience que chaque petit détail avait son importance. Un projet en tant que tel peut paraître idéal dans son ensemble mais il est primordial de peaufiner les petits détails, sans cela il n'a pas lieu d'être.

12 - Freed

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