Want to make creations as awesome as this one?

Transcript

SERVICES DE TRANSPORT HAUT DE GAMMES POUR UNE CLIENTELLE EXIGEANTE ET INTERNATIONALE

a prpopos de moi

01

PRésentation

01. About ME

Moumen arif 46 ans

Fonctionnaire territorial durant 15 ans, j'ai créé mon entreprise de VTC en 2016. Ma découverte du numérique après une formation WordPress en 2021 m'a passionné, m'orientant vers une formation en développement web et web mobile chez Simplon. J'aime résoudre des problèmes et créer des solutions concrètes. J'ai déjà été sollicité pour des projets et vise un poste de développeur junior React/Node.js après ma formation. Mon parcours est guidé par ma quête d'accomplissement et d'évolution dans le monde de l'IT.

CONSTAT & CONTEXT

02

ANALYSE DU BESOIN

Le haut de gamme peu concurrentiel mais très exigeant, offre une opportunité de croissance importante et une clientèle en demande.

Évolution du Marché des VTC : De la Libéralisation à la Nécessité d'une Présence Numérique

Libéralisation du secteur des VTC en 2009 digitalisation (UBER) 60 000 chauffeurs en France en 2022 500 en 2010. CA 4 milliards d’euros en 2021.Trois catégories distinctes :

  1. Haut de gamme,
  2. Premium
  3. Classique.
Les deux premières offrent des opportunités de croissance. Les clients du segment haut de gamme recherchent des solutions en ligne, soulignant l'importance d'une présence numérique crédible pour les entreprises VTC.

"L'offre haut de gamme et premium est rare sur le web. La clientèle du segment haut de gamme peinent à trouver des solutions autres que les plateformes type Uber et les taxis."

02. Constat

Prestations de transport haut de gamme pour une clientèle exigeante et internationale

Une réponse à un besoin concret

Web App « Caraktair » Prestations de transport haut de gamme et premium, au départ de Paris et de l’Ile de France, pour une clientèle exigeante et internationale.« Caraktair » se concentrera sur les gammes de véhicules et les prestations les plus demandés par ses cibles.

"Le web est un canal incontournable et un élément clé de la stratégie d’une entreprise de VTC. Il offre cette possibilité d’être présent et visible constamment, en tout temps et en tout lieu."

02. Context

02. attentes & objectifs

objectifs

  • Générer du trafic qualifié
  • Toucher les clients Internationaux
  • Etablir une présence en ligne solide
  • Augmenter les reservation

Attentes

  • Attirer puis convertir les visiteurs en prospects puis en clients
  • Fidéliser les clients
  • Attirer de nouveaux partenaires (clés d’or, palaces parisiens et hôtels 5 étoiles, tours opérateurs)
  • Augmenter mon chiffre d’affaires

03

Visuelle & interface

Conception

NUAGE DE MOTS

Un brainstorming à été réalisé en amont de la conception visuelle.Cette recherche de mots clés c'est faite durant un atelier avec mes collèges de formation et avec l'aide d'amis chauffeurs vtc.

03. BRainstorming

ANALYSE DIFFérentielle

La méthode d'Osgood a été appliquée aux mots résultant du brainstorming afin de les filtrer pour ne concerver que les plus pertinents pour le projet.L'analyse différentielle est basé sur deux critères: Pertience et Nécessité.Une note entre 1 et 5 est attribuée pour chaque mot et pour chaque critère pour evaluer sa force.Le point noir indique la note : le plus à gauche 1 ; le plus à droite 5.Les mots clés sélèctionnés nous permettent d'établir une planche de tendances ou d'inspirations (Moodboard).

03. Echelle d'osgood

Haut de gamme

Transfert

Déplacement

CARAKTAIR

Prestation

Événementiel

KEYWORDS

Luxe Prestige Finesse Exclusif Elégant Rafinement

03. MOODBOARD

Boutons
Icônes
Typographie

Call to action

Noir de texte

Blanc pur

Déclinaison

Blanc cassé

Noir de titre

Palette de couleurs

Dominante

03. STYLE TILES

04

ZONING WIREFRAME

Maquettage & MocKUP

04. ZOning

04. Wireframe

04. Maquette

04. MOCKUP

04. OUTILS

05

RESPONSIVE

WEB APP STATIQUE

