Email template system case study

Wells Fargo emails customers across onboarding, deposits, lending and cards.

I worked on turning a scattered set of one-off emails into a single, modular template system researching how customers read email, wireframing the structure, testing it with users and coding the final templates in HTML/CSS.

Campaign emails were designed and coded one at a time. Over the years that produced a patchwork of layouts, type and button styles for every product line, along with a slow, error-prone production process.

I broke every audited email down into the same stack of interchangeable modules. Wireframes defined the order, hierarchy and how each module collapses from a 600px desktop layout to a single 375px column.

Every module is built on the same variables and text styles, so a single change updates all 30+ components and every template.

Heroes, column layouts, banners, CTAs, offers, stats, content blocks and footers are all auto-layout components with desktop and mobile variants.

• 5HeroesBrand bar, image, headline and primary action
• 4Column layoutsOne to four columns that stack on phones
• 10Banners & CTAsPrimary and outline buttons, tip banners, offer codes
• 5Content & mediaText blocks, lists, image and video rows
• 6Offers & statsRates, bonuses and large-number callouts
• 8Headers & footersPre-headers, legal footnotes, links and disclosures

Each template is built entirely from library modules. Scroll inside a frame to read the full email.

Welcome & onboarding Deposits made easy Overdraft tools Business loan offer

Mobile first: the same templates at 375px

I ran moderated usability sessions on desktop and mobile prototypes, asking participants to find the main offer, take the primary action and explain the terms. What we learned shaped the system’s rules:

<!-- Two-column row that stacks on mobile -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td class="stack" width="50%" valign="top">
      <h2 style="margin:0;font:600 20px/1.25
          'Helvetica Neue',Helvetica,Arial,sans-serif;
          color:#C7081A;">1 application, 2 possibilities</h2>
    </td>
  </tr>
</table>

<!-- Bulletproof button -->
<a href="#" class="btn" style="display:inline-block;
   padding:12px 24px;border-radius:5px;
   background:#C7081A;color:#FFFFFF;
   font:500 14px/1 'Helvetica Neue',Arial,sans-serif;
   text-decoration:none;">Apply Now</a>

@media (max-width:480px){
  .stack{display:block!important;width:100%!important;}
  .btn{display:block!important;text-align:center;}
}