Enter your search

What We Learned – Welcome Email Redesign

By

Welcome to GoSquared - redesigned emails

At GoSquared, we send out a lot of emails. Don’t worry – we don’t spam people, we simply have a lot of users who need a lot of important actions confirmed. One of the first and therefore most important actions a user can make on GoSquared is signing up in the first place.

We decided it was time to have a look at exactly which emails we were sending out – it’s an easy thing to overlook when running a business – emails fly out every minute to users, all controlled “under the hood” of your application, often with content that may have long since become neglected and outdated. Thankfully, we’ve now overhauled the emails we send out to new users.

Previously

Old Welcome Email - eurghhh

Heading to a Mailbox near you now

The screenshot below is of the email you’ll receive if you sign up as a new user to a premium plan on GoSquared. We want to make every new user welcome, so we’ve designed it to the same standards you’d expect from GoSquared, and provided all the information you could need to get off the ground with real-time analytics. There’s a simple 3 step process to help you install the GoSquared Tracking Code on your website, and easy links to your website’s stats on GoSquared, as well as useful links to get help and reach us on Twitter.

GoSquared Welcome Email

A Couple of things We Learned

Test. Test. TEST!

We spent about a day designing the original email, getting the right content in, and ensuring the layout was attractive and readable. We spent the next 2 days hacking it to look acceptable in all of the various email clients out there. To save time, ensure you’re using a testing environment like Litmus, otherwise you’re going to be sending a lot of emails to a lot of different clients.

Google Mail and Microsoft Outlook are evil

Carrying on from the last point – about 70% of the “hacking” time was spent trying to ensure these emails looked reasonable in Google Mail and Microsoft Outlook. Google Mail strips your emails of any inline stylesheets so you’re forced to apply CSS styles to individual elements. Outlook likes to ignore some of the most basic CSS properties.

Have a good idea of which CSS properties you’ll need

Once you’ve come up with your basic design, assess which parts are going to be the most troublesome. A great reference we found was Campaign Monitor’s Guide to CSS Support in Email Clients. Ignore this at your peril.

Don’t ignore Mobile devices

With email it’s sometimes easy to forget where it’ll be read. Many people use mobile devices such as iPhones and iPads as their primary email reading devices so it’s pivotal that your emails display as expected on such devices with smaller screen sizes. Thankfully, the iPhone, iPad, and many Android devices have email clients that render emails with the wonderful WebKit rendering engine. WebKit is, in our opinion the best rendering engine out there – if you’ve ever developed for the iPhone’s MobileSafari, Desktop Safari, or Google Chrome then you’ll feel right at home.

Delivery is Everything

It’s all good having a great looking set of emails to send out, but how do you know anyone’s actually receiving them? Before, we received a lot of support requests after new users had signed up saying that they never received an activation email. We don’t send activation emails any more, but we now have a very good idea of every email we send out, every email that’s received, every email that’s reported as spam, and every email that bounces back. How do we possess such magical powers? We’re using Postmark – for fast and reliable transactional email delivery. We highly recommend it.

Hope we’ve been helpful

Thanks for stopping by. If you have any other tips on designing HTML emails, or know of any other decent solutions for email testing and delivering then drop us a line in the comments!

Written by
James is CEO and one of the co-founders of GoSquared. He also likes to talk about design.

You May Also Like

Group 5 Created with Sketch. Group 11 Created with Sketch. CLOSE ICON Created with Sketch. icon-microphone Group 9 Created with Sketch. CLOSE ICON Created with Sketch. SEARCH ICON Created with Sketch. Group 4 Created with Sketch. Path Created with Sketch. Group 5 Created with Sketch.