ecojoko : je m’fais plaisir avec un Design System Email complet !

J’ai fait fort cette fois copain·ine. Très fort. Trop fort peut-être… J’me suis éclaté à préparer toute la partie graphique d’un Design System Email pour ecojoko, comme ça, pour le kif. Quel pied j’ai pris mon Di… Mais attends voir… Kweuah ? Qu’entends-j’ai-je ? Qu’ouïes-j’ai-je ? Tu connais pô ecojokô ? (c’est l’accent du Nord, t’as r’connu, t’es d’min coin !).

ecojoko est une marque qui te propose, à la location ou à l’achat c’est toi qui vois, un assistant connecté (tout mignon, super stylé) relié à ton compteur Linky (ou à ton disjoncteur général si t’es pas à la mode), pour analyser et connaître en temps réel la consommation électrique de ton habitat. Il te fournit ensuite, via l’appli dédiée, des détails, historiques, graphiques, analyses sur ta conso, et te permet, sur le papier, de faire des économies d’énergie (et par là même, de récupérer des sous-sous dans ta popoche).

J’apprécie car je suis un psychopathe de la consommation électrique; déjà parce que mes factures ont atteint des montants de gueudin parce que je suis au tout-électrique, mais aussi parce que j’en peux plus des coupures à répétition lorsque j’utilise le sèche-cheveux pour peigner la tignasse de l’aînée et que la seconde profite du chauffage soufflant dans la salle de bain le matin…

En m’inscrivant à la newsletter ecojoko, et en m’abonnant à leur solution, j’ai indubitablement reçu plusieurs typologies d’emails : transactionnels, promotionnels, emails de conseil, newsletters. Et à tous les coups, je suis déception. Une belle initative/start-up comme celle-ci devrait avoir une communication emailing à la hauteur de son utilité publique ! Voilà qui est bien dit. Et voici maintenant un aperçu de leurs emails actuels.

Parcours les multiples typologies d’emails avec les flèches de ton clavier copain·ine.

Je vais, dans un premier temps si tu le veux bien, te livrer une analyse la plus exhaustive possible de ce qui me chagrine… Tu veux bien ? Soit. Je me lance, ne me rattrapez pas.

Concernant l’email promotionnel

J’en ai reçu qu’un, et c’est peut-être mieux ainsi.

• Le titre principal « French Days » est en image. Ça pique, parce qu’une image ne s’affiche pas automatiquement sur tous les environnements d’ouverture, elle est parfois bloquée avant d’être téléchargée. Et aussi parce qu’en terme d’accessibilité ça empèche une lecture optimale par les lecteurs d’écran.
• Le code promo est en image. Ça pique encore.
• La couleur de fond est dans l’image. Ça pique toujours plus.
• Un compte à rebours est utilisé pour t’insuffler un p’tit coup de pression. Sur le principe, pourquoi pas, mais c’est risqué quand on connaît la problématique de la mise en cache des images sur iOS15.
• Y a de l’emoji à foison, ça pique trop.

Allez, je fais court pour commencer. Déjà parce que tu verras que j’ai rassemblé des points négatifs communs à l’ensemble des emails analysés en milieu d’article. Mais surtout parce que je ne veux pas non plus « enfoncer » l’équipe créa d’ecojoko : c’est les french days, ils ont voulu jouer sur le sujet avec des couleurs franco-françaises, ça dénote un peu avec l’ensemble, les textes sont petits, l’interligne serré, les visuels un peu identiques, ça va comme ça !

Maintenant, l’email transactionnel

J’avoue, un email transactionnel se doit d’être assez simple, clair, concis.

Pour le coup, ça colle bien : peu de couleurs, peu d’espace. Les textes sont « collés » au bord de l’email, pas très vivants non plus dans leur mise en forme graphique : qu’il s’agisse de titres ou de paragraphes, ils sont tous plus ou moins au même niveau et plus ou moins dans la même mise en forme.

Pourquoi ne pas ajouter des mots en gras, en italique, des tailles différentes selon l’importance des titres et des textes ? Pour rendre l’ensemble vivant quoi !!! De plus, la lisibilité et l’accessibilité des textes n’est pas optimisée puisque le bleu du logo est utilisé pour les textes, quand la couleur de fond est du bleu clair. Étonnamment, le contraste est suffisant pour passer les tests de contraste. Soit.

Ensuite, la newsletter

