SlideShare une entreprise Scribd logo
1  sur  75
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
Qui sommes-nous ?
Emmanuel Gérard
email designer et formateur freelance
@emg75www.email-designer.net
Dominique Davase
Graphiste chez MMA
mma.fr
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
De quoi va-t-on vous parler ?
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 ?
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 ?
Grâce à la mise en place d’un design system dédié
au canal de l’emailing
Qu’est ce qu’un design system ?
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/
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.
Les design system s’appuient sur une nouvelle
méthodologie de conception des produits digitaux :
l’atomic design
Comment mettre en place un design system pour le
canal de l’emailing ?
Étude de cas : mise en place d’un email design
system pour le service marketing de MMA
(groupe Covea)
La MMA en quelques mots
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.)
Stratégie
- Développer le Pro et Entreprise
- Dynamiser (pérenniser) le marché des Particuliers
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.
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
Organisation de l’équipe en charge de la création
des emailings
- 1 responsable marketing
- 8 chargés de communication (rédacteurs)
- 3 infographistes
- 3 chargés de routage (routage, stats)
En 2016, L’intégration html est externalisée auprès
de différents prestataires externes
Un template graphique et html est développé en
externe pour chaque type de besoin
Conséquences
- 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
Quels sont les étapes pour mettre en place un
design system pour le canal de l’emailing ?
1. Analyse de l’existant et des besoins
2. Conception fonctionnelle et graphique
3. Intégration html
4. Documentation et mise en ligne
1. Analyse de l’existant et inventaire les besoins
Analyse de 15 emails représentatif des productions
de la MMA (ergonomie, design visuel, intégration
html)
- Repérer les points forts et les points faibles
- Identifier le FIX et le FLEX
Inventaire des besoins
Mise en place d’atelier de travail
interview de chaque acteur de la chaîne de
production (rédacteur, graphiste, chargé de routage,
etc.)
2. Conception fonctionnelle et graphique
Conception fonctionnelle (wireframe)
Conception graphique
Déclinaison de la charte graphique print et digital
En prenant en compte les spécificités de l’emailing
3. Intégration html
Normaliser le codage html des différents modules
- 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)
4. Documentation de l’email system et mise en ligne
Création d’un site extranet dédié (Wordpress)
charte-emailing.mma
5. Appropriation et vie du design system
Résultats
- Réduction des coûts
- Réduction des « rejets » au niveau du routeur
+de liberté et d’agilité rédactionnel dans la
construction des messages (Content First !)
Evolutivité et maintenabilité des différents modules
Amélioration de l’expérience utilisateur (ergonomie,
cohérence et consistance)

Contenu connexe

Similaire à Mettez de l’ordre dans le chaos de votre production emailing grâce au design system

EMDay 2015 - Facteurs clés de succès d'une opération emailing de conquête client
EMDay 2015 - Facteurs clés de succès d'une opération emailing de conquête clientEMDay 2015 - Facteurs clés de succès d'une opération emailing de conquête client
EMDay 2015 - Facteurs clés de succès d'une opération emailing de conquête clientClic et Site
 
Présentation des Nouveautés de Sage CRM v 6.6
Présentation des Nouveautés de Sage CRM v 6.6Présentation des Nouveautés de Sage CRM v 6.6
Présentation des Nouveautés de Sage CRM v 6.6Sage france
 
Forum 9 fev_2011_demat
Forum 9 fev_2011_dematForum 9 fev_2011_demat
Forum 9 fev_2011_dematClub Alliances
 
Réussir son projet CRM - La checklist en 12 questions
Réussir son projet CRM - La checklist en 12 questionsRéussir son projet CRM - La checklist en 12 questions
Réussir son projet CRM - La checklist en 12 questionsEfficy CRM
 
Tock & Mélusine REX IA Open Source #AIParis 2020
Tock & Mélusine REX IA Open Source #AIParis 2020Tock & Mélusine REX IA Open Source #AIParis 2020
Tock & Mélusine REX IA Open Source #AIParis 2020François
 
MailInBlack Footprint, c'est quoi ?
MailInBlack Footprint, c'est quoi ?MailInBlack Footprint, c'est quoi ?
MailInBlack Footprint, c'est quoi ?crochemib
 
Présentation MailInBlack Footprint
Présentation MailInBlack FootprintPrésentation MailInBlack Footprint
Présentation MailInBlack Footprintcrochemib
 
Le marketing automation pour les nuls
Le marketing automation pour les nuls Le marketing automation pour les nuls
Le marketing automation pour les nuls INES CRM FRANCE
 
01/06/2017 Matinale Activation Client personnalisée et Délivrabilité
01/06/2017 Matinale Activation Client personnalisée et Délivrabilité01/06/2017 Matinale Activation Client personnalisée et Délivrabilité
01/06/2017 Matinale Activation Client personnalisée et DélivrabilitéSoft Computing
 
