Email Templating

Designing for email has never been a graceful process, although for communication it remains as valuable as ever. There is a lowest common denominator to formatting email (text-only mode) and the compatibility of different clients has given new meaning to trial and error. Several companies have been founded around solving these problems, but it hasn't stopped others from solving it themselves, and learning many lessons along the way.

This project looks at an email templating and A/B testing tool my former employer developed for clients on our community platform. The process first began by taking inventory of the existing email formats that would be included in the builder.

Token Text

Many forms of personalized text were included in templates, whether it be a user's name or custom link - creating a user friendly way to insert tokens into templates was a top priority. The second was offering degrees of formatting for plain, rich, and open text. This would allow to something like a plain http link versus a clickable rounded button.

Toggling Templates

Each email was configured with a layout template, message template, and previewer. Each message template consisted of blocks (e.g. header, image, post, call to action) and conditionals for groups and language. Our system both generated and delivered the email, therefore we were able to provide advanced tracking of opens/clicks along with deep linking into our native applications.

A/B/C Design

I designed the manager application and email templates along with developing HTML markup generated by each template. Using the component architecture outlined above, we were able to swap different features into email templates while tracking conversions from one version to the next. Below shows different component options for a digest email template along with the supporting demo markup.

Manager Metrics

Split testing didn't end with members, it also extended into manager reporting as well. In order to embed charts in email, I fed charting data through a javascript library (phantom.js) where a screenshot of the chart could be used when sending the email. While there were certainly limits in how far we could take automated reports, our templating system allowed us to focus on the content and purpose of messages without letting the format slow us down.