ecojoko: I'm having fun with a complete Design System Email!

I did it hard this time, buddy-buddy. Very hard. Maybe too hard... I had a blast preparing the graphic part of a Design System Email for ecojokojust like that, for the kif. What a kick I got out of my Di... But wait a minute... Kweuah? What do I hear? What do I hear? Do you know ecojokô? (that's the northern accent, you've been there, you're from the north!).

ecojoko is a brand that offers you a connected assistant for rent or purchase, as you wish. (very cute, very stylish) connected to your Linky meter (or your circuit breaker if you're not fashionable).to analyze your home's electricity consumption in real time. It then provides you, via the dedicated app, with details, histories, graphs and analyses of your consumption, enabling you, on paper, to make energy savings. (and by the same token, get some money out of your pocket)..

I appreciate it because I'm a power consumption psychopath; firstly because my bills have reached gueudin amounts because I'm on all-electricity, but also because I can't stand the repeated blackouts when I use the hairdryer to comb the eldest daughter's hair and the second daughter uses the fan heater in the bathroom in the morning...

When I signed up for the ecojoko newsletter, and subscribed to their solution, I undoubtedly received several types of emails : transactional, promotional, advice emails, newsletters. And every time, I'm disappointed. A great initiative/start-up like this should have email communication that matches its public utility! Well said. And here's a glimpse of their current emails.

Use the arrows on your keyboard to navigate the many different types of email.

First, if you don't mind, I'd like to give you as exhaustive an analysis as possible of what's bothering me... Do you mind? OK. Don't catch me.

About promotional email

I only received one, and maybe that's for the best.

• The main title "French Days is in images. It stings, because an image isn't automatically displayed on all opening environments, and is sometimes blocked before being downloaded. And also because, in terms of accessibility, it hinders optimal reading by screen readers.
• The promo code is pictured. It still stings.
• The background color is in the image. It stings even more.
• A countdown timer is used to give you a little push. In principle, why not, but it's risky when you know the problems of image caching on iOS15.
• There's emoji galore, it stings too much.

I'll keep this short to start with. Firstly, because you'll see that I've collected the negative points common to all the emails analyzed in the middle of this article. But mainly because I don't want to "knock" ecojoko's creative team either: it's French Days, they wanted to play on the subject with Franco-French colors, it's a bit out of place with the rest, the texts are small, the line spacing tight, the visuals a bit identical, it's fine as is!

Now, transactional email

I admit, a transactional email needs to be fairly simple, clear and concise.

For the time being, it's a good fit: few colors, little space. Texts are "stuck" to the edge of the email, not very lively either in their graphic layout: whether headings or paragraphs, they're all more or less at the same level and more or less in the same layout.

Why not add words in bold, italics, different sizes according to the importance of the titles and texts? To bring the whole thing to life! What's more, the legibility and accessibility of texts is not optimized since the blue of the logo is used for text, while the background color is light blue. Surprisingly, the contrast is sufficient to pass the contrast tests. Either.

Then, the newsletter

• The greenmarket color used on some word sets doesn't pass the contrast test. Inevitably, on a white background, it was a risky bet.
• Emojis, again and again.
• It's very wordy. So, on a newsletter, I'm inclined to say, nothing surprising after all. But the newsletter is not intended as a blog either (entire). And if you don't have a choice, you can lighten things up a bit by narrowing the line spacing a little and playing with text formatting. (I'm repeating myself, I'm well aware of that).
• For chapter visuals "Boost of the month and "Positive energy blogIt's all the same. Is it just me or are they very narrow in height?

Finally, the "advice" email

• The cover (or "hero") is designed as an image, with a title IN the image. I must protest! Textual and graphic content must be kept separate at all costs. the title should be in raw HTML, with CSS formatting, for immediate display and better accessibility. I also often notice (not in the examples shown) the recurring presence of a visual of a long-tailed macaque. So either the (so cuuuuute) brand logo is a monkey's head, but I don't think it's essential, or even relevant, to introduce primate visuals everywhere for all that: we're talking about saving energy. (and ecology) that's another matter! In my humble opinion, visuals related to electricity (since this is the only energy analyzed by the tool) would be far more telling.
• There's no denying the variety of shades used. Of course, they're all part of the (or at least styles declared in the website theme). But I find it hard to discern its vocation: yellowmarket, bluemarket, greenmarket, orangemarket... I'd tend to agree that you need to limit the use of colors to the brand's main, "strong" hues. In this case, the blue of the logo, white and lime. (a bright, luminous green reminiscent of the color of lime flesh) and greenmarket, which go well together.
• Screenshots of the app are included, but they are either discreet or poorly calibrated. In other words, not very readable, and of little interest.. This is unfortunate, because one of the strengths of the solution is the attached application with all the analysis capabilities it provides!

In general...

• The email signature is once again adorned with a visual of a long-tailed macaque. Too much.
• The social network icons at the bottom of emails don't match their graphic layout on the website. In addition, they add (a little more) different shades to the entire communication.
• The texts of the unsubscribe, preference center and surrounding links are in English. Curious: a French 100% start-up that concludes its communications with an English message... Let's put it on the back burner! (she's good) of the routing solution, which may not give the configuration a choice.
• Email body texts are small and difficult to read.
• There is never a link to a mirror page. NEVER! What about accessibility, I ask you? No possibility of analyzing the code for that matter. I'm definitely disappointed.
• Why this weird url "contact.ecojoko.com as an e-mail signature? Is there any reason not to prefer a well-written button or text?
• Emojis. More emojis. Too many emojis. Everywhere. The problem with emojis is that, firstly, they don't display in the same way in different environments.. Deuziemo-tercio, even if they're easy to insert, in my opinion they make the brand look less professional, less serious, less quali, less glam-chic. Used sparingly, why not. But not at the end of every sentence.

Eeeeett, what do we do now?

It's all in the title, kid! If there's no accomplished style and coherence between these different emails, it's because it's missing, among other things, a good old-fashioned Design System Email ! I'm not going to leave you here in the lurch, I'll take care of it!

• I start preparing a file on Figma, keeping in mind a design following the principles of theAtomic Design.
• I register the brand's major shades (with their Dark Mode version, which I snapped up via the ProofJump toolto give you a quick preview of my Dark Mode model) under local variables. I also define the values of my margins, text sizes, widths and radii, always as local variables.
• On the first page, I define my components "Atoms : the full logo, the reduced logo, in blue, in white. Pictograms for social networks (in line with those on the site this time). And Google library icons.
• On a second page, I declare my components "Molecules buttons in their multiple levels, sizes and states (overflight or not). Here, I'll do myself a favor and put the typeface on. Poppins for all the texts at the same time. I'm crazy. I also took the opportunity to create a molecule made of a simple visual, a title, a text and a button. (instance of my "Buttons" component). You'll understand why later.
• And then a third page with all my Organizations : "Text only with text centered or not, boxed or not. A module "Social networks. Another "App". Another "Spacinganother "Separator. A "Header with variants of reduced, full, centered, left-ironed logo, on blue or white background. One module "Buttonsboxed or unboxed. One module " Articles " which takes two instances of the molecule I mentioned earlier (remember, with the visual, the title, the text and the cta... Remember?). One module "Cover with title on left, visual on right. One module "Argument with icon (from my Atoms) on the left, title and text on the right. One module "Zigzag with icon, title, text and button on the left, and visual on the right, and a variant with the direction reversed. Then a final module "Zigzag button with title and text on the left, button on the right.

And believe it or not, that's more than enough to create my four email types very quickly. What's more, I've thought up these modules in auto layout "Wrap" mode so that their contents overlap when width is insufficient. Is it dark? Don't worry, it'll clear up in a moment.

All I have to do now is create a new page (still in the same Figma file, but I could have done it on another file if I had published my library). And in this new page, I simply create my four layouts drag-and-drop. All I have to do is write the right texts in the right fields, play with colors, visuals, etc...

I then send you four different types of emails, in Light Mode:

The four emails can be viewed by navigating with (still) the keyboard arrows!

You'll note, of course, that the promotional email template didn't exist in the first place. You've got a good eye! But then, I didn't really want to deal with French Days... I'd rather have received an email, in cold prospecting, that would have explained how the ecojoko assistant works and its advantages. I would have clicked, that's for sure! And I hope I'm not the only one...

What's wrong with the mobile rendering of Zigzag blocks?

In fact, it's because I anticipate by designing A SINGLE VERSION for my organizations : the same for Desktop AND Mobile versions. This implies thatthere would be no need for media queries to display the mobile version of the email. So I'm as close as I can get to the final rendering!

Of course, with media queries, I could still improve the rendering on mobile devices, but I just didn't feel like it... I'M TRANSPARENT WITH YOU!

And what would it look like in Dark Mode?

To get to the end of the exercise, I've created a page dedicated to Dark Mode rendering, just by changing the mode of my local variable "Colors. That's the benefit of local variables! And pif-pouf, magic-magic...

Does it still help to tell you that you can use the arrow keys on your keyboard to see all the renderings in Dark Mode? Not sure...

I admit that this doesn't solve all the problems associated with the Dark Mode in email marketingbut it's a start.

When I unpack all my gear (I'm talking about the models)You may think it took me two minutes. The truth is, I've been working like crazy and my eyes are bleeding. But I'm a masochist, I like it when it hurts! And that's when it really hurt...

What do you think? Do you have any opinions, remarks or objections? We're listening!