Rebuilding Quora's consumer email system

A photo of my Harley and I taken by my friend Katie.
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.
Quora's Daily Digest email.
Quora's Daily Digest email.
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:
  1. I wanted to incorporate a third party email framework
  2. 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
  3. Our email view-code was fairly bloated and pretty buggy
  4. 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
After comparing several third-party email frameworks, I pretty quickly decided on moving forward with MJML. I choose MJML because:
  1. They have a well constructed component system which was important given the modular nature of this project
  2. They have very well built-out linter, language, and preview support for Atom
  3. Their documentation was outstanding
Getting up and running with MJML was extremely straightforward. After installing their command line tools, I also installed their Atom packages and was off and running. Their Atom packages work in such a fashion as to immediately update a preview of your email every time you make a change, and the WYSIWYG nature of this style of development made iterating through early designs very fast.
Quora's new email design template as viewed in Atom using MJML packages.
Quora's new email design template as viewed in Atom using MJML packages.
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:
  1. Rendered with 80% less CSS
  2. Rendered in most cases with around 65% less HTML
  3. Inherited from builder rules that made it easier to maintain existing emails and harder to introduce visual discrepancies into new emails
I had a ton of fun working on this project. While I certainly won't be seeking out more email-centric projects anytime soon, it's always really rewarding to take a well defined problem and quickly execute toward a solution that you know is a measurable improvement.
A photo of my Harley and I taken by my friend Katie.