Page Projet

Pourquoi définir un nouveau concept ?

Le Plan Marketing Stratégique porte une nouvelle approche client orientée projets (et non plus seulement produits) organisée par univers de besoins. Cette approche projets est matérialisée par le développement de parcours marketing.
Le travail requis pour la création de parcours complets demande beaucoup de temps.
Afin de donner rapidement de la visibilité à l’approche projets sur maif.fr par univers de besoins, il a été acté de réaliser un template contribuable et ainsi permettre aux équipes de mettre en ligne plus rapidement les pages consacrées aux projets de vie.

En attendant de pouvoir investir dans de nouveaux parcours PMS, nous faisons le choix de concevoir des pages projets à partir d‘éléments existants (offre d’assurances, services, simulateurs…), sans réellement créer de nouveaux contenus (excepté l’édito), sans rédevelopper les partenariats ou les parcours de souscription existants.
Certaines de ces pages projets seront amenées à évoluer en réels parcours par la suite.

Concept de la page projet

structure d'une page projet

Ce concept de gabarit a pour vocation de pouvoir rendre digeste, compréhensible et claire une page avec beaucoup de contenus.
C’est une page qui doit raconter une histoire autour d'un projet.
Un projet est composé de n étapes, n thématiques.

    Les 4 types d'axes suivants peuvent être abordés dans cette page :
  • produit,
  • services,
  • outils,
  • edito.

Il est possible d'avoir les 4 axes abordés à la fois dans une même page, ou de n'avoir qu'un ou deux axes abordés selon le projet.
Chaque projet est différent et surtout les éléments constituants un projet sont divers.
Ainsi selon le contexte, il faudra choisir les axes qui seront traités dans votre page projet, et l'ordre d'importance des axes.
Sur un sujet donné, il sera peut être utile d'aborder un thème grave avec de l'édito en premier, tout comme il peut être intéressant de positionner un partenaire de services ou un produit en tête de page pour augmenter la conversion. Chaque projet est différent, et chaque équipe devra réfléchir à la meilleure organisation de contenus.

Information

À noter que lors des travaux de conception de ce concept, il a été proposé de faire plusieurs pages pour décrire un projet.
Mais cette proposition a été mise de côté, ainsi nous préconisons une seule page par projet avec des éléments permettant une navigation adéquate.

Les ingrédients

Les illustrations

img-illustrations.png

Pour se démarquer visuellement des autres pages, et pour renforcer le storytelling, nous faisons le pari d’utiliser les illustrations.
Une illustration principale qui contient n scénettes ; une scénette est une étape du projet, elle doit donc bien en illustrer le propos.
Chaque scénette doit porter la teinte de couleur liée à l’étape
.
Au sein de l’illustration principale, il est demandé de faire figurer un fil rouge de pointillé pour donner une impression de continuité, de lien entre les scénettes.
L’illustration principale doit se fondre dans le chapo de la page qui porte le titre H1 et le sous titre.

    Les préconisations :
  • déterminer rapidement les couleurs d'onglet qui seront déclinées en nuance dans les scénettes d'étapes
  • l'image "Frise" a une hauteur maximale de 400px
  • l'illustration est absente en version mobile

Teintes

plaette de nuances

Afin de rendre encore plus claire la lecture de la page, nous avons décidé d’apporter de la couleur.
Une teinte de couleur par étape, cette couleur sera déclinée tout au long de la page de façon à permettre à l’utilisateur de savoir dans quelle étape il se trouve au scroll.
Ces teintes seront exploitées aussi au sein du module de navigation pour souligner le libellé des étapes.
Chaque scénette doit porter la teinte de couleur liée à l’étape.

    6 nuances déterminées avec une équivalence CSS
  • ROSE #E04E71 : c-1
  • ORANGE #CE7D65 : c-2
  • VERT #829E92 : c-3
  • BLEU PETROLE #4391A9 : c-4
  • JAUNE #EDC378 : c-5
  • MAUVE #C089A9 : c-6

Ces teintes sont répertoriées dans la librairie sketch "library-maif-color" sous le style "MAIF/ill-frise/..."

Navigation - onglets

img-navigation-onglet.png

En complément, un module de navigation est disponible pour permettre à l’utilisateur de mieux naviguer dans la page.
Ce module lui permet d’accéder rapidement à la section dédiée à une étape, une thématique.

Le module de navigation a un comportement spécifique. Une ancre est spécifiée pour chaque étape/thématique, ce qui permet à l’utilisateur d’être positionné en début de section lorsqu’il clique sur une étape/thématique du module de navigation. Au scroll dans la page, le module de navigation reste sticky en haut de l'écran.
Lorsque l'utilisateur se trouve sur une des sections, alors son élément de navigation associé prend un état "actif", le différenciant graphiquement des autres sections de navigation.