STRUCTURE > HTML 5 : Balises structurantes main / header / section / article / h1-h4 / footerSTYLE > CSS 3 : Flexbox / Media queries / Class CSS

05. RESPONSIVE

06

interactions

WEB APP dynamique

React librairie Javascript > interfaces utilisateur dynamiques et réactives.Dom virtuelComposants atomiques & réutilisablesExpérience utilisateur ++ Navigation chargement fluide et rapides.Dépendances & Communauté GitHub & Vercel > cycle de developpement progressif : 1. Code 2. Push (git add, git commit, git push). 3. Deploy (lien vercel) test.4. Validation + Code sécurisé feature après feature,+ Feedback & test nouvelles features rapidement.

06. DEVELOPPEMENT

07

méthode Merise - mcd - mld - MPD

BASE DE DONnées

Choix de la méthode de conception

Plutôt que de choisir la méthode UML (Unified Modeling Language - Langage de Modélisation Unifié) nous lui avons préféré Merise comme méthode de conception de notre projet.le MCD permet de définir les données à manipuler.le MLD permet de structurer les données à manipulerle MPD permet de définir le stockage des informations à manipuler dans notre base de données.

07. méthode merise

1,n CardinalitésPK Clés primaires

  • Entité
  • Association
Représentation graphique des données Schéma Entité - Association

07. modèle conceptuel des données - mcd

FK Clés étrangères

  • Tables
Schéma relationnelle et normalisée du MCD

07. modèle logique des données - mld

Implémentation du MLD

Persistance & manipulation des données > Format de stockage en base de données relationnelle SGBDR (Système de Gestion de Bases de Données Relationnelle).MySQL > Licence est libre très utilisé dans les projets Web.Language > SQL (Structured Query Language)

  • Largement supporté par les produits commerciaux
  • Simple d'utilisation.
