SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Mettez de l’ordre dans le chaos de votre production emailing grâce au design system
Comment produire vite et à moindre coût un grand nombre et une grande variété d’email tout en garantissant un niveau d’engagement optimal des abonnés ? Comment faciliter la tâche de chaque acteur de la chaine de production emailing (rédacteur, graphiste, développeur html, chargé de campagne, prestataire externe) et leur permettre de collaborer plus efficacement ? En mettant en place un design system dédié au canal de l’emailing.
Comment produire vite et à moindre coût un grand nombre et une grande variété d’email tout en garantissant un niveau d’engagement optimal des abonnés ? Comment faciliter la tâche de chaque acteur de la chaine de production emailing (rédacteur, graphiste, développeur html, chargé de campagne, prestataire externe) et leur permettre de collaborer plus efficacement ? En mettant en place un design system dédié au canal de l’emailing.
Mettez de l’ordre dans le chaos de votre production emailing grâce au design system
1.
Mettez de l’ordre dans le chaos de votre production
emailing grâce au Design System (étude de cas)
Emmanuel Gérard
Email designer
Villaluna
Atelier
Dominique Davase
Graphiste Web / Print
MMA – groupe COVEA
5.
3,9 heures
C’est le temps moyen passé par le service marketing à
faire réviser leur emailing et à obtenir leur approbation.
C'est plus de temps que celui qu'ils consacrent à la
conception, au développement ou à tout autre
composant de la production de courrier électronique.
Litmus
7.
Comment produire vite et à moindre coût un grand
nombre et une grande variété d’email tout en
garantissant un haut niveau de qualité et un
engagement optimal des abonnés ?
8.
Comment faciliter la tâche de chaque acteur de la
chaîne de création (rédacteur, graphiste,
développeur html, chargé de campagne, prestataire
externe) et leur permettre de collaborer plus
efficacement ?
9.
Grâce à la mise en place d’un design system dédié
au canal de l’emailing
11.
Un système de conception est un ensemble de
composants réutilisables, guidés par des normes
claires, qui peuvent être assemblés pour créer un
nombre infini d'applications.
https://www.invisionapp.com/blog/guide-to-design-systems/
12.
De nombreuses entreprises l’ont déjà adoptés pour
rationnaliser la création de leurs produits digitaux
(site web, appli mobile, etc.) et garantir une
expérience utilisateur consistante.
13.
Les design system s’appuient sur une nouvelle
méthodologie de conception des produits digitaux :
l’atomic design
14.
Comment mettre en place un design system pour le
canal de l’emailing ?
15.
Étude de cas : mise en place d’un email design
system pour le service marketing de MMA
(groupe Covea)
17.
Marketing Direct
3 000 000 fiches clients
2 500 000 Particuliers
500 000 Pros-Entreprises
1 400 000 de Prospects
(Managers, Artisan/commercant,
homme de réseau.)
18.
Stratégie
- Développer le Pro et Entreprise
- Dynamiser (pérenniser) le marché des Particuliers
19.
Pour développer la stratégie d’Entreprise :
- Des emails orientés Business au moment des
Campagnes
- Des emails orientés Relationnels (pour entretenir une
bonne relation entre le client/Agent)
- Newsletters destinées aux Pros / Part.
20.
Pour initier un sujet, nous partons du postulat qu’il faut être
INTÉRESSANT avant d’être INTERESSÉ (Inbound
marketing est la stratégie qui vise à attirer ses clients, au lieu
de les solliciter).
Donc via les CTA, nous les embarquons vers :
- « un livre blanc » (via une landing page)
- Vers MMA.FR
- Vers l’agent
21.
Organisation de l’équipe en charge de la création
des emailings
22.
- 1 responsable marketing
- 8 chargés de communication (rédacteurs)
- 3 infographistes
- 3 chargés de routage (routage, stats)
23.
En 2016, L’intégration html est externalisée auprès
de différents prestataires externes
24.
Un template graphique et html est développé en
externe pour chaque type de besoin
26.
- Coût et temps de production élevé
- Manque de cohérence et de consistance utilisateur
- Manque de flexibilité
- Difficulté à faire évoluer les templates dans le
temps
27.
Quels sont les étapes pour mettre en place un
design system pour le canal de l’emailing ?
28.
1. Analyse de l’existant et des besoins
2. Conception fonctionnelle et graphique
3. Intégration html
4. Documentation et mise en ligne
29.
1. Analyse de l’existant et inventaire les besoins
30.
Analyse de 15 emails représentatif des productions
de la MMA (ergonomie, design visuel, intégration
html)
31.
- Repérer les points forts et les points faibles
- Identifier le FIX et le FLEX
40.
Normaliser le codage html des différents modules
41.
- Doctype html et reset css unique
- Code développé dans une logique modulaire
- Test de rendu exhaustif de chaque module
- Prise en compte des contraintes du routeur (Adobe
Campaign)
42.
4. Documentation de l’email system et mise en ligne
43.
Création d’un site extranet dédié (Wordpress)
charte-emailing.mma
47.
- Réduction des « rejets » au niveau du routeur
48.
+de liberté et d’agilité rédactionnel dans la
construction des messages (Content First !)
49.
Evolutivité et maintenabilité des différents modules
50.
Amélioration de l’expérience utilisateur (ergonomie,
cohérence et consistance)
Editor's Notes
A afficher à 12H et à 14H
Plus qu’une simple charte graphique améliorée !
Brad frost : ne pas pas penser page mais éléments qui compose la page
Avec les mêmes composant on arrive à des créas très différentes
Chiffres clés
Chiffres clés
Pas de personne dédiée au développement html
Pas de personne dédiée au développement html
Pas de personne dédiée au développement html
Pas de personne dédiée au développement html
Pas de personne dédiée au développement html
Pas de personne dédiée au développement html
Pas de personne dédiée au développement html
Pas de personne dédiée au développement html
Pas de personne dédiée au développement html
Basé sur une charte digitale qui n’intègre pas suffisament les contraintes de rendu des outils de messageires Images bloquées Gestion des CTA (images vs images) Ni les contraintes liés aux routages
Nombre de révision et d’aller retour
Comprendre le Workflow
Homogénéiser le header Preheader masqué Élément fix et flex
Stylisation du texte alternatif
Stylisation du texte alternatif
Éviter le format papier ou pdf Pas évolutif Source mutliple Pas évolutif