Designing With Web
Partie 3 · Phase 1: Prototyper

---

Comment remplir ce document ?
Modifiez simplement le fichier index.html en remplissant tous les élements qui portent la classe .todo. Vous pouvez ensuite supprimer la classe petit à petit pour vous assurer que vous n'oubliez rien (chaque passage manquant sera coloré).

Au passage, "lorem ipsum" est juste un texte factice utilisé pour les espaces de texte et pour tester les mises en page. Vous pouvez en apprendre davantage à ce sujet sur loremipsum.io.

Groupe 1

Membres du groupe

• Christopher BERMAN : lien vers mon devoir glitch
• Ismaël VAS : lien vers mon devoir glitch
• Franck E SOUSA FELICIANO : lien vers mon devoir glitch
• khaled ELLAYMOUNI : lien vers mon devoir glitch
• Mathis MALMEZAC : lien vers mon devoir glitch

Notre sujet

Notre sujet est le tourisme durable.
Il provient de l'Objectif de Développement Durable de l'ONU numéro 11, intitulé "Villes et communautés durables".

Notre problématique

La problématique que nous avons formulée ensemble est "Comment rendre plus visibles et accessibles les établissements éco-responsables auprès des touristes ?". Nos deux projets ci-dessous cherchent à répondre à cette question.

---

Projet 1 · eco scan

Contexte

Quand ? Où ? Qui ? Pourquoi ? Expliquez le contexte de votre projet.

L'application "éco-scan" sera utilisé principalement par les utilisateurs qui font du tourisme et qui souhaitent avoir des informations sur les endroits qu'ils visitent (Monuments,restaurants , commerces,spécialités locales,...) et qui permet aux habitants locaux de mettre en avant leurs produits locaux et leur savoir faire.

Cible + persona

Pour qui ? Décrivez les utilisateurs et les bénéficiaires de votre projet, puis proposez un persona rapide (reportez-vous à la partie 2 du cours pour des conseils méthodologiques).

Notre application "éco-scan" ciblera principalement les personnes dans une "fourchette d'âge" située de 30 à 70 ans qui sont passionnées d'histoire, d'écologie,de tourisme (monuments, patrimoine local,spécialités culinaires locales...) et qui souhaitent être " éco-responsable" et qui ont pour objectif de conserver et redynamiser le patrimoine culturel local.

Service proposé

Quoi ? Comment ? Expliquez comment votre solution fonctionne, ce qu'elle permet à l'utilisateur de faire, et comment elle résout le problème initial.

Nous proposons une application qui permet à l'utilisateur une fois arrivé dans un pays, quelque soit l'endroit où il se trouve, d'avoir accès aux patrimoines culturels locaux grâce à notre application qui le géolocalise en permanence ainsi qu'à la notification envoyée par celle-ci, des lieux à proximité de l'utilisateur.

Fonctionalités + parcours utilisateur

Expliquez quelles fonctionnalités votre projet implique et hiérarchisez-les de la plus importante à la moins importante. Rappelez-vous : une fonctionnalité est un verbe + un nom, elle décrit une action que l'utilisateur peut faire.

Ensuite, pour votre première et plus importante fonctionnalité (la fonctionnalité clé), écrivez et dessinez le parcours utilisateur : quelles étapes l'utilisateur devra-t-il franchir, de la situation initiale à la situation finale ? Encore une fois, référez-vous à la partie 2 du cours pour des conseils méthodologiques.

Fonctionnalités

• La 1ère fonctionnalité est l'activation du GPS
• Fonctionnalité 2: Connexion au compte.
• Fonctionnalité 3:Naviguer
• Fonctionnalité 4:Page descriptive.
• Fonctionnalité 5:Tutoriel.
• Fonctionnalité 6:Scan AR.

Parcours utilisateur