Sécurité > Mot de passe très robuste (26 / min maj chiffres caractères spéciaux

07. modèle PHYsique des données - mPd

08

ACCES stockage ET MANIPULATION DES données

SERVEUR & BACKEND

CLIENT <--> API <--> SERVER

ENVIRONNEMENT SERVER & ACCES aUX DONNEES

Node.js & Express > Environnement d'exécution gratuit et libre de droits. Ecrire des scripts serveur en JavaScript. Très performantNode.js utilise le moteur JavaScript V8 de Google.Routes > Requêtes SQL (CRUD)Methode requête http > Get - Put - Post - Delete Format > JSONSécurité > mysql2 - argon2 - cors - .env (.gitignore)

08. DEVELOPPEMENT

quadkits

portfolio

caraktair

DEMO

ÉMOTIONNEL - CRITIQUE - ACQUISITIONNEL

BILAN

QUESTIONS

MERCIPOUR VOTRE ATTENtTION

Moumen ARIFSIMPLON.CO

PROJET FINAL

CARAKTAIRCAHIER DES CHARGES

14/09/2023

CHOIX des technologies

Côté client, outre le HTML, CSS et Javascript, incontournables pour le developpement de solution web, nous avons choisi le framwork React pour sa capacité à produire des interfaces utilisateur dynamiques et réactives. Son utilisation garantit une expérience utilisateur optimale, avec une navigation fluide et des chargement rapides, tout en facilitant la gestion des composants réutilisables.Côté serveur, nous utilsions Node.js et son framwork Express comme environnement d'exécution, il est gratuit et libre de droits. Node.js nous permet d'écrire des scripts serveur en JavaScript. Très performant, Node.js utilise le moteur JavaScript V8 de Google.JSON pour les fichiers API, son format de données léger et largement reconnu. Il permet de structurer les données de manière claire et flexible, favorisant ainsi l'intégration avec d'autres systèmes et services.Nous avons choisi de developper notre projet progressivement, GitHub et Vercel nous permettent de mettre en place notre cycle de developpement : 1. Code 2. Push (git add, git commit, git push). 3. Deploy (lien vercel)L'avantage de cette méthode est de sécurisé son code feature après feature, obtenir des feedback et tester les nouvelles features rapidement.

10. DEVELOPPEMENT

11.DEPLOIEMENT

07. Conception Visuelle & interface

05.Arborescence

09.BASE DE DONnées

01.A propos de moi

08.Maquettage & Mockups

06.Parcours Utilisateur

10.DEVELOPPEMENT

12.MAINTENANCE

04. Fonctionnalités

03. Personas & BENCHMARK

02.ANALYSE DU BESOIN

SOMMAIRE

03

archetype utilisateurs

Personas

03

analyse concurrentielle

benchmark

CHABE limousine

Pionnier de la Grande Remise en France (depuis 1921). Groupe familial, Chabé est expert du transport sur mesure.

03. Benchmark

SERVICE PRESTIGE

Crée en 1985, siège basé à l’aéroport du Bourget. En croissance constante

03. Benchmark

CARDEL GROUP

Crée en 1999, Cardel global fusionne avec Nornes (gestion des installations d'entreprise et de la logistique des voyages dans l’industrie du sport) en 2020 et devient Cardel Group.

03. Benchmark

Conclusion de l’analyse concurrentielle

Ces résultats nous confortent dans notre stratégie : • Limitation aux offres et gammes les plus demandées • Simplification du processus de réservation. • Site adaptif accessible ergonomique • Proposer un formulaire moderne, intuitif et optimisé pour l’UI/UX • Proposer la commande et le paiement en ligne (v2) Nous opterons pour un style simple et épuré, nous sommes convaincus que conformément à la loi de Pareto 20% des éléments de notre site provoqueront 80% des objectifs.

03. benchmark

04

Descriptif & contenu

FONCTIONnALITES

04. Fonctionnalités

05

navigation & maillage interne

Arborescence

05. Arborescence

06. Parcours utilisateur

Nom et logo

Le nom CARAKTAIR en lettre capitale rappel la singularité et le raffinement, cette combinaison de sons et de lettres crée une marque qui respire l'élégance et l'exclusivité.La marque suggère également un luxe discret, associé à l'élégance intemporelle. Le C en fome hexagonale est évocateur de stabilité et de structure, il permet de transmettre les valeurs de confiance et de fiabilité.L'hexagone est une forme géométrique élégante, avec ses angles équilibrés et ses lignes épurées il renvoie à l'idée d'une élégance qui transcende les tendances passagères, offrant ainsi une expérience intemporelle et inoubliable.Enfin, les angles vifs de l'hexaogone evoquent un sentiment de dynamisme et d'énergie, contribuant à créer une sensation de mouvement et d'action.

07. Charte Graphique

Psychologie des couleurs

Les couleurs retenues pour la conception visuelle du site, à savoir le noir, le bleu nuit, le blanc, le jaune or, évoquent des émotions et des associations psychologiques spécifiques.Le noir évoque la sophistication, l'élégance et la puissance. Il est souvent associé au luxe et à l'exclusivité. Le noir peut être utilisé pour créer une atmosphère chic et prestigieuse sur le site. Il rappelle les couleurs de la profession.Le bleu nuit est synonyme de calme, de confiance et de sérénité. Il peut évoquer une sensation de sécurité et de fiabilité. Le blanc symbolise la pureté, la simplicité et la clarté. Il est souvent associé à la propreté et à la transparence. Le blanc est idéal pour les arrière-plans de site web, car il permet une lecture facile du contenu. Il peut également renforcer l'image de qualité et de professionnalisme.Le jaune or évoque la richesse, la chaleur et la luminosité. Il peut créer une sensation d'optimisme et d'abondance. Le jaune or peut être utilisé pour mettre en avant des éléments importants, tels que les boutons d'appel à l'action, pour attirer l'attention des visiteurs.

07. Charte Graphique

TON de la communication

Notre charte éditoriale repose sur les valeurs fondamentales de luxe, d'exclusivité et d'élégance, en accord avec les mots-clés du brainstorming que nous avons sélectionnés.Nous mettrons en avant des contenus rédigés avec soin, reflétant notre engagement envers la qualité et la personnalisation.Utilisation d'un langage soigné et précis pour transmettre une image de qualité supérieure.Adopter un ton professionnel pour instaurer la confiance chez les visiteurs.

07. Charte éditoriale

Test de contraste

Afin que notre contenu soit accessible au plus large public de manière optimale, nous avons veillez à respecter le niveau AA du référentiel WCAG (Web Content Accessibility Guidelines).Le site https://www.siegemedia.com/contrast-rationous a permis de vérifier nos contrastes.

07. matrice des couleurs

10

technologies

DEVELOPPEMENT

11

domaine & hebergement REFERENCEMENT

deploiement

HEBErgement

Nous avons choisi l'hebergeur 100% français OVH, dont les serveurs sont situé en France à Gravelines, France.Le site sera héberger sur un serveur privé virtuel (VPS) il offre fiabilité, performances, flexibilité et sécurité, le tout à des tarifs compétitifs.

Nom de domaine

www.carakatair.comwww.carakatair.frwww.carakatair.netNous pensons qu'avoir plusieurs extensions de domaine peut renforcer la présence en ligne, protéger la marque (personne d'autre ne peut enregistrer un domaine similaire et potentiellement nuire à la marque), permettre de mieux cibler un public internationale. Cela offre également une flexibilité marketing (exemple : utiliser caraktair.fr pour une promotion spécifique en France) et une protection contre le cybersquattage (achat des domaines similaires dans le but de les revendre à un prix élevé).

11. nom de domaine & hebergement

STRATEGIE

  • Recherche approfondie de mots clés pertinents pour le secteur et le public cible.
  • Création de contenu de qualité répondant aux besoins des visiteurs.
  • Optimisation de chaque page avec des balises de titre et des métadonnées appropriées.
  • Garantie de la compatibilité mobile pour une expérience utilisateur optimale.
  • Obtention de backlinks de haute qualité pour renforcer la notoriété du site.
  • Réduction de la vitesse de chargement du site grâce à une optimisation minutieuse.
  • Soumission d'un sitemap à Google Search Console pour une indexation efficace.
  • Utilisation d'outils tels que Google Analytics, Google Search Console, etc.
  • Suivi du trafic, optimisation du contenu et compétitivité dans les classements de recherche.
  • Objectif : augmenter la visibilité de Caraktair sur les moteurs de recherche tout en offrant une expérience de qualité aux visiteurs.

11. REFERENCEMENT

12

Mises à Jour et Maintenabilité

MAINTENANCE

STRATEGIE

Mises à jour du Système :

  • Système d'exploitation : Maintenir à jour le système d'exploitation de votre VPS en suivant les mises à jour recommandées par OVH. Cela peut être fait mensuellement ou au besoin.
  • Serveur Web : Nginx, mise à jour régulière . Au moins trimestriellement.
Mises à jour de Contenu :
  • Nouveau Contenu : En fonction du besoin.
  • Révision de Contenu Existant : Passez en revue régulièrement le contenu existant pour s'assurer qu'il reste pertinent et précis. Au moinstrimestriellement.
Backups :
  • Sauvegardes Régulières : Automatisation des sauvegardes, fréquence quotidienne.
Performance :
  • Optimisation de la Performance : Surveillez la vitesse de chargement du site et effectuez des ajustements si nécessaire. Fréquence trimestrielle.
Assistance Technique :
  • Assistance Utilisateur : Assurez-vous de répondre aux problèmes des utilisateurs rapidement. Cela doit être fait en temps réel ou dans les plus brefs délais.

12. Mises à Jour et Maintenabilité

STRATEGIE

Ma stratégie pour suivre la performance de mon site web repose sur l'utilisation de Google Analytics et d'autres outils d'analyse. En utilisant ces statistiques de connexion, je collecterai des données sur le comportement des visiteurs, y compris le trafic, la source des visiteurs, les pages les plus consultées..1. Comprendre le Public : En analysant les statistiques démographiques et géographiques des visiteurs, je pourrai mieux comprendre le public cible de mon site.2. Suivre les Conversions : En configurant des objectifs de conversion, je suivrai les actions souhaitées des utilisateurs, telles que les formulaires soumis ou les ventes réalisées.3. Identifier les Points d'Entrée : Je repérerai les pages qui génèrent le plus de trafic, ce qui me permettra de mieux optimiser ces zones pour une meilleure expérience utilisateur.4. Analyser le Comportement de Navigation : Je suivrai le chemin des utilisateurs à travers le site pour repérer les éventuels points de friction ou d'abandon.5. Mesurer les Performances : La vitesse de chargement des pages, le taux de rebond et d'autres indicateurs de performance seront surveillés pour garantir une expérience fluide.8. Suivre les Campagnes Marketing : Je mesurerai l'efficacité des campagnes publicitaires et du référencement en ligne.En utilisant ces informations, je pourrai prendre des décisions éclairées pour améliorer constamment mon projet, répondre aux besoins des utilisateurs, et maximiser la performance globale de mon site web Caraktaïr.

12. Statistiques de Connexions