Phase 1: Designing and building the modules
Being limited in our Stensul plan to ten modules (plus dividers) presented a challenge that forced strategic thinking about what options and elements could be combined and toggled to give the design team as much flexibility as possible without overwhelming the project managers when they were doing the initial build.
Module layouts in Figma prior to coding in Stensul
Stensul Single Column Hero Module with optional elements
The 2 Column 30-70 Module with optional elements
Phase 2: Improving workflow and approval process
We created a new approval workflow within Stensul to centralize the design and content communications into one place versus having disparate comments spread across Google docs, Slack and Asana. This streamlined the process and significantly reduced the chance of errors at the operations stage.
Phase 3: Animation and personalization
With the modules and workflows in place, the last part of the project was to polish the emails with animation and personalization. The following is an example of a direct email promotion offering a Nike gift card in exchange for a demo. I 3d modeled the image and reduced the frame count of the gif to keep the email file size low, avoiding spam filters and deliverability issues.
Integrated Marketo tokens into the Stensul code enabled the operations team to import the email and apply personalization and segmentation seamlessly.
