Home Page
View All Projects
1
Define
2
Ideate
3
Build

Email Workflow

Overview

When: July, 2019

Length: 1 week

Role: Primary designer

Team: Just myself

Task: Create a design tool that would automate and enable the creation of dynamic HTML partials for new Vacasa email designs 

1

Define

Around the time I was hired at Vacasa they had just finished production on an in-house notification system. This system allowed for the use of dynamic HTML partials and Handlebars templates in constructing emails.

‍

However, Vacasa's current email templates were out of date and full of static, bulky HTML. We needed a way for developers to create semantic HTML partials that could be converted to email-ready HTML. As well, we wanted this templating tool to support Handlebars data object injection.

‍

With these goals in mind, I set out to create a workflow that would improve the email development and accommodate the dynamic emails that I was designing (link to the case study on the emails design).

2

Ideate

While exploring solutions for this email workflow I came across plenty of HTML templating tools that took in semantic HTML and export email-ready HTML. The majority of these templating tools were either no longer supported or lacked the ability for me to add Handlebars support. The most extensible of these templating tools at the time was HEML.

3

Build

With HEML I was able to create a GulpJS workflow that combined a CSS Minifier, HEML, Handlebars, and an HTML minifier. This workflow solved the desire to build semantic HTML partials using Handlebars data object injection.

‍

The Github for the project was later forked and is still used and maintained by current Vacasa developers.