• La couleur greenmarket utilisée sur certains ensemble de mots ne passe pas au test de contraste. Forcément, sur un fond blanc, c’était un pari risqué.
• Des emojis, encore et encore.
• C’est très verbeux. Alors, sur une newsletter, j’ai envie de dire, rien d’étonnant finalement. Mais la newsletter n’a pas non plus vocation a faire office de blog (entier). Et puis si jamais on a pas le choix, bah on aère un peu l’ensemble avec des interlignes un peu moins étroits, avec des jeux de mise en forme du texte (je me répète, j’en ai bien conscience).
• Pour les visuels des chapitres « Coup de boost du mois » et « Blog à énergie positive », ça ou rien, c’est pareil. C’est moi ou ils sont très étroits en hauteur ?

Enfin, l’email « conseils »

• La cover (ou « hero ») est conçue en image, avec un titre compris DANS l’image. Je m’insurge ! Il faut à tout prix dissocier le contenu textuel et le contenu graphique : le titre devrait être en HTML brut, avec une mise en forme CSS, pour un affichage immédiat, et pour une meilleure accessibilité. Je remarque aussi souvent (pas dans les exemples présentés) la présence récurrente d’un visuel d’un macaque à longue queue. Alors soit, le (so cuuuuute) logo de la marque est une tête de singe, mais je ne pense pas qu’il soit indispensable, voir pertinent, d’introduire des visuels de primate partout pour autant : on parle d’économie d’énergie (et d’écologie) là, c’est un autre sujet ! Selon mon humble avis, des visuels en rapport avec l’électricité (puisque c’est tout de même la seule énergie analysée avec l’outil) seraient bien plus parlants.
• Il y a beaucoup de teintes variées utilisées, c’est incontestable. Alors certes, elles font partie de la charte (ou en tout cas, des styles déclarés dans le thème du site internet). Mais j’ai du mal à en discerner la vocation : yellowmarket, bluemarket, greenmarket, orangemarket… J’aurai tendance à affimer qu’il faut savoir limiter l’utilisation des couleurs aux teintes « fortes » et principales de la marque. En l’occurence, le bleu du logo, le blanc, le lime (un vert vif et lumineux qui rappelle la couleur de la chair d’un citron vert) et le greenmarket, qui s’accordent bien ensemble.
• Des screenshots de l’appli sont insérés, mais ils sont discrets, ou mal calibrés. Autrement dit, peu lisibles, et sans grand intérêt. C’est malheureux, parce que ce qui fait la force de la solution c’est, entre autre, l’application rattachée avec l’ensemble des capacités d’analyse qu’elle fournit !

De manière générale…

• La signature des emails s’orne encore une fois d’un visuel d’un macaque à longue queue. Too much.
• Les icônes des réseaux sociaux en bas d’email ne correspondent pas à leur mise en forme graphique sur le site internet. De plus, ils ajoutent (encore un peu plus) des teintes différentes à l’intégralité de la communication.
• Les textes des liens de désabonnement, de preference center, et ceux qui les entourent sont en anglais. C’est curieux : une start-up 100% française qui conclut ses communications par un message anglais… Mettons cela sur le dos (qu’elle a bon) de la solution de routage qui ne laisse peut-être pas le choix à la configuration.
• La taille des textes du corps des emails sont petits, et peu lisibles.
• Il n’y a jamais de lien vers une page miroir. JAMAIS ! Quid de l’accessibilité, je vous le demande ? Pas de possibilité d’analyser le code par là même. Je suis définitivement déception.
• Pourquoi cette url chelou « contact.ecojoko.com » en signature de mail ? Y a-t-il une raison à ne pas préférer un bouton ou un texte correctement rédigé ?
• Des emojis. Encore des emojis. Trop d’emojis. Partout. Le problème des emojis, c’est que, primo, ça ne s’affiche pas de la même façon selon les environnements d’ouverture. Deuziemo-tercio, même si ils sont faciles à insérer, ils donnent, à mon sens, un aspect moins professionnel à la marque, moins sérieux, moins quali, moins glam-chic. Utilisés avec parcimonie, pourquoi pas. Mais pas à chaque fin de phrase.

Eeeeett, qu’est-ce qu’on fait maintenant ?

Tout est dans le titre de l’article gamin·e ! Si y’a pas de style abouti et de cohérence entre ces différents emails, c’est parce qu’il manque, entre autre, un bon Design System Email à l’ancienne ! Je vais pas te laisser là en rade, je m’en occupe !