Inbound Marketing : comment attirer de nouveaux clients _.pptx
Inbound Marketing :  comment attirer de nouveaux clients _.pptxInbound Marketing :  comment attirer de nouveaux clients _.pptx
Inbound Marketing : comment attirer de nouveaux clients _.pptxAgence Strategies
 
Comment communiquer sur Internet
Comment communiquer sur InternetComment communiquer sur Internet
Comment communiquer sur InternetSage france
 
Sugar – Facilité d'intégration à votre système d'information
Sugar – Facilité d'intégration à votre système d'informationSugar – Facilité d'intégration à votre système d'information
Sugar – Facilité d'intégration à votre système d'informationSugarCRM
 
Atelier 2 commerce électronique - décembre
Atelier 2   commerce électronique - décembreAtelier 2   commerce électronique - décembre
Atelier 2 commerce électronique - décembreGetting to Global
 
2008.10.08 Gestion Des Flux Documentaires Avec Le Club Alliances Ibm
2008.10.08   Gestion Des Flux Documentaires Avec Le Club Alliances Ibm2008.10.08   Gestion Des Flux Documentaires Avec Le Club Alliances Ibm
2008.10.08 Gestion Des Flux Documentaires Avec Le Club Alliances IbmHubert SENANT
 
MailKitchen - logiceil emailing
MailKitchen - logiceil emailing MailKitchen - logiceil emailing
MailKitchen - logiceil emailing MailKitchen
 
Petit-déjeuner-marketing-cross-canal
Petit-déjeuner-marketing-cross-canalPetit-déjeuner-marketing-cross-canal
Petit-déjeuner-marketing-cross-canalExperian
 
SugarCRM, facilité d’intégration à votre système d’intégration
SugarCRM, facilité d’intégration à votre système d’intégrationSugarCRM, facilité d’intégration à votre système d’intégration
SugarCRM, facilité d’intégration à votre système d’intégrationSynolia
 
Les Addons pour Sage CRM
Les Addons pour Sage  CRMLes Addons pour Sage  CRM
Les Addons pour Sage CRMFred Canevet
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaborationLaurent Barbat
 

Similaire à Mettez de l’ordre dans le chaos de votre production emailing grâce au design system (20)

EMDay 2015 - Facteurs clés de succès d'une opération emailing de conquête client
EMDay 2015 - Facteurs clés de succès d'une opération emailing de conquête clientEMDay 2015 - Facteurs clés de succès d'une opération emailing de conquête client
EMDay 2015 - Facteurs clés de succès d'une opération emailing de conquête client
 
Présentation des Nouveautés de Sage CRM v 6.6
Présentation des Nouveautés de Sage CRM v 6.6Présentation des Nouveautés de Sage CRM v 6.6
Présentation des Nouveautés de Sage CRM v 6.6
 
Forum 9 fev_2011_demat
Forum 9 fev_2011_dematForum 9 fev_2011_demat
Forum 9 fev_2011_demat
 
Réussir son projet CRM - La checklist en 12 questions
Réussir son projet CRM - La checklist en 12 questionsRéussir son projet CRM - La checklist en 12 questions
Réussir son projet CRM - La checklist en 12 questions
 
Ateliers createurs
Ateliers createursAteliers createurs
Ateliers createurs
 
Tock & Mélusine REX IA Open Source #AIParis 2020
Tock & Mélusine REX IA Open Source #AIParis 2020Tock & Mélusine REX IA Open Source #AIParis 2020
Tock & Mélusine REX IA Open Source #AIParis 2020
 
MailInBlack Footprint, c'est quoi ?
MailInBlack Footprint, c'est quoi ?MailInBlack Footprint, c'est quoi ?
MailInBlack Footprint, c'est quoi ?
 
Présentation MailInBlack Footprint
Présentation MailInBlack FootprintPrésentation MailInBlack Footprint
Présentation MailInBlack Footprint
 
Le marketing automation pour les nuls
Le marketing automation pour les nuls Le marketing automation pour les nuls
Le marketing automation pour les nuls
 
01/06/2017 Matinale Activation Client personnalisée et Délivrabilité
01/06/2017 Matinale Activation Client personnalisée et Délivrabilité01/06/2017 Matinale Activation Client personnalisée et Délivrabilité
01/06/2017 Matinale Activation Client personnalisée et Délivrabilité
 
Inbound Marketing : comment attirer de nouveaux clients _.pptx
Inbound Marketing :  comment attirer de nouveaux clients _.pptxInbound Marketing :  comment attirer de nouveaux clients _.pptx
Inbound Marketing : comment attirer de nouveaux clients _.pptx
 
Comment communiquer sur Internet
Comment communiquer sur InternetComment communiquer sur Internet
Comment communiquer sur Internet
 
Sugar – Facilité d'intégration à votre système d'information
Sugar – Facilité d'intégration à votre système d'informationSugar – Facilité d'intégration à votre système d'information
Sugar – Facilité d'intégration à votre système d'information
 
Atelier 2 commerce électronique - décembre
Atelier 2   commerce électronique - décembreAtelier 2   commerce électronique - décembre
Atelier 2 commerce électronique - décembre
 
