I confess, I enjoy it every time I embark on an email graphics redesign just for the fun of it. It's my hobby, my dada, my passion. "But, this job is the chance of a lifetime, I believe in it like crazy!". This morning, poof, a promotional email from Darty in my mailbox: first come, first served! And they won't be disappointed... Dixit Darmanouche, "You'll see, it's going to be fine"..
Firstly, to fully understand what we're talking about, we need to enclose a carbon copy of the original campaign.
What are the mistakes in this email creation?
- The preheader is displayed IN email. About? Is there a purpose behind it?
- Menu tab texts are larger than almost all other text content. I'd even go so far as to say I'd even go so far as to say they're bigger than the cover title. (at least as much). It's simple, nothing about me is over the top.
- The cover text is shown in its entirety. This is already a red card. This is obviously due to the fact that the clock system is dynamic. (in other words, the time shown changes depending on when you open the email, as does the text "Did you have sweet dreams? and that cover image, by the way").. The same principle asa countdown timer in an e-mail what. So be it! Why not for the title... But the button (which always remains the same)what's the point?
- In fact, it's hard for me to understand what exactly is the purpose of the "Take advantage" button on the cover. What am I taking advantage of? A discount? Where is it from? "A don't get it though!"
- So sorry, Darty, but the pictograms of the beds with the dimensions add absolutely nothing, are redundant and graphically "heavy". Here's the pavement.
- The product images are tiny! They're visuals for little ladybugs!
- For the product sheet, it's up to your mother to distinguish between the typology, the brand, or the description.
- The old price (crossed out) and the post-reduction price float. It's freestyle and masterflex.
- As for the texts on the product buttons, we'll pass on originality. (excuse me Dartouche, I'm harsh, but it's for the needs of the article, as you can imagine, otherwise I love you !). They're cold and don't really generate excitement or curiosity.
- The home furnishings banner comes before the bedding cross-selling banner. That's not right, is it? This banner is also full image. In fact, the title, text, discount and "Take advantage" button are extremely small. I may have good eyesight, but don't push it.
- The size of social network icons leaves much to be desired. You have to be good with your hands to be able to click on them. Idum for application download buttons.
And what about the mobile version of the email?
Well, I'm going to say it's fine. Although I'm having a hard time understanding why the product blocks are now formatted in two columns (strange...). In any case, a mobile version of the email exists, and that's already a lot. I'm entitled to think that a mobile version of the email has been designed in advance. And that's good.
Darty email creation explained live or as a podcast
So where's my project to redesign the email graphics?
Where's happiness, where's happiness, where's happiness? Okay, I'll stop. I like to criticize, that goes without saying, but I also like to put forward proposals. So here's the Office version of what I had in mind. It's Darty mon kik... Ok ok I stop, I get it!
Need help?
Reading content isn't everything. The best way is to talk to us.
- I open Figma and buy a hotel on rue de la Paaaaiiix!
- I take the background color of the
<body>present on the Darty website, just to be consistent. - The width of the email is reduced from 640 to 600 pixels. This is more than enough to display content correctly, and complies with our advice on the best widths for an email.
- I'm applying a 12px grid to my layout to respect the internal and external margins, dimensions and spacing, which will ALL be multiples of this figure. A bit of seriousness, though.
- All shades specific to the brand's graphic charter are stored as variables on Figma for quick and easy use. But that's not all. You'll see later (It also forces you to read to the end, it's vicious). In any case, it's a start for design system for email finally.
- Hop, finish the preheader, it's off! I mean, I'm hiding it. I've gained a few pixels in height, which isn't insignificant.
- Typefaces specific to Darty's brand image (i.e.
Roboto Slabfor titles andOpen Sansfor texts) are used to good effect. We're talking about Google Font here. And if you don't know how to use google font in an emailClick on the link to find out! - I add access to the Darty account and kiss Jean-Pierre Mader goodbye. "Camembert jaune, you can't, there's Gérard Depardieu double-parked on the hard shoulder."
- Menu tab texts are reduced from 17 to 14px. It's non-negotiable!
- An additional menu tab to the Darty Max service (to push the company's responsible approach a little further, with unlimited maintenance and repairs... It would be too stupid not to mention it!)
- I'm aligning myself with the generation of the image time in the cover (As much as I'd like to do otherwise, I can't!). BUT! I dissociate the beginning of the text "He is to be able to develop it in HTML. I'm forced to leave the title "Have you had sweet dreams? in images, as text changes according to opening hours (past 12:00, the text will be "Have a good nap!" I'm going out on a limb here! I'm in guedin).
- I write a text in the cover to introduce what the associated button leads to. Connections are made!
- All text and buttons have been redesigned to bring in more bedding universes and stimulate curiosity (and to encourage clicks, I'm not going to lie to you...). Now that, on the other hand, goes against the grain. best practices in email accessibilitydon't you think?
- Hover effects on all buttons, without exception (why deprive yourself, when you know that the degradation of the hover effect in an email is more than acceptable)
- The transition title will be a little longer before the product list.
- I delete thumbnails "bed illustration / dimensions to replace them with a filter system: I like to imagine that if the list were longer, some products would disappear when you clicked on this or that dimension. When I see what can be done with the input checkbox technique in emailI'd like to think it can be done...
- The size of visuals in product inserts is considerably enlarged. They're not Polly Pocket beds either, so don't go overboard...
- All textual information is left-aligned for better readability. That's done.
- I quickly present the percentage reduction (when it's there) with a real layout! It's a change from magazines.
- I introduce a hierarchy of information between typology, description, dimensions and product brand. I also play with colors and text formatting to better dissociate them.
- The "Free delivery is inserted wherever possible. An advantage like this, it would be a shame not to highlight it, I think.
- The bedding category banner takes precedence over the interior design promotional banner: let's stick to the main topic before digressing!
- The interior design banner has been completely redesigned: only the left-hand visual will be retained as an image. The rest of the banner (title, text, button) can now be designed in HTML and CSS.
"What about the mobile version?" What was I thinking... I'm failing in all my obligations. I may be in a bad way, but the end of the tunnel may not be far off! Zou, here it is:
How does email in Dark Mode work?
That's the advantage of variable system on Figma baby: you enter a variable in one "mode", and its declination in another mode. For example, for my color variable "RedI fill in a column "Light Mode the hexadecimal code specific to Darty red. Then, in a second column, aptly named "Dark ModeI indicate the hexadecimal code of the same red in dark mode: the Dark Mode Magic plugin on Figma will do just fine for this conversion!
All I have to do is turn my model into a component, then in a new page add an instance of this component and switch it to "Dark Mode in my variable collection. In just 1 minute, the job is done and the Dark Mode model generated. It's a beautiful technique. Please note, however, that the colors shown here do not reflect reality, since each mail client handles Dark Mode differently.
As you can see, I'd be as happy as a clam and as excited as a child in front of the Netflix logo if I were to accompany you on any of the following projects email design creationor design system email. And #Darty, if you're reading this spiel, know that we're here for you! No hard feelings!
