Nos prestations en création, refonte et maintenance de sites internet pour l'assurance

Nos prestations en création, refonte et maintenance de sites internet pour l’assurance

 

Détails des services Eficiens en refonte de site : les 12 étapes du « Go » à la mise en ligne

 

LA PHASE DE CONCEPTION GÉNÉRALE, CADRAGE, ARCHITECTURE DE SITE

 

 É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 30 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.

Nous pouvons aussi vous accompagner dans les étapes amont tant en audit de site web, qu’en AMOA – refonte de site

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.

Bannière Gabarit cahier des charges pour appel d'offres 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 :

  • 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 ?

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)

 

Planche de composants WordPress Gutenberg

 

LA PHASE DE DESIGN CRÉATIF

 

 É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.

 

Exemples de design de home page réalisées par Eficiens

 

LA PHASE TECHNIQUE

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

  • L’intégration (et ses contraintes) doivent être prises en compte au niveau de la conception : l’UX designer doit intégrer les logiques de page builder, de composants et maquetter en fonction
  • L’intégration doit être “pixel perfect” : l’intégrateur doit disposer de l’intégralité des maquettes, des composants et des états, pour ne pas avoir à ré-inventer de lui-même des modules / composants. Sinon, il y a risque de non qualité et de régression
  • La prise en compte des breakpoints et leur déclinaison en nombre suffisant doivent être prévus dès la conception du projet. Attention, créer un breakpoint est un exercice complexe, structurant et d’un niveau senior UX
  • Important : ce qui demande 1 heure en UX, se traduit par 3 H en DA, et 3 jours en intégration. Toute régression en phase d’intégration impacte forcément budget et planning

 

SITE-WEB-de-la-conception-a-l-integration html

 

 

 É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.

 

Méthodologie et fiches conseil à télécharger en refonte de site web professionnel dans l’assurance

 

Voici notre méthodologie en refonte de site 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)

 

 

Voici notre méthodologie en refonte de parcours devis-adhésion

 

 

Un livre blanc pratique de 29 pages (téléchargement PDF direct – pas de formulaire)

 

 

 

 

L’importance de la phase de recette

 

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é.

 

Le cas spécifique des sites web dans l’assurance et les mutuelles

 

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 :

 

refonte-site-web assurance-mutuelle

 

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 :

 

  • Une home page présentant l’assureur, ses services, ses actus et un système de navigation élaboré
  • Une présentation de toutes les offres en détails (souvent accompagnées de PDF)
  • Un parcours devis-souscription incluant IPID, tableau de garantie, signature électronique, paiement CB, gestion des IBAN, connexion à un CRC et à une GED
  • Un système de localisation des agences
  • Un espace RH pour promouvoir la marque employeur avec connexion à un ATS (Applicant Tracking System)
  • Un espace institutionnel présentant l’assureur, ses valeurs, son histoire, sa gouvernance. Les éléments réglementaires (numéro ORIAS, liens vers l’ACPR) sont aussi présents ici.
  • Une connexion à l’espace adhérent / sociétaire / client
  • Une connexion à un espace administrateur / bénévoles ou élus (extranet pour déposer / consulter les documents légaux, AG, réunions etc…)
  • La connexion éventuelle à une application mobile. Savez-vous que l’on peut transformer simplement son site en appli iOS / Android ?

 

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

 

Découvrez deux rétro-planning (cas réels) 

 

Exemple 1 : site de moyenne envergure – durée : 4 mois

 

Planning de refonte de site 4 mois

 

Exemple 2 : site majeur avec simulateur et connexion à des API métier – durée : 10 mois

 

Planning refonte site assurance 11 mois

 

 

Des exemples de sites réalisés par Eficiens avec des fourchettes de budget

 

Refonte du parcours devis-souscription pour LMDE (La Mutuelle des Etudiants). Framework Symfony / VueJS- Budget : 60 K€

 

 

Création du site Transportez Vous Bien / Klésia. CMS WordPress – Budget : 30K€

 

 

Refonte technique du site Mutualia. CMS Drupal – Budget : 40 K€

 

 

Refonte du site pour la Mutuelle Complémentaire / MCVPAP. CMS WordPress – Budget : 35 K€

 

 

 

Création de parcours devis-souscription pour MCV – Développement sur mesure – Budget : 30 K€

 

 

Refonte du site de Galian. CMS Drupal – Budget : 45 K€

 

 

Refonte complète du site Mutuelle Bleue. CMS WordPress – Budget : 40 K€

 

 

Refonte du site de la Capssa. CMS WordPress – Budget : 25 K€

 

 

 

Refonte du site de l’APREF CMS WordPress – Budget : 20 K€

 

 

Site principal CCR Ré. CMS Liferay – Budget : 20 K€

 

 

 

Site promotionnel La MACSF. CMS WordPress – Budget : 15 K€

 

 

 

Si vous nous contactiez pour échanger sur vos enjeux de refonte de site ?

 

Tous les détails sur notre page contact ou en visio ci-dessous

Besoin d’en parler ensemble d’abord ?

 

Ils nous font confiance

Garex
Apicil logo
cegedim insurance
Galian logo 2
Carco logo
uneo
alptis
MACSF
harmonie-mutuelle
Groupama
AXA
mutualia
msa
CCR_Logo
SMA
ageas
Logo mutuelle bleue
BPCE
bnp-paribas-cardif
la france mutualiste
Logo APREF
Logo Metlife