Case study 01 of 06

Bank of America

Regulated financial email leaves no room for error. Every offer carries its disclosures, every footnote has to be reachable, and every message has to hold up in Outlook, Gmail and Apple Mail on desktop and phone.

Client: Bank of America and Merrill
Industry: Banking / Financial Services
Discipline: Enterprise email development
Scope: Acquisition, servicing and lifecycle email
Related role: Email Developer, Tamman Inc.

Overview

This is the production archive from Bank of America's Enterprise Creative Solutions email work: Preferred Rewards lifestyle benefits, Merrill investing and outlook events, mortgages and home equity, auto loans, Business Advantage and Merchant Services, Workplace Benefits, and everyday banking and security. Every build runs on the bank's email framework: a 550px desktop layout, a 320px mobile layout, shared content blocks and per-link campaign tracking.

Most campaigns ship as several builds, not one. Tier, audience, offer and language each get their own version, up to twelve for a single job, and every version has to match its approved copy and disclosures exactly.

The craft is in what the reader never notices. Disclosures that are long but navigable, desktop and mobile artwork that swap cleanly, Outlook-specific code that keeps backgrounds and layout intact, and Spanish builds that are translated all the way down to the screen-reader labels.

Technical scope

Separate desktop and mobile artwork

Mastheads, offer graphics and dividers ship in 550px and 320px versions, swapped with hide and mobile-only classes and hidden from Outlook with conditional comments.

Outlook-specific code

VML rectangles keep header background images in Outlook for Windows, MSO line-height overrides keep type metrics stable, and Office XML settings fix image scaling at 96 DPI.

Accessible legal content

Superscript footnotes link down to their disclosures and back up again, with aria-labels on both ends. Layout tables are marked presentational, the message is wrapped in role=article, and a visually hidden heading introduces the disclosures.

Marketing Cloud integration

AMPscript variables populate campaign codes in every link, shared logos come from Content Builder blocks via ContentBlockByKey, and each link carries a unique tracking name.

Bilingual builds

Spanish versions set lang to es and translate copy, alt text, footnote labels and back-to-content links, not just the visible text.

Versioned builds

The HELOC email ships as versions A and B from one build. One leads with a special rate offer; the other leaves it out and points to the HELOC details instead.

Featured campaigns

Selected builds, grouped by line of business. Select any email to read it at full length, disclosures included.

Preferred Rewards lifestyle benefits

Preferred Rewards: travel experiences
Diamond-tier lifestyle benefits for travel: Canyon Ranch, CLEAR and Backroads offers in an editorial, image-led layout.
EMAIL-04-23-0430
Preferred Rewards: luxury vehicles
The same lifestyle-benefits system applied to vehicle offers from Mercedes-Benz, Audi and Volvo.
EMAIL-06-23-0209
Preferred Rewards: curated shopping
Exclusive discounts and gift ideas for Diamond tiers, completing the lifestyle-benefits series.
EMAIL-08-23-0195
Preferred Rewards: you qualify
Enrollment email, one of six versions built for different tiers and audiences.
EMAIL-02-24-0228

Investing with Merrill

Merrill Guided Investing offer
Animated cash-reward offer, three steps to open, and full offer terms with a reward-tier table.
EMAIL-03-24-0186
Looking toward a new era of growth
Invitation to the Chief Investment Office's 2024 outlook event.
EMAIL-12-23-0127
The American Buffalo
Editorial client email built around a single story.
EMAIL-09-23-0124

Home and auto lending

Homebuyer program, English
Community Affordable Loan Solution mortgage: down payment, zero lender closing costs and numbered disclosures.
EMAIL-04-24-0114
Homebuyer program, Spanish
The Spanish build, translated through to alt text, footnote labels and screen-reader text.
EMAIL-04-24-0114
HELOC renovation
Animated kitchen-renovation hero with a special rate offer; version B drops the offer.
EMAIL-06-24-0367
Auto loan rate reduction
Limited-time rate offer for auto loans, one of three versions, with rate disclosures.
EMAIL-12-23-0161

Security and everyday banking

How to help stay ahead of scammers
Fraud education in English, Spanish and a Business Advantage version.
EMAIL-08-23-0383
Merrill account security
Security Center animation, biometrics and contact-information steps.
EMAIL-05-24-0480
Boom! You've saved over $500!
Savings milestone email featuring Keep the Change, recurring transfers and BankAmeriDeals.
EMAIL-09-23-0298

Recognition

Bank of America email work for the Enterprise Creative Solutions team, recognized in the email categories of the Financial Communications Society’s Portfolio Awards. Two of the four winners are Preferred Rewards emails, the same program as the lifestyle-benefits series above.

1 Gold
1 Silver
2 Bronze

One build, two layouts

Each pair is the same HTML file at 550px and at 320px. Mastheads, offer art and modules swap at the breakpoint instead of shrinking. Scroll inside the phone to read the whole message.

Preferred Rewards: travel experiences
Preferred Rewards: luxury vehicles
Preferred Rewards: curated shopping
Merrill Guided Investing offer
Homebuyer program, English
HELOC renovation

