Identité

<
>
Charte Graphique - My Tour Live - page 1 Charte Graphique - My Tour Live - page 2 Charte Graphique - My Tour Live - page 3 Charte Graphique - My Tour Live - page 4 Charte Graphique - My Tour Live - page 5 Charte Graphique - My Tour Live - page 6 Charte Graphique - My Tour Live - page 7 Charte Graphique - My Tour Live - page 8 Charte Graphique - My Tour Live - page 9 Charte Graphique - My Tour Live - page 10 Charte Graphique - My Tour Live - page 11 Charte Graphique - My Tour Live - page 12 Charte Graphique - My Tour Live - page 13 Charte Graphique - My Tour Live - page 14 Charte Graphique - My Tour Live - page 15 Charte Graphique - My Tour Live - page 16

L’identité de la marque My Tour Live est composée de 3 entités : le corporate, l’application, la plateforme de réservation.

La plateforme où se déroule les visites virtuelles, qui est une SPA (Single Page Application), utilise le framework Vue.js et enfin le site web de réservation réalisé sous Laravel, Vue.js ainsi que mon framework Scss personnel Weaver.

L’identité du corporate se veut plus subtile et sobre que les 2 plateformes web qui, elles, sont plus colorées avec une approche plus “digital friendly” dans leur conception visuelle.

Espace utilisateur

My Tour Live - Mockup MacBook pro - page de login
My Tour Live - page compte

Le site de réservation contient plusieurs rôles utilisateurs :

• les clients (rôle pas défaut) qui ne peuvent accéder qu’au côté front du site, à la vue client.

Les guides, éditeurs et admins, eux, ont tous accès au back-office mais avec des permissions différentes :
• les guides peuvent gérer créer de nouvelles visites et gérer uniquement leurs propres visites.
• les éditeurs n’ont accès qu’à la gestion des articles
• les admins ont un contrôle total du back-office.

Système de réservation

My Tour Live - Réservation - Calendrier - 1 My Tour Live - Réservation - Calendrier - 2 My Tour Live - Réservation - Calendrier - 5 My Tour Live - Réservation - Calendrier - 4 My Tour Live - Réservation - Calendrier - 3
My Tour Live - Réservation - Aside - 1 My Tour Live - Réservation - Aside - 2 My Tour Live - Réservation - Aside - 3 My Tour Live - Réservation - Aside - 4 My Tour Live - Réservation - Aside - 5

Le système de réservation réalisé en Vue.js permet une grande interactivité avec un traitement de données à chaud afin de permettre à l’utilisateur d’effectuer son ajout au panier de manière rapide et intuitive.

L’application présente, à gauche, l’année et les mois associés et au milieu le calendrier du mois sélectionné. Les visites passées ne sont pas visible, les jours passés ne sont pas non plus sélectionnable. Les jours suivants sont tous sélectionnables, les jours avec des visites sont préciser avec un style différent.

Parcours client

My Tour Live - Parcours client - page visites My Tour Live - Parcours client - calendrier réservation My Tour Live - Parcours client - pop-up validation réservation My Tour Live - Parcours client - panier My Tour Live - Parcours client - participants My Tour Live - Parcours client - paiement My Tour Live - Parcours client - historique d'achats

Le parcours client, lors de son achat, commence par la sélection de la visite souhaitée, puis de la date et l’horaire.

Cette partie du parcours peut également s’effectuer sans avoir de compte et donc sans être connecté sur la plateforme. Un système de panier mis en session a été réalisé afin de permettre aux gens de le préparer avant d’avoir à créer un compte client.

Lorsque l’acheteur décide de passer au paiement il créer son compte ou se connecte pour afficher son panier. S’il avait déjà des produits dans son panier dans une connexion précédente celui-ci s’ajoute au panier global.

Le processus de paiement s’effectue en 3 étapes : validation du panier, renseignement des participants et enfin choix de la méthode de paiement (carte bancaire, Paypal ou Alipay).

Une fois le paiement effectué et validé le client reçoit sa facture par mail, il peut également la retrouver dans son espace “historique” de son compte.