GUIDE | Designing for Email: Product Alerts

This document is an example only and has been made available here as a reference. It’s possible some links to images or external resources might not work correctly. Any comments or activity from others will also be missing.


Every week, we manually send out one or two product alert emails that aim to put useful credit products in front of a broad segment of customers. For every email, copy is written that aims to educate our customers as to why the credit product is being advertised now and, crucially, why the customer might benefit from having it. Accompanied by a newly created hero image, fresh subject-line and the latest offer details, this ensures that every email sent is unique, up-to-date, and feels authored.

In 2018, these emails generated approximately £1.2mil revenue for TM. A single email can make upwards of £40k—£50k (sub-prime). 


Getting Started

Who this guide is for

While this guide is primarily being written with a focus on design, it will also provide a useful backbone of knowledge and set of best-practice recommendations for anyone involved in the production and assembly of product alert emails across the business.

What you’ll learn from this guide

  • Tools/access/resources needed
  • Technical specs for images
  • Creative recommendations for creating hero images
  • How to create a new product alert email in Blueshift (step by step)

What you’ll need to have setup in advance

Depending on the job at hand, you’ll need to be able to access at least one or all of the following tools and services/resources:
Where to find it
Blueshift is the SaaS app we use to manage and send emails, adhoc and triggered.
If you don’t have access, Laura Lucas can provide it.
TotallyMoney.HTMLEmail (Github Repo)
Github repository where we version control and store locally developed templates (that are migrated manually in to Blueshift when ready).

(Includes installation README)
TM Email Stylekit (Sketch library)
A sketch library to be used to rapidly mockup new email creatives based upon our current ecosystem of components/content blocks.
Can be found here on dropbox in:

/02 Resources/Libraries/

Learn more about Sketch Libraries here
Earlier hero image files
Library of sketch files with artwork from previous jobs
Can be found here on dropbox in:

/01 Job Tasks/Product Alert Emails/
Jobs are tracked in the Copy + Design Workspace
Copy + Design Kanban board can be found here

Anatomy of a typical product alert email

Before diving in to best practices and how-to information, it’s worth taking a look at a typical product alert email in order to define terms and familiarise.  The following represents a quick overview of the core components/content blocks that make up a product alert email. See the mouseover comments for details.