This past month, I took on a project at Quora as a part of a week-long internal hackathon to redesign, rewrite, and re-architect forty of our consumer facing emails.
Despite now leading Quora's ad design team and spending most of my time working on projects that drive revenue, I've always really valued the fact that hackathons allow me to work on lots of different parts of Quora with colleagues I otherwise might not get the chance to collaborate with.
While I already wrote a higher-level overview of this project, I additionally wanted to dive a little deeper into the tools and frameworks I used to help drive the project forward.
One of the first decisions I made before the project even kicked-off was that it was going to be worthwhile to completely rewrite our email templates rather than try to build atop what was already there. I decided this largely because:
Once I had a base template I was comfortable with, I took the raw HTML that MJML generated and migrated it to work with Quora's own internal HTML rendering framework, Webnode. From there, it was easy to begin testing the emails with production data and I simultaneously relied on testing with Litmus to ensure that the templates themselves had good support across disparate platforms and email clients.
In addition to boosting user engagement, the new emails we launched also:
Despite now leading Quora's ad design team and spending most of my time working on projects that drive revenue, I've always really valued the fact that hackathons allow me to work on lots of different parts of Quora with colleagues I otherwise might not get the chance to collaborate with.
While I already wrote a higher-level overview of this project, I additionally wanted to dive a little deeper into the tools and frameworks I used to help drive the project forward.
One of the first decisions I made before the project even kicked-off was that it was going to be worthwhile to completely rewrite our email templates rather than try to build atop what was already there. I decided this largely because:
- I wanted to incorporate a third party email framework
- Quora's emails had in some cases been built almost a decade ago and email client rendering had changed enough during that time where it made sense to rethink earlier assumptions
- Our email view-code was fairly bloated and pretty buggy
- I wanted our emails to take a mobile first approach, whereas many of our existing emails had been built for desktop clients, in some cases exclusively
- They have a well constructed component system which was important given the modular nature of this project
- They have very well built-out linter, language, and preview support for Atom
- Their documentation was outstanding
Once I had a base template I was comfortable with, I took the raw HTML that MJML generated and migrated it to work with Quora's own internal HTML rendering framework, Webnode. From there, it was easy to begin testing the emails with production data and I simultaneously relied on testing with Litmus to ensure that the templates themselves had good support across disparate platforms and email clients.
In addition to boosting user engagement, the new emails we launched also:
- Rendered with 80% less CSS
- Rendered in most cases with around 65% less HTML
- Inherited from builder rules that made it easier to maintain existing emails and harder to introduce visual discrepancies into new emails