Select Page

Bonus material: Email design review

Design

As with most of these emails, the header is clean, with only the logo floating up there. BUT, what makes this email is the white space and simplicity of the design. It’s fun and cartoonish, and invites you down to view more. The heading is bold, but vague enough to pull you in.

Due to the height of the hero image, the CTA is pushed down a little far, but it’s a sacrifice worth having, as the heading, the image and the text are all relevant and make the email what it is.

The CTA is large, which works, but i feel the copy ‘CHECK THEM OUT’ requires you to read the copy above to understand what the ‘THEM’ is in reference to. I would prefer to see something that stands alone, like ‘UNLOCK SLEEP SOUNDS’ which is what the CTA is actually designed to do. Don’t over complicate things, if your intention is to get them to buy something, just say ‘BUY NOW’. be obvious, be direct.

The mid section looks ok, but I would personally forfeit that and close the email there, although they do provide a second CTA, in case you missed the first one.

On brand

The Headspace website is as fun and cartoonish as the email, so the style of design is consistent throughout. The brand colours, fonts and CTA styles are also the same, so they get a thumbs up emoji for that one. 👍

Mobile view

I prefer the mobile version of the email. The mid section somehow works better in a single column, perhaps because the rest of the email is super simple, and somehow it seems at odds with that.

The email is actually so much better on mobile compared to desktop, it could be that the designers created the email with mobile readers as the majority, which is no big shock as Headspace is an app.

Layout

A simple structure, not too many tables within tables, but it doesn’t need much more. The email focuses on what it needs you to see (the headline, the image and the CTA) and mostly hides the rest (no header links, small footer text).

Images turned off

OMG, shut the front door… What’s going on? The headline was an image… So was the middle section!

The email without imagery really loses its structure and design, but hey, if it’s Outlook that is affected by this, I doubt they care.

It’s still a shocker that the headline and middle section aren’t coded up sections, it seems like an attack of ‘fancy design first, email accessibility second’.

Now, i hear all 2 of you asking… So if the middle section was an image, how come it was mobile responsive, how did they do that? We use this a lot, they use image swapping technique in the code, which says ‘if the screen is this size, show this’. It’s great they considered both desktop and mobile, but guys… Come on, get coding!

Subject line

The use of subject line and headline work really well together, and make the transition from reading the subject line and opening the email to reading the headline a smooth journey. The message is clear and doesn’t confuse you or make you re-read it to make sense of it, so a big thumbs up! 👍

Ref: https://reallygoodemails.com/emails/dont-lose-sleep-over-a-good-nights-rest/