How we created an email design builder and stopped suffering

Image from unsplash.com

Here in the TemplateMonster R&D Department, we faced a few problems with our marketing emails:

  1. The design of letters looked inconsistent which I believe was caused by the long company life and the lack of visual guidelines.
  2. They had no mobile version.
  3. Every time the marketing department needed a new promo-email, we were distracted from our current tasks.

After a new TemplateMonster style guide release we wanted to rebuild the emails according to the style guide. But that would solve only the first problem from the list, mentioned above and it was necessary to solve the others as well. That’s how we decided to create an email design builder. It was supposed to help the marketing department create new emails much faster without substantial help from our side. Therefore we could work more with the product and spend less time on marketing stuff.

So here is the process step by step ↓

Step 1. Inventory of actual emails

We previewed over 70 emails and came up with the list of necessary building blocks. For instance: title, button, list, quote, promo-code, article from blog, video, counter, etc. This process was quite painstaking. It was important not to create similar blocks. The less building blocks in the list the better.

Step 2. Designing the building blocks

So we’ve got the list with all necessary blocks. Before designing every block, we created the letter container and spacings.

Spacings

We chose next spacings from TemplateMonster style guide: 20px, 40px, 80px. These spacings were supposed to be placed between email building blocks. Color coding helps to identify them quickly during the work process.

Spacings between building blocks

Letter container

A foundation of every letter includes container, overall info, logotype, footer, and email settings.

Web letter container with inside 40px spacings

Since we wanted our letters look great on smartphones too, the container for mobile was designed as well.

Mobile letter container with inside spacings

Letter blocks

So we took our list of necessary building blocks and carefully designed each block according to TemplateMonster style guide. We already had inside spacings in letter container and that’s why each letter block was build without inside spacings. Some of the blocks are shown below.

Title
Button
Products grid

Of course, the mobile version of each building block was designed as well.

Step 3. Writing a documentation

It was critical to create the documentation for front-end developers and marketers so that the developers understand how to code the builder and the marketers could get the main principles of using it.

The most important principles from the documentation:

  1. The content (text, illustrations, icons, photos, images) in every block can be edited.
  2. The style of every element of every block (spacings, sizes, colors, composition) should remain the same.
  3. All future illustrations and icons should be designed in pre-defined style using only the color palette from the style guide.
  4. All graphic elements, photos, and images should be ready for Retina screens.

Step 4. Testing the builder

After the front-end department developed every block from the design builder, we finally could start testing it. For testing we chose Litmus. This tool has a simulation of different mail clients and different web/mobile devices. It helped to test efficiently and saved production time.

Image from the Litmus website

By the way, for delivering our feedback we used Conjure. It’s easy in use and has all necessary features for sharing feedback to developers.

Conclusion

After a few feedback iterations we finally presented the letter design builder to our marketing department. Truth be told, creating it took a lot of time. But I’m pretty sure it will save tons of productive hours in future!


PS: This is my first article on Medium. I really hope you found it interesting and useful.

Feel free to ask questions if any.

If you enjoyed this article, please let me know 💚