• Je commence à préparer un fichier sur Figma, en gardant à l’esprit une conception suivant les principes de l’Atomic Design.
• J’enregistre les teintes majeures de la marque (avec leur déclinaison en Dark Mode que je chope à l’arrache via l’outil de ProofJump, pour dire d’avoir rapidement un aperçu de ma maquette en Mode Sombre) sous variables locales. Je définis aussi les valeurs de mes marges, tailles de textes, largeurs, radius, toujours en variables locales.
• Sur une première page, je définis mes composants « Atomes » : le logo plein, le logo réduit, en bleu, en blanc. Les pictos des réseaux sociaux (conformes à ceux du site cette fois-ci). Et les icônes de la librairie Google.
• Sur une seconde page, je déclare mes composants « Molécules » : les boutons dans leur multiples niveaux, tailles, et états (survol ou non). Tiens, je me fais plaiz’ et je mets la typo Poppins pour tous les textes par la même occasion. J’suis un fou. J’en profite aussi pour créer une molécule faite d’un simple visuel, d’un titre, d’un texte et d’un bouton (instance de mon composant « Boutons »). Tu comprendras pourquoi par la suite.
• Et puis une troisième page avec tous mes Organismes : « Texte seul » avec un texte centré ou non, boxé ou non. Un module « Réseaux sociaux ». Un autre « App ». Un autre « Espacement », un autre « Séparateur ». Un « Header » avec des variantes de logo réduit, plein, centré, ferré à gauche, sur fond bleu ou fond blanc. Un module « Boutons », boxé ou non. Un module « Articles » qui prend deux instances de la molécule dont je parlais juste avant (souviens-toi, avec le visuel, le titre, le texte et le cta… Tu te remémores ?). Un module « Cover » avec titre à gauche, visuel à droite. Un module « Argument » avec icône (issue de mes Atomes) à gauche, titre et texte à droite. Un module « Zigzag » avec icône, titre, texte et bouton à gauche, et visuel à droite, et une variante avec le sens inversé. Puis un dernier module « Zigzag bouton » avec juste titre et texte à gauche, bouton à droite.

Et bah croivez-le ou pas, mais c’est largement suffisant pour créer très rapidement mes quatre typologies d’email. En plus, j’ai pensé ces modules en auto layout mode « Wrap » pour que leur contenu se superpose lorsque la largeur n’est pas suffisante. C’est obscur ? T’inquiète paupiette, tout va s’éclaircir dans un instant.

Ne me reste plus qu’à créer une nouvelle page (toujours dans le même fichier Figma, mais j’aurai pu le faire sur un autre fichier si j’avais publié ma librairie). Et dans cette nouvelle page, je crée mes quatre maquettes simplement à base de glisser-déposer. Je n’ai « plus » qu’à rédiger les bons textes dans les champs assortis, jouer sur les couleurs, les visuels, etc…

Je te ponds alors quatre emails de typologie différente, en Light Mode :

Les quatre emails sont visibles en naviguant avec (toujours) les flèches du clavier !

Tu noteras, bien sûr, que la maquette d’email promotionnel n’existait pas à la base. T’as l’oeil ! Mais bon, j’avais pas spécialement envie de traiter des French Days… J’aurai plutôt préféré recevoir un email, en prospection à froid, qui m’aurait présenté le fonctionnement, les avantages de l’assitant ecojoko. J’aurai cliqué, c’est certain ! Et j’ose espérer ne pas être le seul…

Chelou le rendu mobile des blocs Zigzag ?

En fait, c’est parce que j’anticipe en concevant UNE SEULE VERSION pour mes organismes : la même pour la version Desktop ET la version Mobile. Ce qui sous entend qu’il n’y aurait pas besoin de media queries pour afficher la version mobile de l’email. Du coup, j’suis au plus proche du rendu final !

Bien sûr, avec des media queries, je pourrai encore améliorer le rendu sur support nomade, mais là j’avais pas envie… J’SUIS TRANSPARENT AVEC TOI !

Et en Mode Sombre, ça donnerait quoi ?

Pour aller jusqu’au bout de l’excercice, j’fais une page dédiée au rendu Dark Mode, juste en changeant le mode de ma variable locale « Couleurs ». Et ouais mon gaaaars, c’est ça le bénéf’ des variables locales ! Et pif-pouf, magie-magie…

Est-ce encore utile de te dire que tu peux utiliser les flèches de ton clavier pour voir tous les rendus en Mode Sombre ? Pas sûr…

J’avoue que ça ne règle pas toutes les problématiques liées au Dark Mode dans l’email marketing, mais c’est un début.

Quand je déballe tout mon matos (je parle des maquettes), tu te dis peut-être que ça m’a pris deux minutes. En vrai, j’ai taffé comme un fou et j’ai les yeux qui saignent. Mais j’suis maso, j’aime quand ça fait mal ! Et là, j’ai bien morflé…

T’en penses quoi ? T’as un avis, des remarques, objections ? Je t’écoute !