import { Image } from ‘astro:assets’; import spreadImg from ’../../assets/work/drizly/email-spread.jpg’; import projectImg from ’../../assets/work/drizly/device-mockup-project.png’; import cincoImg from ’../../assets/work/drizly/email-drizly-CincoDeMayo-v1.jpg’;
Standardizing Visual Language
We had been coding emails for Drizly for several months. I designed a monthly calendar email and regularly built and designed HTML emails with the help of my partner Rachel Sorkin.
To help them lower costs and streamline the email design process, we proposed a component-based design system and application to build, store, and generate the HTML.
Building the Solution
There were a lot of commonalities in the emails we built. Rachel and I consolidated their emails into a library of a dozen or so reusable templates.
I coded and tested the components before integrating them with our system. I then designed and built a UI for:
- Arranging templates via drag-and-drop
- Populating content with a visual editor
- Real-time preview rendering
- HTML export for Litmus testing and ExactTarget deployment
Example Output
Impact
The email builder significantly reduced the time and cost of producing marketing emails while ensuring brand consistency across all campaigns. Marketing teams could quickly assemble emails from tested, approved components without needing developer involvement for routine campaigns.