Responsive email design

Creating modern and accessible emails from design to development.

Email hero

Email marketing is up to 40 times more effective than social media, according to a study by McKinsey & Company[1]. The same study also shows that the buying process happens 3 times faster than in social media. Statistically, there are indicators that show the growing potential of email marketing.

The problem

The RateSetter investor email programme had many problems. It had been constructed quickly as a short-term solution for communicating with customers and required modernising. The emails lacked many of the best practice principles for design and code, were content-heavy, didn’t have a clear visual hierarchy and the directional cues were not easy to identify. There were no responsive behaviours or dynamic personalisation, meaning customers would have a very poor experience reading their emails from a mobile device. The engagement and click-through rates were very low as a result.

How I approached the challenge

I needed to start from scratch with the design of the emails and hand-code a responsive template. It would need to be adaptable for multiple types of content and feature branding that was consistent with the RateSetter website.

Email wireframes

It was important to build HTML templates that displayed correctly on all email platforms and devices. The most popular platforms such as Outlook proved to be very problematic as Microsoft Word is used to render the HTML. This causes the formatting to be rendered differently from other email clients like Gmail or Apple Mail. Therefore, when approaching this project, I knew that simplicity was the key to ensuring a positive experience of the content regardless of platform or device.

Doing things differently

Before beginning the redesign, I researched how people interact with emails, how colour choices affect user behaviour, what the optimal typography sizes for legibility was, and how to increase accessibility across a diverse customer base. I created a modular design template with plenty of white space, identifiable subheads and a balanced mix of images and text. Fundamentally, the email had to be scannable and visually appealing.

Once the design was approved I began a QA process to iron-out issues with the code. By using an online platform I was able to preview the email design across multiple platforms and devices. If I discovered any errors I could edit the code within the test environment which making the QA process quick and efficient.

Email QA

What didn’t work?

My team wanted to use a CMS to construct and distribute emails to specific mailing lists. However we quickly discovered problems with the platform because it wasn’t flexible enough for the types of email we were producing. Our emails often included bespoke content that required new lines of CSS in the head section. The CMS didn’t allow changes to the master CSS once set up so I coded bespoke emails when required.

What we accomplished

Having the ability to A/B test emails was invaluable as I gained a greater insight into customer behaviours. My team and I found that the assumption of using hero images to increase customer engagement wasn’t necessary for some email types. We tested the effect preheaders and animations had on open and click-through rates. The way customers engaged with the emails varied depending on its purpose - marketing, finance statement, news etc. This meant a range of HTML templates was required for specific communication types and flexibility of design.

Over time, we were able to increase the open rates of our emails and encourage particular behaviours. We launched campaigns for customers to refer friends, targeted customers who hadn’t finished setting up an account, those who had an account but were yet to invest and investors who hadn’t reinvested their returns. Our most significant responses came from our ISA campaign emails, where the open rates were over double the usual amount.

Email design

[1] https://digitalagencynetwork.com/email-marketing-still-effective-strategy/