An offer, and everything legal needs

Merrill Guided Investing offer, shown complete. Scroll alongside the notes, or open it in the viewer to zoom.

01
Brand header
Bank of America and Merrill lockup with separate desktop and mobile sizing.
02
Animated offer
A 470px animated GIF on desktop and a square 320px version on mobile, linked to the offer terms footnote.
03
Benefits and steps
Three benefits in a bordered panel and three steps to open an account, with footnote markers where claims need support.
04
Disclosures
Offer terms, a reward tier table, tax and rollover language and the investment products box, each footnote linked back to its marker.

Merrill Guided Investing offer

From the production HTML

Short excerpts from the shipped emails, with image paths and tracking values shortened.

Footnotes you can navigate

Every superscript is a link to its disclosure, and every disclosure links back. Screen readers announce both directions.

<!-- In the copy -->
set up recurring deposits<a href="#footnote_num2" name="footnote_num2b"
  aria-label="footnote 2"><strong>&#178;</strong></a>

<!-- In the disclosures -->
<a name="footnote_num2" aria-label="footnote 2"><strong>2</strong></a>
No investment plan is risk free, and a systematic investment plan
does not ensure profits or protect against losses.
<a href="#footnote_num2b" aria-label="back to content">&nbsp;</a>

Desktop and mobile artwork, Outlook-safe

Desktop gets the 550px masthead. Phones get a 320px crop. Outlook for Windows never sees the mobile block.

<img src="…/Masthead_DT_550x395_2x.jpg" width="550" height="395"
     alt="" class="hide" style="display:block; width:550px;">
<!--[if !mso]><!-->
<div class="mobile-only" style="display:none; overflow:hidden;
     font-size:0; line-height:0; max-height:0; max-width:0; width:0;">
  <img src="…/Masthead_m_320x230_2x.jpg" width="320" height="230" alt="">
</div>
<!--<![endif]-->

Background images in Outlook

Outlook for Windows ignores CSS backgrounds, so the header draws its background with VML and places the logo in a text box on top.

<td background="…/00000_550x76_BG_D.jpg"
    style="background:url(…/00000_550x76_BG_D.jpg) center/cover;">
  <!--[if gte mso 9]>
  <v:rect fill="true" stroke="false" style="width:550px; height:76px;">
  <v:fill color="#FFFFFF" opacity="0%"/>
  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  <![endif]-->
    <!-- logo table -->
  <!--[if gte mso 9]></v:textbox></v:rect><![endif]-->
</td>

Marketing Cloud, built in

Campaign variables resolve in every URL and the shared logo comes from a Content Builder block, so one change updates every email.

<a name="bofa_logo_H" target="_blank"
   href="https://www.bankofamerica.com/mortgage/?subCampCode=%%=v(@subcampaign_num)=%%
        &FlightNum=%%=v(@flight_num)=%%&cm_mmc=…-_-%%=v(@creative_code)=%%">
  %%= ContentBlockByKey("Logo_BofA") =%%
</a>

Translated to the last label

The Spanish build changes the document language and the accessibility labels along with the copy.

<html lang="es" xml:lang="es">
…
<a name="footnote_num1" aria-label="nota al pie 1">1</a>
…
<a href="#footnote_num1b" aria-label="volver al contenido">&nbsp;</a>

The whole archive

Every campaign, filed by line of business with its job number. Merge fields and bracketed placeholders are shown as built, before personalization.

Technical considerations

Compliance and disclosures

Offer terms, tables, tax language and FDIC boxes are part of the build, structured so they read clearly and survive every client.

Accessibility

Semantic headings, presentational tables, meaningful alt text and two-way footnote links make long legal content usable with a screen reader.

Cross-client compatibility

Fixed-width desktop and mobile layouts, VML for Outlook backgrounds, Apple data-detector resets and conditional comments keep rendering consistent.

Technologies and capabilities

Salesforce Marketing Cloud
AMPscript
Content Builder blocks
Responsive HTML/CSS
VML and MSO conditionals
Accessibility (ARIA)
Bilingual EN/ES
Versioned builds

Next case study

THREE Insurance

Transactional templates that follow a small-business policy from first quote through billing, renewal and cancellation, personalized with AMPscript in Salesforce Marketing Cloud.

Let’s build something exceptional.

Looking for someone who understands both the technology and the marketing behind great digital experiences? Let’s connect.

Email Me Connect on LinkedIn

emmanuelg.marquez@gmail.com

Overview

Technical scope

Separate desktop and mobile artwork

Outlook-specific code

Accessible legal content

Marketing Cloud integration

Bilingual builds

Versioned builds

Featured campaigns

Preferred Rewards lifestyle benefits

Preferred Rewards: travel experiences

Preferred Rewards: luxury vehicles

Preferred Rewards: curated shopping

Preferred Rewards: you qualify

Investing with Merrill

Merrill Guided Investing offer

Looking toward a new era of growth

The American Buffalo

Home and auto lending

Homebuyer program, English

Homebuyer program, Spanish

HELOC renovation

Auto loan rate reduction