After it became apparent that there was an obvious gap in our email quality, both in design and in production, there was a dire need for training, standards and materials to be set so that both the design team and email production team could more easily execute on our email campaign material. It was typical for an email design to take as much as three days to produce and test, and this time frame was simply no longer acceptable.
After having discussions with members of the design team, the email service team, and creative services leaders, I began working towards my solution.
The issues we needed to solve for were:
The design team needed a way to work with production:
- Nobody had any documentation to follow for fonts, image sizes, or executional considerations
- Members of the team who weren’t familiar with email coding had no templates or library to use in order to build designs that would follow a common system
- After a design was completed and approved, the designers didn’t know how to hand the assets off to a project manager, or the email production team
Production needed a way to get emails designed and built:
- They needed designers to get involved, as they were building emails that had no visual or executional consistency.
- They needed ready-to-go responsive code that was easy to use. They wasted too much time on testing broken emails because code errors were simply propagated by reusing old, broken emails.
- They needed to be able to receive workable designs from the design team that were consistent, and reproducible quickly
The solution:
After talking to both the design team, the production team, and creative leaders, it appeared a solution needed three parts:
- Documentation outlining the basic visual standards, quality standards, code structure, and process for handing off designs to the production team
- A single InDesign module library, and graphics templates so that the design team could easily replicate consistent visual designs to pass on to the email production team.
- A simple, reusable code base that would enable the email team to replicate the designs easily and quickly
I created a base reusable “frame”, consisting of all the CSS styles, a pre-header, header, and footer along with our standard CAN-SPAM information pre-filled with our Email Service Platform variables.
To make the final templates, all the modules were cut into individual HTML snippets along with SASS-compiled CSS which was all assembled with grunt tasks. This was done to ensure that I could change basic style settings in one place, to affect the change across all templates at once.
The result:
Along with the improved documented process, design templates, and easily-reusable code modules, a test-perfect email could be created in as little as 30 minutes, as opposed to several days.
