Email Builder
Email outreach is hard, particularly when your audience is college students. We crafted a new paradigm for the “why” and “how” behind internal email communication and built a custom system to support the freshly minted workflow.
The Challenge
McIntire students are busy, focused, and engaged. They have big goals, big brains, and big schedules, so it comes as no surprise that as a group they were rarely opening, much less reading, mass email communications from school staff.
This reality, while not abnormal, was fundamentally problematic for the team – most of these mass emails contained really important information about programming and resources designed to help students thrive personally, academically, and civicly; things that existed solely to help them get the most out of their time at McIntire. And some of them were about leftover bagels in the study room just begging to be eaten...
After several focus group sessions, some data analysis, and many long, pensive walks on the beach, we concluded that this lackluster email engagement was likely attributed to two things: the volume of emails going out and the type of content in those emails.
We needed to create a system that would encourage coordination with and among departments, facilitate customized content for individual audience types, and streamline the email creation process for staff. For bonus points: the system would also pull in content from a range of external data sources.
System Design
Creating consistency, reusability, and customizability
Working backward, the end goal was a series of weekly digest emails. Whether geared toward career opportunities or student support and engagement, the content in those digests would be directly applicable to the recipient group and would offer a high-level snapshot of the need-to-knows and action items for the week. To execute this in a way that was efficient, consistent, and scalable, we built the management interface within the existing school portal (a React frontend) and wired it up to a document database (MongoDB). Nearly all of the content – upwards of 95% – is retrieved from external systems by way of a flexible, built-in query builder.
React
MongoDB
Node.js
Express
Jest
TravisCI
Vercel
EC2System Feature
Composable section blocks
To remove the guesswork, each email section corresponds to a single encapsulated component that fetches data from a discrete source and serves it up with all the necessary markup.Once a block is selected, the author can then define any custom freehand input, choose from the available layout styles, and select the options that structure the data query. Straightforward, flexible, and foolproof – an elusive trifecta in the world of html email, but we were able to bring it home.
System Feature
Robust versioning and dynamic content
The dynamic nature of all of the content being pulled in was both a slick feature and a technical challenge. Users needed the ability to save a version of the email exactly as it was at that moment in time, but the template needed to constantly reflect the most up to date content. To accommodate this, we split the functionality into two parts: templates and campaigns. Templates are the structural basis for campaigns, while campaigns represent the actual email message (not dissimilar to commercial email builders.) When an email campaign is generated, an exact replica of the HTML markup for the parent template is stored in the database as a string, thus allowing authors to generate as many campaigns from a single template as needed and then review them side by side. When an email is ready to deploy, it’s either downloaded as an eml file or an html file, or pushed directly to Mailchimp. This design guards against unexpected changes in content during the approval process AND allows users to leverage the same template week after week.
UI Elements
Designed for scanning
On the visual side, the emails are utilitarian and scannable - intentionally lean and clean, with very few images, bold headlines, and healthy whitespace. This ensures a consistent look that is insulated from the aesthetic preferences of the email author. We’re still waiting on the full data collection, but we think the numbers will validate our assertion that this minimalistic design is actually the end-user preference.
UI Elements
Simplified content management
The management interface is designed for clarity and discoverability, with robust search and filtering, clear descriptions, and big, bold buttons guiding you to the next step. Plus, support for in-browser commenting to foster collaboration and quick review and approval cycles.
Related Projects
