Email redesign for fun: Castorama

Email design is my passion. It haunts me, day and night. At Badsender, we of course offer a dedicated email design service. But that's not enough for me. No. I can't help but keep an eye on my inbox, looking for a promotional email or newsletter I can rethink, on which I can get a "willy". And it was on Casto that I had a flash!

It's a good thing because I'm a big fan of Castorama. I'll be able to spend my weekends browsing the shelves of this store, and come out of there with my cart full of DIY accessories and equipment that I'll probably never use, since I'm a Sunday DIYer, and on Sundays I'm in Casto, of course, it all depends...

Anyway, I received an email from Castorama about opening or renewing the C-Casto Max loyalty card.

Click on the right arrow on your keyboard to view the mobile version of the current email.

Analysis of existing email design

I'd already forgotten that I had a loyalty card. But apparently that's not the one I have. Well, it is, since they're talking about renewing it. But no! Since I'm told further down in the email that I have a C-Casto card at all; Well yes, since I'm told "Rediscover the C-Casto Max card ! Anyway, it's not clear... The words "renewal" or "opening" don't really help me understand what I've got at the moment.

But these aren't the only details that sadden me. (I'm going a bit hard here). Here, I'll list them for you, and explain what I plan to do next:

• The preheader at the beginning of the email could be "hidden". The purpose of a preheader is not to be visible in the email, but rather to complement the subject line. Don't get the wrong idea!
• An unsubscribe link is sorely needed next to the mirror page link, to make it immediately more visible and accessible. It may seem surprising to you, but it's good practice!
• The baseline "change keeps us moving forward is tiny... It will now be converted to HTML text and therefore out of the logo. I may be taking a few liberties, it's true, but honestly, I don't see why I shouldn't have a bit of fun! That's the whole point of redesigning for fun, isn't it? I'm bound to enjoy it (too)!
• What's the point of this menu? I mean, really? And what does it have to do with the loyalty card? The menu will be deletedI've made up my mind: I don't see much point in an email about a loyalty card. At least not with the current content.
• The cover (the main block, just below the menu)is a big picture: NOOOOOOOON! Why? We could so easily design it with an HTML part and a visual part... Well, that's what I'm going to do anyway: it will now be designed differently, and all text boxes will be made of pure HTML text and formatted with CSS : technically, it can be done! OK, there will be a few minor differences in typography and spacing, but they'll be minimal...
• Is something going on with the bar code? Because, personally, I don't have a scanner at home, and besides, I'm not a cashier, so... Why add this bar code to the email? What's the point? Someone explain it to me! Oh, I'm told it's to show at the checkout... Yes, well, then we'll send you an email with the number of points available in your loyalty account and the barcode, and voilà!
• The reinsurance block with "find a handyman, "home delivery, "Drive 2hIn my opinion, these are not the major points to highlight on this type of email. Instead, I'd like to take advantage of the opportunity to highlight the strong points of the C-Casto-Max card. So I'll be redesigning the entire footer by adding a "With the C-Casto Max Card, you could also have this! Ch'bim, in your face!"
• Having a link to save the card in your wallet is great. But if the email isn't opened on a cell phone, I don't understand... I can say the same thing about the buttons to download the app: if the recipient doesn't open the email from a smartphone, I don't see the point of inserting such a block.

And that's just to talk about what already exists. And as you can imagine, I'm not going to stop there!

Upcoming additions to the new email design

In an email design redesign, even if it's just for fun, I can afford to add content that I thought would be more relevant, or bring in a bit of whimsy. I'll get started:

• On small yellow inserts with rounded edges (next to the text "Exclu carte", for example) I've just created a CSS animation effect to bring the email to life. Yes, I know: it won't work everywhere. But if it doesn't work, it doesn't break the email! That's the most important thing!
• Why didn't I a button on the first insert (main insert on yellow background) that would allow me to change my card? Would it?
• About word sequences "C-Casto MaxI apply specific colors to certain words: both to be consistent with the brand's charter, but also to liven things up and give rhythm to the reading!
• I'm inserting a short text from behind the scenes to explain which loyalty card formula I'm on, and why it would be interesting to change!
• At the same time, I'm including the few Exclu offers on the card to give a little incentive to switch. That's right! In the original email, there's only one button "Loyalty offers of the moment. Yes, but if the loyalty offer of the moment is "your points are multiplied by 2 from such and such a date to such and such a date".I think this could be a good argument for me to create/change my loyalty card.
• I include a mini FAQ at the bottom of the email, on the most common questions and those most likely to "speak" to my recipient: "Does the C-Casto Max card pay for itself quickly? with a concrete example, and "How long are C-Casto Max loyalty coupons valid?". For this module, the texts are sometimes invented (when I tell you that I take liberties... 🙂 ). But that's the kind of indication I'd like to find in this type of email.
• Anything that can be done in HTML and CSS instead of an image will be done that way! The rounding for the reassurance block elements, the borders, the separators, the tags, the buttons with integrated arrows... EVERYTHING! I love adding to my workload.

Click on the right arrow on your keyboard to view the mobile version of the current email.

HTML and CSS development for Casto's new email design

Affirm "graphic effects will be coded in CSS, text content and visual content will be separated, and a maximum number of elements will be developed in HTML..."., it's easy, as long as it's done in Figma and not in code! And the surprise loaves multiplied, and the water changed into Peace God, eh, we ask to see buddy!

I see so many of them on the social networking sites pros of quick, sloppy redesigns, with "Thumbs up for the left-hand version, hearts for the right?... Very little for me! When I take on a task, I see it through to the end, as if I were on a mission! (except for Darty email redesign 🙂 )

So here's the new Castorama email design, developed in HTML and CSS, available on Codepen, so you can see for yourself.

And I'll go even further: here's previe email test resultsw. Because it's the same old stuff! To say that it's coded, but not tested, makes no sense at all!

What's the difference between the mock-up and the rendered email code?

In a nutshell :

• The rounding applied to certain elements is not respected on all opening environments, in particular Outlook.
• CSS animations via keyframes and animate don't work everywhere, but that's not a "big deal" in itself.
• The typefaces used, i.e. Google Font "Poppins" and the substitute typeface "Century Gothic", do not appear on all mail clients. This doesn't change the contentand substitution fonts allow for graceful degradation.
• I'd have liked to improve the dark mode rendering on certain opening environments, where black text on a yellow background becomes white on a yellow background, with clearly insufficient contrast. But it's very complex to overcome all the problems of dark mode rendering. It would undoubtedly be possible to apply Rémi Parmentier's CSS merge mode method for solving Gmail's dark mode problemsBut it's still an article "for fun": I can't take two weeks to code an email I've never been asked to write, either, you'll understand 🙂 .
• Some visuals are not in PNG transparent background, simply because I don't have access to the Castorama visuals library, and they were already in JPEG in the original email.
• The advantages of the C-Casto card and the C-Casto Max card are superimposed one under the other on certain versions of Outlook... Anyway, the recipients probably won't be on Outlook Windows desktop software, since this is a BtoC email. But I'm not making excuses, and prefer to play it straight!

And... that's about it! So yes, if you're quibbling, you'll undoubtedly list a few more small fixes and palliatives here and there. But here, don't waste any more time: just take your phone or your finest featherContact us for your email redesign!