Email Template and Campaign Layout Redesign
Every campaign email was rebuilt from scratch, looked different from the last, and broke on mobile — where most subscribers read. Sends were slow and inconsistent.
Industry
Newsletter-driven small business (digital products and services)
Role
Systems consultant — email template design, HTML/CSS build, documentation
Impact
Campaign production dropped from a half-day of fiddly rebuilding to assembling tested blocks in well under an hour, with emails that render properly on mobile.
01 - Problem
The problem
Every send started from a blank canvas. Someone copied an old campaign, stripped it, and rebuilt the layout by hand — so spacing, fonts, and button styles drifted with each send. Worse, layouts were approved on desktop, but most of the list opened on mobile, where columns collapsed, images blew out the width, and CTAs were hard to tap. Each campaign cost half a day and still looked broken to most readers.
The real issue wasn't taste, it was missing structure: no shared template, no defined hierarchy, no test step before sending. Before automating anything in their marketing stack, the email layer needed a fixed set of building blocks the team could trust — so production no longer depended on whoever assembled that week's send.
02 - System Flow
How the system moves
Campaign planned
team defines goal and content
Sections selected
modular block library
Content dropped in
Mailchimp / Beehiiv editor
Mobile render verified
pre-tested HTML/CSS sections
Pre-send checklist run
test send to seed inboxes
Campaign ships consistent
same look on every device
03 - Build
What I built
Modular section library
Instead of one rigid master template, I built a small set of reusable sections — header, hero, single-story block, two-item feature row, CTA band, and footer — in clean HTML/CSS email markup. Each was tested on major mobile and desktop clients before entering the library, so the team stacks blocks that already render correctly. The hierarchy is baked in: one headline, one primary CTA, consistent spacing and type scale.
Implementation in Mailchimp and Beehiiv
The team ran promotional campaigns from Mailchimp and a newsletter from Beehiiv, so I implemented the same section system in both — saved template blocks in Mailchimp, a matching layout in Beehiiv — so the brand looks identical whichever tool sends. Colors, buttons, and footer details live in the templates instead of being re-typed, removing a whole category of copy-paste errors. It also sets up marketing automation later, since consistent templates make automated sequences safe to switch on.
Usage guide and pre-send checklist
I wrote a short, plain-language guide: which sections fit which campaign, image size rules, and how to duplicate the template instead of editing the master. The pre-send checklist covers test send to seed inboxes, checking on a real phone, confirming preheader and alt text, and clicking every link. The point is handover — the system works the same whether I'm involved or not, and a new team member can ship their first campaign unassisted.
04 - Impact
Business impact
Campaign production dropped from roughly half a day of manual rebuilding to assembling pre-tested blocks in well under an hour — most of it now content review, not layout work.
Emails render properly on mobile, where most of the list reads: buttons are tappable, images scale, and the layout no longer collapses into one broken column.
Every send looks like the same brand, because spacing, type, and button styles are locked into the templates instead of rebuilt by hand.
The team owns the system: with the usage guide and checklist, anyone can build and QA a campaign without touching code or waiting on a designer.
05 - Edge Cases
What had to be handled
Dark mode inverting colors unpredictably — I tested every section in dark mode and chose background and text combinations that stay readable when clients remap them.
Image-blocking inboxes — every image has meaningful alt text and the layout reads as text-only, so a blocked hero never hides the message or CTA.
Long newsletters clipped by Gmail — the guide sets a practical length limit and puts the primary CTA high so it survives clipping.
Older desktop clients ignoring modern CSS — sections use table-based markup with fallbacks, so the layout degrades to a clean single column instead of breaking.
06 - Improvements
What I would improve next
Connect the templates to a reporting dashboard that pulls open and click data from both Mailchimp and Beehiiv into one view, so the team compares section-level performance instead of checking two tools.
Add automated welcome and re-engagement sequences on the same section library, now that the template layer is stable enough for workflow automation.
Run a quarterly template review — Gmail and Outlook change rendering over time, and a tested library is only trustworthy if someone re-tests it.
Related capabilities