Modular email design is on the rise.
Just like a classic Ikea wardrobe system, this type of design is efficient, flexible, and user friendly.
Spoiler: According to Chad S. White, Head of Research at Oracle Marketing Consulting and author of Email Marketing Rules, it can speed up email production by 25% to 40%.
That’s a big win. Especially, when you consider the following:
- Based on data from mid-market and enterprise companies, a single email requires on average 27 hours of work.
- According to Litmus’ State of Email Workflow’s report, most email teams spend two or more weeks producing an email.
- Time is money — at this rate, a basic email costs approximately $1,600+ to produce.
If you do the math, that means modular design could save your team up to 10.8 hours of work, accelerate production by 5.6 days, and reduce costs by $640.
Not bad, right? We’ll dig into all the benefits of going modular in a sec. (Yup, there’s more to it than speed and $$$.)
But first, let’s take a look at the bigger picture — why email is a struggle for so many marketers, and how modular design can help.
The ABCs: Why Most Email Marketers Can’t Execute on More Than Basic Personalization
There’s a gap in the email marketing landscape. A rather large one.
Maybe you’ve noticed it yourself.
You hear about how advanced personalization and interactivity can boost engagement five-fold. But how often do you experience it? How often do you actually get an email that uses these techniques?
Not often. The reason is simple: Email is really hard to get right. Even the basic kind.
It also happens to be super important. The cost of a broken email is sky-high. For some businesses, that can mean millions of dollars.
As a result, email marketers are hyper-focused on getting the basics right. And the room (and energy, and time!) for experimentation is thin.
The big three challenges they’re focused on are:
A) Responsiveness (the mobile kind)
Emails need to be responsive and mobile-friendly. Full stop.
Most sources agree over half of all email opens happen on mobile. And 62% of people will delete or ignore an email that’s hard to read on their phone.
Yet email responsiveness continues to be a challenge for marketers.
With traditional HTML email design, every small tweak needs testing. New design elements require custom code. And a brand new campaign? That may need to be coded from scratch.
Not to mention, troubleshooting. Oh, the troubleshooting. (Background images not working in Outlook, VML buttons linking to the wrong URL, Gmail on Android just ignored all my styling?! And the list goes on.)
All of the above takes engineering resources.
It also takes autonomy away from marketers. They’re dependent on other teams for execution. At the end of the day, this limits what they can accomplish.
B) Content (the right kind)
Just getting the right content into emails is a challenge.
You may be thinking, “Wait a sec… that should be the simple part, right?”
In theory, yes. In practice, email creation and collaboration often happen in multiple places. This introduces room for error.
Here’s a (simplified version) of what that might look like:
- Copywriter drafts content in a Google Doc.
- Designer creates email mockup in Figma.
- Developer codes email in Salesforce.
- Marketer sets up campaign and sends around a test email.
- Stakeholders weigh in over email, Slack, Figma, Google Docs… ouff.
At any of these stages, an off-brand element can be introduced, feedback missed, or an old version referenced. With so many platforms and communication channels, it’s bound to happen at some point.
So marketers spend a lot of time and energy making sure:
- The right stakeholders weigh in.
- The right changes are made.
- The right, on-brand content makes it to the final email.
And of course, they need to strategize and come up with content in the first place. But often, when implementation is time-consuming, strategy takes a back seat.
C) Personalization (the basic kind)
After all that… if a marketer has any time left over… they might do some personalization.
Maybe, they’ll add a first name field to the subject line.
If they have a lot of time or the right tools to help, they might even segment their email list by user behavior, and personalize key messages based on that behavior.
But it’s a rare day when that happens. As we’ve seen, time is a luxury in short supply for most email teams.
How Modular Email Design Can Help Marketers Go Beyond the ABCs
Okay, so how can modular design help?
For starters, by solving for these three big challenges.
But before we dig into the ‘how’, we need to understand the ‘what’…
What is modular email design?
Modular email design involves dividing emails into independent parts — AKA ‘modules’. These modules can be reused to create new email templates, without starting from scratch.
And each module can be customized depending on the use case.
For instance, you can change the copy on a CTA button to ‘Read now’ for an educational newsletter versus ‘Buy now’ for a promotional one. Swap out the hero image and title text, and voilà! You’ve got a whole new email without any complicated code changes. This also means, you can easily rearrange modules to create brand new templates.
“Once you’ve created your email modules, you can swap them around to be in any order. No more being stuck to one template with the same beats: Header, Hero, Title, Text, Image Text, Footer. You can rearrange your emails constantly to keep your subscribers engaged.”
— Aileen O’Brien, Email Developer and Services Lead at Dyspatch
Here’s an example of a basic modular email template, broken down:
Pretty simple, right?
Pretty powerful too. Modular design empowers teams to create emails faster by eliminating the need for day-to-day coding.
It also helps keep your emails on-brand. By reusing approved modules across email templates, you’ll ensure everyone sticks to brand guidelines. (More on the importance of branding a little later on.)
This is where a modular email design system comes into play.
“Modular email design is basically a box of email lego blocks that comes with clear instructions. They can be assembled together to build an endless number of email templates with reusable sections. Simple as that.”
— Matthew Smith, Co-founder of Really Good Emails
What is a modular email design system?
A modular email design system is an interactive tool or suite of tools that enables — you guessed it! — modular email design.
Let’s unpack that a bit…
Having modules, and being able to easily use modules, are two different things. If all your modules are living in code, and your brand guidelines in Google docs, you’re still not going to be able to move very fast.
That’s why you need a system. One that allows your team to easily deploy modular email design. And that brings all your modules and brand guidelines into a centralized, collaborative platform — like Dyspatch.
The Dyspatch email builder allows you to manage all your email modules (and accompanying brand rules!), in one place. It brings them out of source code and into a user-friendly, drag and drop visual editor. So you can create new templates and rearrange email modules to your heart’s content.
“HTML email templates are all well and good, if you’re just duplicating them and changing the content. But if you want to rearrange the elements in the main template, things get a little stickier. Then, you wish you had modular email design because (insert Ned Stark meme here): One does not simply rearrange email HTML.”
— Aileen O’Brien, Email Developer and Services Lead at Dyspatch
What Problems Can a Modular Email Design System Solve for Your Team?
Now that we have the ‘what’ down, let’s dig into the ‘how’…
How does modular email design solve for the ABCs? And what other problems can it solve for your team?
Top 9 Benefits of a Modular Email Design System
1. Speed
Ten minutes. According to Dyspatch customer data, that’s how long it takes to build an email template when you have a modular design system in place. And that includes testing the template, too. For context, that’s about the length of time it takes to make a decent sandwich.
With modular design, your team doesn’t have to build emails from scratch anymore. Or write custom code every time someone wants to make a change.
Pre-approved, pre-coded modules do the heavy lifting for them. By reusing these modules across templates, they can move fast, without sacrificing quality or worrying about responsiveness. (I’ll cover this one in a sec.)
“The No. 1 advantage of modular email architecture is production speed. Our clients who implement it reduce email production time by 25% to 40%. In the current environment — where business disruptions seem routine, consumer attitudes change quickly, and marketing teams are lean — this extra nimbleness is an incredibly valuable asset.”
— Chad S. White, Head of Research at Oracle Marketing Consulting and author of Email Marketing Rules
2. Autonomy
With a no-code modular system, marketing teams get their autonomy back. And engineering teams get their time back. Building templates is quick and easy — regardless of technical skill level. Enough said.
“Teams are able to scale down — no need to have every player, on every email, all the time — because the bulk of the work has already been accomplished. And now the marketing team can move modules around and adjust them themselves because design and development are already wrapped up. Design and dev can then be addressed quarterly with changes or updates.”
— Matthew Smith, Co-founder of Really Good Emails
3. Responsiveness
Email modules are pre-coded. Part of this initial setup should include testing for responsiveness. That means, when you use a module — any module — you can rest easy knowing it’s responsive and mobile-friendly.
This also contributes to a speedy creation process. Your team will save themselves time (and headaches) on pesky troubleshooting.
Pro-tip: Dyspatch’s modular email design system guarantees responsiveness. All email modules make use of the Dyspatch Markup Language (DML) — a condensed, unbreakable version of HTML that’s responsive by default. So even if you customize modules or want to experiment with building your own, the results will scale well on any device.
4. Flexibility
A modular system trumps templates any day. It’s true, templates can help your team move fast too. But they also limit creativity. With a static template, your team has to… well, work within the template.
With email modules, there’s a lot more flexibility. Your team can mix and match modules to create brand new templates. And the best modular design systems (ahem, Dyspatch) make it easy to customize modules to suit your needs…
5. Brand consistency
…while always staying on-brand.
The key here is to choose a modular design system with guardrails. Guardrails lock elements that shouldn’t be changed. Think logos, brand colors, or legal copy in a footer.
This makes your modules ‘change-proof’. That is, if your team customizes a module, they won’t accidentally make a change that doesn’t reflect your brand standards… or edit a crucial piece of legal copy.
Pro-tip: Dyspatch comes with built-in guardrails and permission levels. Permissions, so you can control who can make changes and approve templates. Guardrails, so every email you send adheres to brand standards — a key benefit when you consider consistent branding can increase revenue by 33%.
6. Engagement
Have you seen a dip in email engagement recently?
Many brands have. The inbox is as competitive as Michael Jordan circa 1992. (If that reference doesn’t resonate, let’s just say it’s REALLY competitive.)
Modular design can help with this in a few ways. First off, it’s fast. That means, your team can spend more time making your emails standout. One of the ways to do this is with dynamic and interactive email content.
Dynamic content refers to any element that changes based on the reader. Personalization falls under this umbrella. And with the time your team saves, they can do more than basic personalization.
What’s more, modular design lends itself perfectly to advanced personalization, where modules are swapped out based on individual profiles or past purchases.
“Near-term, the benefits of modular email architecture include faster production cycles, lower maintenance costs, simpler A/B testing, and easier personalization. In the future, we’ll really throw the door wide open on that last one — personalization. By having modular templates, marketers will be ready for a future where AI increasingly makes decisions about which content modules an individual subscriber will receive, as well as the content in them.”
— Chad S. White, Head of Research at Oracle Marketing Consulting and author of Email Marketing Rules
And as we know, personalization can have a big impact on engagement. (Campaign monitor reports a whopping 760% increase in revenue for personalized campaigns!)
On to interactive content. Basically, anything your subscribers can click on, swipe, watch… that qualifies as interactive content. And when you can interact with something, it’s inherently engaging.
So it’s no surprise 60% of people say they’re likely to engage with an interactive email.
Here’s a creative example from Penguin Random House:
This email combines three of my favorite things: books, emojis, and games. Basically, it’s impossible to resist. And I’d bet good money their target audience felt the same.
Again, when your email team isn’t as pressed for time, they can implement more interactivity. Whether that’s adding a game, gif, audio player, or embedding an AMP email form, the results may surprise you. The pleasant, 5x more engagement kind of surprise.
Not familiar with AMP for Email? With this innovative tech, your subscribers can take action, right from the inbox. Check out our white paper for ‘Everything You Need to Know About AMP for Email’.
7. Scalability
Modular design is scalable by nature.
It’s a popular system for this very reason. Buildings, machines, furniture — there are examples of modular design everywhere.
The application may change, but the core concept stays the same: A system characterized by reusable modules that make it easy to build and rebuild, quickly. This system is especially effective when it comes to email.
It solves for speed. And depending what platform you use, it can help you manage templates at (truly) any scale.
Pro-tip: But how to manage these email modules, you ask? With Dyspatch, all your modules are organized into themes and blocks. Think of each theme as it’s own email design system. Say, you’re refreshing your branding. With this system, you can make a change in one place, and it’ll apply across all modules. And you can easily add modules to templates, browse previous ones, or duplicate top-performers.
8. Localizations
Modules are perfect for email template localization.
Again, it’s all about reusability. Your team can pull localized modules into new templates, and reuse them over and over. No need to pay for the same translation twice.
This setup also makes it more economical to make changes. Instead of sending a whole email for translation again, you can send a single module.
Pro-tip: Email localization is one of Dyspatch’s super powers. It streamlines the entire process. You can create and manage all your localized templates, right in the platform. And standardized POT and PO files automate manual processes and ensure your localizations meet quality standards.
9. Innovation
Innovating is what being a marketer is all about.
But as we’ve seen, most email teams are stretched thin. Which makes it hard to find the time or energy to try more advanced techniques.
Yet we’ve also seen, modular design solves the problems that bog email teams down. It has the power to give marketers their time back. Time better spent strategizing, experimenting, and ultimately, building a better email program.
Who Can Benefit From a Modular Email Design System?
In a word, everyone.
In an easily digestible bullet point list:
- Marketers. Especially those who aren’t able to get regular support from developers, or who aren’t experienced coders themselves. (Raising my own hand.)
- Marketing leaders. When your team thrives, the company thrives. And so do you. Plus, modular design makes quality assurance and approvals a whole lot easier.
- CRM managers. If building a cost effective, scalable email program is on your list of to-dos, it’s time to modularize.
- All contributors. That includes content creators, product managers, engineers, and stakeholders from teams like legal and UX. Modular design makes email accessible to all these roles and more.
Teams can reap so many benefits from using modular design. By using tried and true content blocks, complicated, time-consuming layouts become easy peasy. They also remove a major barrier to email development — familiarity with html is necessary, but someone who isn’t the strongest coder, or only has web experience, can still execute an immaculate email campaign.
— Roselyn Adams, Retention Production Manager at Common Thread Collective
How to Implement a Modular Email Design System
Are you in? Excellent.
Implementing a modular email design system does take an initial investment in time and resources. But it’s well worth it in the long run. Especially for teams that need to send a large volume and variety of emails.
Planning is key. Before building a single module, you need to think about the overall look you want to achieve. And that all starts with firm brand guidelines…
1. Establish your brand guidelines
First thing’s first, get your brand down pat.
If you have a brand style guide already, this step should be easy. For those who don’t, it’s a great opportunity to build a strong foundation for growing your brand.
Here’s an article from our friends at Canva to help you get started: ‘How to Create a Visual Style Guide for Your Brand’.
Even if you have established guidelines, it’s worth revisiting them at this stage. Ask yourself:
- Are these guidelines up to date?
- Are they comprehensive?
- Is there anything we want to change?
- Is there anything we want to add?
- How will these guidelines translate to email?
2. Audit your email templates
The next step is to do an audit of your existing email templates.
First, categorize your templates. Broadly speaking, they may be:
- Transactional
- Promotional
- Educational
Once you’ve categorized your templates, it’ll be easier to identify repetitive ones. Then, you can narrow down which templates to focus on modularizing.
The templates you use most often — and that contain elements you reuse across campaigns — should make it to the top of your list.
Got ‘em? Great. Now for the fun part.
Take your final selection of templates and cut them up! Not literally. Just, decide how each template can be divided into modules.
To give you some ideas, common email modules include:
- A header
- A hero section
- Images and carousels
- Headlines and subheads
- Body text
- CTA buttons
- Spacers
- Signatures
- A footer
3. Modularize!
This step will be a little bit different for everyone.
If you’re creating a modular email design system in-house, your designer can mock up your email modules in a platform like Photoshop or Figma. Then, a developer can code each module based on the mockups. At this stage, testing for responsiveness is crucial. Put each module to the test to set yourself up for long-term success.
“Make sure your content blocks are dependable. Nothing is worse than implementing content blocks only to later realize there’s one tag out of place or Outlook is being, well, Outlook. Make sure all of the modules have been put through the ringer and are dependable.”
— Roselyn Adams, Retention Production Manager at Common Thread Collective
If you’re using a modular email design platform like Dyspatch, we can do this for you. Our team of email experts can also help with step one and handle step two. Every Dyspatch customer gets a custom modular email design system — and ongoing design support, on demand.
4. Optimize and experiment
Once your system is all set up, you’ll want to test and optimize your new templates.
Another benefit of modular design? As White touched on a little earlier, it makes A/B testing a breeze. You can easily swap out modules to measure performance. Simply, add a tracking tag to your links, and you’ll be able to see which modules get more clicks.
For example, you could test button colour by using a module with a blue CTA in one template and a green one in another. Fun!
As for experimenting, a platform like Dyspatch gives you access to a library of pre-coded, interactive modules. So you can try adding engaging elements into your templates, like live carousels, dynamic lists, or even, a product review form subscribers can complete right from the inbox.
Like this one:
An Example of Modular Email Design in Action
As the old saying goes, actions speak louder than words.
So let’s have a look at modularity in action…
Here’s an excellent example of a modular email template from Grover:
Why it’s excellent:
- The design is clean, eye-catching, and will scale well on any screen.
- The CTA button modules are clear and invite immediate action.
- The branding is consistent and distinctive.
- The benefits are clearly stated and make good use of reusable modules.
- The offer features a dynamically generated code for security.
- The footer gives the option to visit social platforms or download the app.
- The legal copy is locked in.
You can see how all the modules work together to form a cohesive whole. And how it would be really easy to create a new template by recombining these modules.
As for results, Grover, a Dyspatch customer, sped up email creation by 92% when they implemented a modular design system.
Beyond the benefits of going modular, Dyspatch helped streamline their email localizations and approval workflows. So it’s true, modular design can’t take all the credit! But it did solve for Grover’s biggest pain point: broken emails.
Here’s what Grover has to say:
“We don’t have to worry about the template breaking. Dyspatch solves our problems and helps us achieve higher ROI because we can reduce spend on engineering resources.”
— Karan Gupta, Head of Retention at Grover
Modular Email Design Is Here to Stay
From toy makers to architects, the benefits of modular design have long been known: speed, sustainability, and scalability.
In other words, benefits that translate beautifully to email.
So it’s no surprise more and more marketers are making the switch. The alternative is to stick with an often painfully slow email creation process. One that involves coding templates from scratch and regular troubleshooting.
Not to mention, leaves little time or energy for innovation.
Sound familiar? Then, it’s time to make a change. Book a demo to see how Dyspatch’s modular design system can transform your email program today.
Modular Email Design FAQ
Q: How flexible is a modular email design system?
A: Modular email design is flexible by nature. Unlike static templates, you can mix and match modules to create brand new configurations. With a platform like Dyspatch, customizing modules and building new ones is also easy and accessible.
Q: Are modular email templates responsive?
A: The short answer is yes. The longer answer is, if you’re building a modular system in-house, you’ll need to test all your modules for responsiveness before using them. But if you’re using Dyspatch, all your modules will be responsive by default. No troubleshooting required.
Q: Is modular email design mostly for transactional emails?
A: Nope. Modular design works beautifully for both transactional and marketing emails. Think of it this way: If you’re sending any type of email regularly, modular design can help. You can move fast, whether you’re sharing a flash sale or just sending a webinar reminder. This type of design can also create cohesiveness between your transactional and marketing emails.
Q: Can I put personalized, dynamic content in modules?
A: Yes, depending what platform you use to build your emails, this should be relatively straightforward. I’ll use Dyspatch as an example here. DML, the code underlying our modular design system, is also a templating language. That means, you can add loops and variables, like first or last name into an email. And when it comes time to send, Dyspatch exports your templates into whatever language your email service provider (ESP) uses. Easy peasy.
Q: Who can change email modules?
A: Depending what platform you use, anyone on your team with basic HTML knowledge should be able to change email modules. If you’re using Dyspatch, the same logic applies, as DML is simply a condensed version of HTML that’s easy to pick up in a couple hours. But with Dyspatch, you also have the option of setting permissions. This can help with internal quality control. It can also be useful in certain cases, like if you’re using an agency, and you don’t want them making direct changes to modules.
