This is a series of emails that I designed and developed.
At Incentive Solutions, we send thousands of emails weekly to the participants of our clients' incentive programs. When a client begins a new promotion that allows their salespeople to redeem double points for selling a specific line of products, we send an email. When a new quiz has been uploaded on the incentive portal, we send an email. When participants forget to redeem their points before they expire, we send an email.
Each of these emails has to have custom branding to match not just the clients' brands, but the branding of their rewards site as well.
I was able to completely update the email templates that were in use and replace them with 10 responsive HTML emails that are compatible with all major email service providers.
Just so you can get an idea… this is what the emails used to look like.
But now, emails are able to look like this… (Press play to see it in action)
Beyond just developing new templates, I had to make the templates useful for the Account Managers at Incentive Solutions, too. Simply making email templates wasn’t going to help anyone if they couldn’t be customized, so I developed and trained the Account Management staff on a new process for documenting my HTML. Don’t worry: the Account Managers all know basic HTML and CSS already.
I implemented a commenting system that allows all of the Account Managers to use a Find feature in their browser to easily locate where all the CSS controlling the design of the email was located. I also provided instructions in each line of commenting on exactly what they were able to change.
In addition to the commenting in the HTML and CSS of the email, I created a diagram that illustrated where changes could be made in each individual email template.
Overall, I think the templates have become very usable. Because of the content management system we use at Incentive Solutions, we don’t have the luxury of a drag-and-drop email builder. Instead, we have a WYSIWYG that works in tune with each of these email templates wonderfully.
Above you’ll see the long-winded intro that I pasted into each email template I built. It gives a brief description of how someone could change the email template to their liking.
Below is an example of the CHANGETHIS method I implemented. It’s not nearly as easy as a drag and drop system, nor as pretty as a WYSIWYG, but if only measured by their continued success, I’d have to say these templates have earned a 10 out of 10. I rarely get questions about how to fix something or change a color in an email anymore, which makes my days a little smoother.
Next, you can see the diagram I put together showing exactly what can and can’t be changed in each email template. The labels correspond to the comments in each email. For example, if you search for “FONT:A1” in the HTML of the email, you’ll be automatically brought to every place you must change the font-family in order to change the font of the email body.
And here's a few more examples of the email templates I provided. Out of the 10, there's a few that are redundant but necessary for the different emails our clients send out. For example, there's three emails that include one text block, one call to action button, and one hero image, but the order of those three objects is switched around amongst the three! It gives clients a little more customizability and a lot more control over what types of communications they send.
My expertise in web-based design goes beyond just simple HTML emails. In fact, I’ve got a fair amount of experience designing for different platforms, including mobile apps. Click next to see just what I mean…