2008.10.08 Gestion Des Flux Documentaires Avec Le Club Alliances Ibm
2008.10.08   Gestion Des Flux Documentaires Avec Le Club Alliances Ibm2008.10.08   Gestion Des Flux Documentaires Avec Le Club Alliances Ibm
2008.10.08 Gestion Des Flux Documentaires Avec Le Club Alliances Ibm
 
MailKitchen - logiceil emailing
MailKitchen - logiceil emailing MailKitchen - logiceil emailing
MailKitchen - logiceil emailing
 
Petit-déjeuner-marketing-cross-canal
Petit-déjeuner-marketing-cross-canalPetit-déjeuner-marketing-cross-canal
Petit-déjeuner-marketing-cross-canal
 
SugarCRM, facilité d’intégration à votre système d’intégration
SugarCRM, facilité d’intégration à votre système d’intégrationSugarCRM, facilité d’intégration à votre système d’intégration
SugarCRM, facilité d’intégration à votre système d’intégration
 
Les Addons pour Sage CRM
Les Addons pour Sage  CRMLes Addons pour Sage  CRM
Les Addons pour Sage CRM
 
7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration7. Du Design UX au Design de la collaboration
7. Du Design UX au Design de la collaboration
 

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
  • 3. Emmanuel Gérard email designer et formateur freelance @emg75www.email-designer.net
  • 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
  • 6. De quoi va-t-on vous parler ?
  • 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
  • 10. Qu’est ce qu’un design system ?
  • 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.
  • 14.
  • 15. Les design system s’appuient sur une nouvelle méthodologie de conception des produits digitaux : l’atomic design
  • 16.
  • 17.
  • 18. Comment mettre en place un design system pour le canal de l’emailing ?
  • 19.
  • 20. Étude de cas : mise en place d’un email design system pour le service marketing de MMA (groupe Covea)
  • 21. La MMA en quelques mots
  • 22.
  • 23.
  • 24. 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.)
  • 25. Stratégie - Développer le Pro et Entreprise - Dynamiser (pérenniser) le marché des Particuliers
  • 26. 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.
  • 27. 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
  • 28.
  • 29. Organisation de l’équipe en charge de la création des emailings
  • 30. - 1 responsable marketing - 8 chargés de communication (rédacteurs) - 3 infographistes - 3 chargés de routage (routage, stats)
  • 31. En 2016, L’intégration html est externalisée auprès de différents prestataires externes
  • 32. Un template graphique et html est développé en externe pour chaque type de besoin
  • 34. - 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
  • 35. Quels sont les étapes pour mettre en place un design system pour le canal de l’emailing ?
  • 36. 1. Analyse de l’existant et des besoins 2. Conception fonctionnelle et graphique 3. Intégration html 4. Documentation et mise en ligne
  • 37. 1. Analyse de l’existant et inventaire les besoins
  • 38. Analyse de 15 emails représentatif des productions de la MMA (ergonomie, design visuel, intégration html)
  • 39. - Repérer les points forts et les points faibles - Identifier le FIX et le FLEX
  • 40.
  • 41.
  • 42.
  • 43.
  • 45. Mise en place d’atelier de travail interview de chaque acteur de la chaîne de production (rédacteur, graphiste, chargé de routage, etc.)
  • 48.
  • 50. Déclinaison de la charte graphique print et digital
  • 51. En prenant en compte les spécificités de l’emailing
  • 52.
  • 54. Normaliser le codage html des différents modules
  • 55. - 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)
  • 56. 4. Documentation de l’email system et mise en ligne
  • 57. Création d’un site extranet dédié (Wordpress) charte-emailing.mma
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68. 5. Appropriation et vie du design system
  • 71.
  • 72. - Réduction des « rejets » au niveau du routeur
  • 73. +de liberté et d’agilité rédactionnel dans la construction des messages (Content First !)
  • 74. Evolutivité et maintenabilité des différents modules
  • 75. Amélioration de l’expérience utilisateur (ergonomie, cohérence et consistance)

Notes de l'éditeur

  1. A afficher à 12H et à 14H
  2. Plus qu’une simple charte graphique améliorée !
  3. 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
  4. Chiffres clés
  5. Chiffres clés
  6. Pas de personne dédiée au développement html
  7. Pas de personne dédiée au développement html
  8. Pas de personne dédiée au développement html
  9. Pas de personne dédiée au développement html
  10. Pas de personne dédiée au développement html
  11. Pas de personne dédiée au développement html
  12. Pas de personne dédiée au développement html
  13. Pas de personne dédiée au développement html
  14. Pas de personne dédiée au développement html
  15. 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
  16. Nombre de révision et d’aller retour
  17. Comprendre le Workflow
  18. Homogénéiser le header Preheader masqué Élément fix et flex
  19. Stylisation du texte alternatif
  20. Stylisation du texte alternatif
  21. Éviter le format papier ou pdf Pas évolutif Source mutliple Pas évolutif