• Situation initiale 1:Notre utilisateur par faire du tourisme éco-responsable. et souhaite utiliser notre application pour bénificier de tous les patrimoines culturels locaux des lieux visités et en avoir la description historique ainsi qu'une fonction de réalité augmentée qui lui permet de découvrir le passé et le futur d'un patrimoine culturel local.
• Étape 1 : l'activation du "GPS" par défaut pour pouvoir utiliser notre application
• Étape 2 : Création du compte et connexion à l'application.
• Étape 3 : Une fois sur l'écran d'accueil,appuyer sur " naviguer" ,ce qui ouvrira le scanner et ainsi règler la distance de la localisation des patrimoines culturels locaux.
• Étape 4 : Une fois reçu la notification d'un lieu détecté grâce à notre application. Dans cette notification se trouvera la distance ainsi que le type de bâtiment.La personne intéréssée n'aura qu'à appuyer sur la notification pour ouvrir l'écran de page de description du patrimoine culturel choisi.
• Étape 5 :Une fois sur l'écran d'accueil, les utilisateurs pourront utiliser le "tutoriel" pour pouvoir apprendre à utiliser la réalité augmentée.
• Situation finale 6: Sur l'écran de description, appuyer sur "scan AR" ce qui permettra à l'utilisateur d'ouvrir la fenêtre "AR" pour ensuite diriger son téléphone sur le bâtiment ciblé. Une fois choisi, l'"AR" nous montrera à quoi ressemblait le bâtiment à l'époque et éventuellement à quoi celui-ci ressemblera dans le futur.

Illustrations

Trouvez des images qui décrivent l'univers autour de votre service (contexte, utilisateurs, lieux, technologies...). Ne cherchez pas à illustrer le service final que vous avez en tête mais plutôt son contexte. En gros, traduisez les mots-clés que vous avez utilisés dans les descriptions ci-dessus en images.

Benchmark

• KaviAR Gate, gate.kaviar.app : KaviAR Gate est une application de réalité augmentée qui permet de visiter des lieux sans sortir de chez soi. Notre apllication est diférente puisque le principe n'est pas de rester chez soi, mais d'obtenir des informations supplémentaires au cours de notre visite sur le lieu du site.
• HistoPad, histovery.com, L'Histopad de histovery permet de visiter des monuments avec des informations supplémentaires qui expliquent le contexte historique du monument à l'aide d'une tablette. Les principales différences sont que notre application est gratuite et qu'elle se concentre sur les sites éco-responsables, ce qui n'est pas le cas d'Histovery.
• ...

Références

• Film:Gabriel et la Montagne, Lien youtube , Gabriel est une personne qui voyage sans argent qui va de ville en ville comme un local a pied ce qui respect la penser éco-responsable.
• "J'irai dormir chez vous", Lien Wikipedia, L'animateur Antoine de Maximy voyage dans un pays différent à chaque émission et tente de se faire inviter chez les habitants locaux pour y passer la nuit, son intention étant de découvrir leur mode de vie et leurs coutumes.
• Canva, canva.com: nous avons utilisés Canva pour la création de notre logo et pour la conceptualisation de notre wireframe.
• ...

---

Projet 2 · Green Karma : l'appli qui récompense les touristes éco-responsables.

Contexte

Quand ? Où ? Qui ? Pourquoi ? Expliquez le contexte de votre projet.

Pollution, dérèglement climatique, destruction de la faune et la flore…

Aujourd’hui, les préoccupations écologiques sont prégnantes au sein de notre société. Il est devenu essentiel de favoriser une consommation éco-responsable, notamment dans le secteur du tourisme, à l’origine de maints problèmes environnementaux.

L’application Green Karma répond à cet enjeu en récompensant les choix éco-responsables du consommateur et en rendant plus facile d’accès les établissements qui jouent le jeu du tourisme durable.

Dès lors que le consommateur souhaite trouver un établissement éco-responsable pour un séjour ou une activité touristique dans une zone géographique donnée, il peut consulter l’appli et trouver des résultats à sa recherche. Puis, après sa réservation dans l’établissement, il gagne des points de « Karma ».

Cible + persona

Pour qui ? Décrivez les utilisateurs et les bénéficiaires de votre projet, puis proposez un persona rapide (reportez-vous à la partie 2 du cours pour des conseils méthodologiques).