Les couleurs des onglets sont reprisent dans chaque section. Si le triangle MAIF est intégré aux petites illustrations de la section il prend la couleur de l’onglet sélectionné avec une opacité de 20%.

    Le nom de l'onglet décrit une notion. Il est préférable qu'il tienne sur une ligne ce qui le limite en nombre de caractères (espaces compris) :
  • pour 2 onglets : entre 30 et 35 caractères
  • pour 3 onglets : entre 20 et 25 caractères
  • pour 4 onglets : entre 15 et 20 caractères

Section

img-section.png

Chaque section doit porter le contexte de l’étape.

Elle doit commencer par un titre qui porte la balise H2 (module titre).
Le titre peut être complété par un sous-titre descriptif et une petite illustration qui reprend la teinte associée à la section.
Ensuite peuvent être ajoutés les modules communs suivants : bouton, texte illustration, rassurance, vente croisée, boite à outils, texte accordéon, conseils, passerelle, contact …. Et aussi le module landing produit.

Pour encore mieux identifier les sections elles s'étendent sur un fond dégradé de la couleur de l'onglet qui lui est associé. Ce dégradé lumineux se construit avec une opacité à 10% de cette nuance jusqu’au blanc.

La structure de l’info dans la section est importante. La hiérarchie du contenu se fait de sorte que l'élément le plus important se situe en début de section, l'élément le moins important en fin ; le tout en respectant un ordre chronologique, lorsque cette logique s'applique.
Il est possible de mixer des contenus de type Edito, produit ou services dans une même section.
Une section n'est pas forcément dédiée à une typologie de contenus.
Une fois une étape terminée, on passe à l’ étape suivante, on itère comme pour la première étape.

À noter :
Pour plus d’homogénéité, si l'association "titre + illustration" est utilisée au début d'une section alors elle sera appliquée sur l'ensemble des sections.

Structure de la page

Schema du template de la page projet avec 3 entrées

Ces pages projets doivent raconter une histoire et cette histoire doit contenir entre 2 et 4 étapes ou thématiques.
Ces étapes peuvent être indépendantes les unes des autres ou se suivrent dans un ordre chronologique.
Nous avons fait le pari de proposer un gabarit d’une seule page avec un module de navigation qui reprend les différentes étapes, et permettre à l’utilisateur d’accéder en 1 clic à une des étapes.
Ce système a pour but de guider l'utilisateur et de lui permettre une expérience simple et facilement compréhensible malgré la densité de contenu.

    Concrètement, nous proposons :
  • 1 zone haute composée d'un titre de page avec une illustration de type narrative
  • 1 template Parcours de vie - Navigation onglet : de 2 à 4 sections
  • 1 section pour l’édito avec l'utilisation du module Conseils
  • 1 section pour la FAQ avec l'utilisation du module texte accordeon

Chaque squad devra donc être en mesure de lister tout le contenu, puis de le classer et structurer en étapes. Des ateliers de co-conception avec toutes les parties prenantes permettent de réaliser cet exercice rapidement et efficacement. Il est judicieux d'y associer l'équipe marketing, ComDev, l'équipe SEO et la digital analyse en plus des membres de la squad (UX designer, PO, UI designer).

Zone haute

img-template-PROJET-ZoneHaute.png

Elle est constituée obligatoirement de l'une ou l'autre des "section en-tete" ou "section en-tete HTML", auquel peut s'ajouter le composant "Ancre".

En règle générale, il faut privilégier "section en-tete" pour la conception d'une page projet.

    La "section en-tete" contient :
  • Obligatoirement :
    • 1 titre de page H1 avec la class CSS "heading type2"
    • 1 illustration "frise"
  • Facultatif :
    • "commun composants"
    • "landing page composant"

L'utilisation de la "section en-tete HTML" est à prévoir lors d'une mise en page spécifique à laquelle ne peut pas répondre la structure prévue dans la "section en-tete". Dans ce cas cette section HTML porte obligatoirement le titre de page H1 avec la class CSS "heading type2"

Contenu page

structure partie basse d'une page projet

La partie basse d'une page projet contient obligatoirement un "Template Parcaours de vie - Navigation onglet". Celui-ci comprend au minimum 2 sections - "Navigation onglet bloc" et 4 au maximum.

Chaque section "Navigation onglet bloc" renferme :

  • obligatoirement : 1 titre d'onglet, 2 couleurs (titre et fond dégradé de section) et 1 picto pour la version mobile
  • aléatoirement mais de manière homogène des composants de type commun

Enfin il est conseillé de finir sur une touche d’edito plus générale et d’appeler une section avec le module conseils et une section avec le module texte-accordéon pour une FAQ.

Liste des modules