En tant qu’agence spécialisée assurance, Eficiens a souvent la demande pour la création de site d’assureurs, des courtiers, de la réassurance, des agents généraux, institutions de prévoyance ou des mutuelles . Le schéma d’architecture digitale (arborescence) du site en assurance est très souvent celle-ci :
Tout d’abord, on distingue d’un coté un site vitrine ou plaquette où les offres sont exposées, des simulateur de devis pour donner un prix par rapport à un besoin exprimé et un espace souscription (le fameux parcours devis souscription) un espace prévention généralement sous forme de blog. Pour résumer, on a souvent la structure suivante :
Les CMS sont aussi très spécifiques au monde de l’assurance : à côté des grands leaders (site WordPress, Drupal), on y trouve aussi des CMS plus exotiques (Liferay, Jahia, Jalios, Typo3…) ou en devenir (Adobe Experience Manager, Salesforce Content Management System…) Nous avons d’ailleurs écrit un livre blanc à ce sujet. De plus en plus, on assiste à un phénomène de migration de sites basés sur les CMS plus anciens vers les deux leaders du marché : WordPress et Drupal. Des articles seront prochainement disponibles sur ce point précis : consultez la migration de Liferay vers Drupal pour commencer
ÉTAPE 1 Définition et expression du besoin et rédaction d’un cahier des charges (même si vous réalisez votre site en interne). Cela passera par la rédaction d’un cahier des charges détaillé (minimum 20 pages). On trouve dans ce cahier des charges les grands modules suivants : fiche signalétique du donneur d’ordres, objectifs de la refonte et du projet, périmètre du projet, environnement graphique (charte graphique), informatique et technique, description fonctionnelle et technique, attendus de la réponse, contraintes techniques, modalités de sélection du prestataire, planning, ressources allouées. Un calcul de rentabilité ou de ROI pourra aussi être inclus notamment vis à vis de l’interne (augmentation du chiffre d’affaires induites, réduction du taux de rebond, lancement d’une nouvelle identité…). Il faudra également penser à enregistrer – si ce n’est déjà fait – votre nom de domaine.
Ce cahier des charges servira de base à votre processus d’appel d’offres. Vous pouvez télécharger ici un gabarit de cahier des charges de refonte de site web.
ÉTAPE 2 Etude des réponses à votre consultation (étude technique, méthodologique, organisationnelle). Soyez particulièrement vigilants aux points suivants :
Puis, une fois le choix fait du prestataire et de la méthode, vous pourrez envisager d’entrer dans le dur !
ÉTAPE 3 Calage du planning : cette phase est importante car elle détermine toutes les étapes, les interactions, les livrables et les phases de review. L’utilisation d’outil de gestion de projet ou de roadmap est clef (MS Project, Gantter, Roadmunk). En terme d’outils, il sera aussi nécessaire d’ajoindre des outils d’allocation de tâches (comme Trello) puis un peu plus tard de bug-tracking. Nous y reviendrons.
ÉTAPE 4 Meeting de kick-off : c’est le démarrage officiel du projet. Toutes les parties prenantes sont là. Le planning est validé
ÉTAPE 5 Rédaction par l’agence du document de cadrage & définition de l’arborescence générale. Cela va déterminer la structure du site, les niveaux et profondeurs de navigation clefs, les gabarits de page nécessaires. Le dossier de cadrage est en quelque sorte le miroir du cahier des charges, enrichi, revu et complété par l’agence. C’est un document structurant car il fera référence tout au long du projet. Naturellement, votre site devra être aligné avec votre stratégie générale. Optez-vous pour un site marchand, un site de génération de leads, un site visant à promouvoir la marque employeur ? Répondre à ces questions et les hiérarchiser est fondamental.
Lors de cette étape de conception générale, un architecte de l’information sera impliqué. La conception générale est fondamentale car elle est le socle de l’architecture de l’information, du système de navigation, de l’agencement de la page d’accueil et de la ligne éditoriale. Elle définira également les menus et sous-menus associés.
A ce stade, vous allez aussi réfléchir en terme de parcours en modélisant le parcours utilisateur de chaque persona. Une connaissance fines de vos cibles est indispensable pour définir les parcours utilisateurs. Des parcours bien étudiés seront d’autant plus efficaces pour que vos visiteurs transforment selon l’objectif que vous vous êtes fixé.
ÉTAPE 6 Rédaction du contenu : à ce stade, on doit avoir une bonne vision du contenu : home page, grandes rubriques, process éditorial. Le contenu est souvent le point le plus difficile car il touche à l’essence même de votre métier. Un rédacteur spécialisé avec une bonne sensibilité web est indispensable. A défaut, un travail de ré-écriture sur du contenu existant est possible.
Dès ce stade, il faut penser au maillage interne et externe.
ÉTAPE 7 Zoning / UX : à partir de wireframes, on va poser l’organisation des pages, l’imbrication des ressources, la hiérarchisation des informations à afficher, les call to action, les parcours… Ce prototypage va nécessiter généralement plusieurs interactions.
Différents niveaux de zoning existent. Le plus abouti s’appelle le zoning HD (Haute Définition) qui intègre déjà des visuels en noir et blanc, le positionnement des éléments au pixel près, les typos définitives…
Les outils à utiliser : Sketch, Axure, Adobe XD, Figma couplé à Zeppelin (qui permet de générer automatiquement le CSS – cf plus bas)
ÉTAPE 8 Direction Artistique générale. A partir de la charte de l’organisation et de sa déclinaison (charte graphique digitale ou mieux à partir d’un design système), des maquettes vont être réalisées. Une attention particulière est portée à la page d’accueil ou home page, qui va induire le style et l’identité générale de tout le site. Une fois la DA posée et validée, toutes les autres pages (gabarits ou templates) seront déclinés. Naturellement, la version mobile et les version intermédiaires en responsive doivent être maquettés ou des principes de construction données.
Les outils : généralement Photoshop, Figma, XD ou Sketch
ÉTAPE 8′ La mise en écran. Cette étape n’est pas obligatoire. En ayant d’un côté les composants et le design system, et de l’autre le contenu final, n’importe quel marketer devrait être capable de se projeter et de construire chaque écran. Notre expérience a montré que c’était rarement le cas. Il peut donc être intéressant de monter dans l’outil de prototypage chaque écran réel incluant direction artistique et contenus finalisés. Le montage front sera d’autant plus rapide.
A noter : pour réduire le coût de la refonte de site, il est possible d’internaliser toute cette étape : l’agence livre des PSD ou fichiers Sketch, Axure, Adobe XD et le département informatique interne procède à l’intégration front et back. A contrario, il peut arriver que nous ne commencions une refonte qu’à cette étape. Nous sommes alors force de production technique à partir des wireframes finaux. En tout état de cause, un cahier des charges fonctionnel et technique sera toujours rédigé avant le début de l’intégration
ÉTAPE 9 Intégration et montage HTML : cette phase est en 2 étapes:
Une intégration front : montagne des pages à partir de leur codage HTML / CSS / Images
Une intégration back : connexion aux bases de données, interactivité des formulaires, génération des pages dynamiquement
Cette phrase d’intégration puis de passage en serveur de dev / puis de pré-prod seront souvent faites sur un outil de versionning comme GITHub.
C’est à ce stade que les performances techniques ultérieures – notamment pour le si important temps de chargement – seront mises en œuvre. N’hésitez pas à challenger fortement vos équipes techniques ! Cette phase est absolument clef. Ne la négligez pas notamment si vous avez plus de 5 gabarits. La complexité augmente de façon exponentielle.
Pour aller plus vite, on peut utiliser des pages builder. Les plus connus sont Elementor et Divi. Chez Eficiens, nous préconisons de rester sous le page / site builder natif de WordPress, Gutenberg.
Un point d’attention spécifique doit être porté sur les formulaires encapsulés dans le site.
Idéalement votre intégration doit être le plus « pixel perfect » possible. Il doit y avoir unicité entre la DA et l’intégration. C’est souvent un challenge. Soyez intransigeants.
Rappel des bonnes pratiques en intégration
ÉTAPE 10 Tests et Q&A : cette phase est fondamentale. La phase de debugging prend du temps. Vous devrez utiliser des plateformes virtuelles de test (BrowserStack par exemple) mais aussi des devices fixes et mobiles pour une compatibilité responsive design parfaite. Tous les navigateurs du marché devront être testés (voir la liste que nous supportons de notre côté). En terme d’outils, un outil de ticketing comme Redmine, ou Mantis est un plus. C’est durant cette phase que vous devrez prévoir le plan de migration de votre ancien site vers le nouveau. Attention, à ne pas laisser d’URL sans correspondance car vous le paierez cher en SEO. Vérifiez également que tout est OK du côté de votre serveur et nom de domaine (expiration du nom de domaine, pointage des DNS, sécurisation en HTTPS)
ÉTAPE 11 La recette ! Vous pouvez sortir le champagne et recevoir les félicitations du Comex. Profitez-en car dès le lendemain…
ÉTAPE 12 Les évolutions : comme dit plus haut, l’évolution du site est à prévoir dès la recette. On parle maintenance évolutive ou corrective. Sur des sites techniquement complexes, on s’approche d’une logique de TMA (Tiers Maintenance Applicative). Cette TMA peut être de plusieurs types : une TMA au forfait, une TMA en régie forfaitée ou une TMA via carnet de tickets (ou ticketing).
En terme de budget maintenance, prévoyez pour la maintenance corrective et quelques évolutions, une enveloppe annuelle de 15 à 25% du budget initial de refonte. Ce n’est pas neutre ! Si vous ne souhaitez pas contractualiser une TMA ou la réalisez en interne, vous pouvez toujours bénéficier de nos Packs SQUAD, un accompagnement tactique et opérationnel de 3 à 10JH.
Voici notre méthodologie que nous avons suivie sur plus de 50 créations et refontes de sites et mini-sites (téléchargement PDF direct – pas de formulaire)
Un livre blanc pratique de 29 pages (téléchargement PDF direct – pas de formulaire)
Le recettage (la recette du site internet) ou encore appelé test d’acceptation est l’étape finale. Ne la négligez pas car elle est fondamentale.. Son objectif est d’évaluer la conformité du projet avec le cahier des charges fonctionnel et le cadrage initial (éléments nommés référentiels). Vous allez alors procéder à un ensemble de tests définis, établis puis réalisés. Pour cela, il faut spécifier les navigateurs et OS cibles (voir la liste des navigateurs supportés chez Eficiens).
Un cahier de recette est naturellement recommandé. Une recette nécessite du temps. Un minimum de 15 jours est à considérer pour un site de moyenne envergure et avec une équipe d’intégration ayant réalisé préalablement un travail de qualité.
Au préalable, quand vous demandez un devis de création d’un site internet de la part d’une agence web, soyez bien vigilants sur les points suivants :
La nature de la prestation : tout doit être clair et défini. Posez des questions.
Les livrables : ce que vous obtiendrez et à quel moment. Le livrable doit être quantifié et précis.
Le planning : très important car c’est un élément qui doit être contractuel.
Les ressources allouées : exigez un chef de projet dédié et disponible. Vous devez aussi comprendre ce qui est sous-traité ou non.
La propriété intellectuelle : qui sera détenteur des droits une fois la prestation réalisée ? Normalement, vous ne devenez détenteur qu’une fois le prix complet payé.
La maintenance : la plus grosse erreur lors de la création ou de la refonte d’un site internet serait d’oublier la maintenance. Dès le départ, vous devez allouer un budget de maintenance corrective et maintenance évolutive, mise à jour et développement. Exigez une visibilité sur la maintenance mensuel. Cela vous mettra de budgéter combien coute ensuite votre site internet par mois.
Le référencement du site internet : le tarif en référencement naturel ou SEO peut être très variable. Mais cette composante sera clef pour le succès de votre site. Dès le départ, exigez une prestation SEO claire et documentée.
| PRESTATION | DÉTAILS | BUDGET |
|---|---|---|
| Création landing page | Conception de landing page de captation de leads pour opération commerciale « génération de devis » – en fonction du CMS existant | A partir de 4K€ |
| Création minisite | Mini-site marketing pour lancement de nouveaux produits – 4 à 5 pages statiques – back-end basé sur WordPress Gutenberg + formulaire d’embasement inclus | A partir de 8K€ |
| Création blog prévention sur site existant | Conception / UX / DA / Tech – Intégration à un CMS existant (WordPress/Drupal) | A partir de 10K€ |
| Création site assurance plaquette produit / services | Conception / UX / DA / Tech – 5 à 7 gabarits et 30 composants – CMS pro (WordPress, Drupal…) – store locator d’agences – gestion avancée des contacts entrants avec CRM | A partir de 30K€ |
| Création site complet intégrant parcours devis / tarification | Idem précédent plus module de tarification (recueil de besoins, fiches IPID, capture du lead, connexion back office métier…) | A partir de 45K€ |
| Création site complet intégrant parcours devis-souscription | Idem précédent plus module de souscription full digital – API et services tiers (paiement, signature…) | A partir de 60K€ |
| Création / refonte parcours devis-souscription uniquement | Conception/UX/DA – Conception et développement front/back – API et services tiers (paiement, signature…) | A partir de 30K€ |
| Migration de CMS | Passage de Liferay, Jalios, Symfony ou Typo3 à Drupal / WordPress – 10 gabarits / 30 composants – reprise des contenus – migration SEO – Plan de redirection – Identité visuelle conservée | A partir de 30K€ |
Naturellement une étude spécifique sera réalisée par notre Architecte Digital et Directrice Technique et un devis personnalisé détaillé remis et expliqué (20 pages d’étude de besoin et de réponse). Contactez-nous pour toute demande. Un article sur la création de site web pour l’assurance est aussi disponible.
Par définition, on entre ici dans le spécifique, le sur-mesure avec une conception, un design et un développement ad-hoc. Complexité, temps à passer, niveau de fonctionnalités sont dans ce cas par essence très variable. Plutôt que de donner un prix qui n’aurait pas de sens sans étude préalable approfondie, vous devez plutôt réfléchir en terme de grands lots ou chantiers.
Puis pour chaque lot, estimer le temps raisonnable à passer en JH (Jour Homme). Vous découvrirez plus bas dans la page nos TJM par profil. Ainsi, vous aurez une vision assez réaliste de l’enveloppe budgétaire de votre projet. N’oubliez pas à ce stade, d’ajouter 10% à 15% de temps de gestion et direction de projets.
| Par expérience, un site web sur mesure démarre à 10,000 € HT. Un budget de 60K€ HT pour un site web vitrine véritable vecteur de business est en 2023 une bonne moyenne. |
Au delà de ces grilles de prix, il faut garder en mémoire que le tarif d’un site web, que ce soit un site vitrine ou un site e-commerce, est forcément très variable en fonction :
De sa complexité, de sa typologie : un site internet one-page ne nécessite évidemment pas le même investissement qu’un site e-commerce mondial. Nombre pages, profondeur du site, fonctionnalités avancées, site sur mesure ou s’appuyant sur un CMS impacteront nécessairement votre budget. Le temps nécessaire à passer peut aller du simple au décuple pour un même nombre de gabarits.
Du type de prestataire impliqué : freelance « couteau suisse » ou agence web internationale aux références prestigieuses avec de multiples experts aux TJM en rapport.
De l’intégration voulue dans votre cœur business : on en parle plus alors de site stricto sensu mais de transformation digitale. Allez-vous y brancher votre CRM, en faire un site de génération de leads, déployer des centaines de landing pages, avoir des espaces connectés. La facture peut alors vite grimper.
Refonte du parcours devis-souscription pour LMDE (La Mutuelle des Etudiants). Framework Symfony – Budget : tranche C
Création du site Transportez Vous Bien / Klésia. CMS WordPress – Budget : tranche B
Refonte technique du site Mutualia. CMS Drupal – Budget : tranche B
Refonte du site pour la Mutuelle Complémentaire / MCVPAP. CMS WordPress – Budget : tranche B
Création de parcours devis-souscription pour MCV – Développement sur mesure – Budget : tranche C
Refonte du site de Galian. CMS Drupal – Budget : tranche C
Refonte complète du site Mutuelle Bleue. CMS WordPress – Budget : tranche B
Refonte du site de la Capssa. CMS WordPress – Budget : tranche B
Refonte du site de l’APREF CMS WordPress – Budget : tranche B
Site principal CCR Ré. CMS Liferay – Budget : tranche B
Site promotionnel La MACSF. CMS WordPress – Budget : tranche A