Cette application mobile est principalement destinée aux touristes prenant en considération le critère de l’écologie dans leur choix de consommation. Avec cette application, ils pourront vite et facilement découvrir des établissements éco-responsables au cours de leurs voyages, sans avoir à faire de longues recherches sur internet pour les trouver. Une autre catégorie d’utilisateurs possible serait toute personne qui, bien que n’étant pas en séjour touristique, souhaite favoriser les établissements éco-responsables pour ses diverses sorties (restaurant, activité de loisir, etc.) et profiter du système de points pour obtenir des avantages offerts par l'appli.

Service proposé

Quoi ? Comment ? Expliquez comment votre solution fonctionne, ce qu'elle permet à l'utilisateur de faire, et comment elle résout le problème initial.

Sous forme d'une application mobile gratuite, nous proposons à tout utilisateur de découvrir, après une recherche simple et rapide, tous les établissements éco-responsables disponibles dans la zone géographique définie par lui. Il pourra ainsi trouver des logements (gîtes, hôtels, cabanes et autres logements insolites), restaurants et activités de loisirs qui respectent les principes de développement durable.

Fonctionalités + parcours utilisateur

Expliquez quelles fonctionnalités votre projet implique et hiérarchisez-les de la plus importante à la moins importante. Rappelez-vous : une fonctionnalité est un verbe + un nom, elle décrit une action que l'utilisateur peut faire.

Ensuite, pour votre première et plus importante fonctionnalité (la fonctionnalité clé), écrivez et dessinez le parcours utilisateur : quelles étapes l'utilisateur devra-t-il franchir, de la situation initiale à la situation finale ? Encore une fois, référez-vous à la partie 2 du cours pour des conseils méthodologiques.

Fonctionnalités

• Fonctionnalité 1 (fonctionnalité principale): trouver des établissements éco-responsables.
• Fonctionnalité 2 : Réserser un service en ligne.
• Fonctionnalité 3 : Obtenir des réductions et des avantages.

Parcours utilisateur

• Situation initiale : l'utilisateur veut organiser son prochain voyage en respectant les principes de tourisme durable.
• Étape 1 : il se rend sur l'application.
• Étape 2 : il recherche et sélectionne un établissement éco-responsable.
• Étape 3 : après avoir sélectionné son établissement, il réserve directement sur l'application.
• Situation finale : l'appli le redirige vers une page qui lui détaille la transaction réalisée et lui offre des points de karma, qu'il pourra accumuler puis échanger contre des réductions et avantages.

Illustrations

Trouvez des images qui décrivent l'univers autour de votre service (contexte, utilisateurs, lieux, technologies...). Ne cherchez pas à illustrer le service final que vous avez en tête mais plutôt son contexte. En gros, traduisez les mots-clés que vous avez utilisés dans les descriptions ci-dessus en images.

Benchmark

• Airbnb, airbnb.fr : cette plateforme propose aussi des hébergements, mais elle ne propose pas exclusivement des hébergements qui respectent les principes du tourisme durable. Notre plateforme propose également des lieux de commerce et d'activités, ce qui n'est pas le cas de Airbnb. Notre application propose des groupes hôteliers, du moment qu'ils respectent les principes du tourisme durable, alors que la plateforme Airbnb ne propose pas d'hôtel.
• The Fork, thefork.fr : à l'instar de notre application mobile, The Fork est une plateforme qui permet de réserver des places aux restaurants, mais notre appli se diffère d'une part en proposant exclusivement des restaurants labellisés éco-responsables, et d'autre part en proposant également des logements et des activités.
• We Go GreenR wegogreenr.com: propose des hébergements éco-responsables partout en France. Il y a cependant plusieurs différences avec notre projet. Tout d'abord, We Go GreenR existe exclusivement en site web, alors que nous sommes une appli. Ensuite, il propose uniquement des gîtes éco-responsables, tandis que nous proposons également d'autres types d'activités.

Références

• The Fork, thefork.fr: nous nous sommes inspirés de l'interface et du système de gain de points à chaque réservation.
• Airbnb, airbnb.fr: nous nous sommes inspirés du fonctionnement de l'application de airbnb pour conceptualiser notre propre application.
• Canva,canva.com: nous avons utilisés Canva pour la création de notre logo et pour la conceptualisation de notre wireframe.
• WeWard, weward.fr :nous nous sommes inspiré du fonctionnement de récompense.