American Family Insurance logo

American Family Insurance × RAPP · Email design system

ONE KIT.
EVERY EMAIL.

Role: UX/UI Designer + Art Director

The brief

American Family Insurance (AFI) came to RAPP in need of a design system they could use internally to create quick emails that are easy on the eye and appealing to consumers.

Email built from the kitEmail built from the kitEmail built from the kitEmail built from the kitEmail built from the kit

34+ MODULES. ONE VOICE.

Heroes, copy, icons and imagery across white, gray and blue, so a new email starts from approved parts.

BUILD ONE YOURSELF

Pick from the real modules. The right roof drops in between sections, and the system’s guidelines check every combination.

HEROES

11

Text, CTA and roof; split image and text, with or without the roof and CTA; headline and body in white, gray or blue, with or without a CTA.

Module M12
M12
Module M14
M14
Module M15
M15
Module M16
M16
Module M17
M17
Module M98
M98
Module M99
M99
Module M100
M100
Module M101
M101
Module M102
M102
Module M103
M103

COPY

3

White body with CTA; white headline and body; white headline, body and CTA.

Module M21
M21
Module M24
M24
Module M27
M27

ICON COLUMNS

9

Blue 2-column and gray 3-column layouts, with circle or floating icons and optional CTAs.

Module M31
M31
Module M36
M36
Module M39
M39
Module M42
M42
Module M91
M91
Module M57
M57
Module M59
M59
Module M62
M62
Module M65
M65

IMAGE COLUMNS

2

White 2-column and 3-column image and copy.

Module M45
M45
Module M51
M51

ONE ROOF, NINE WAYS

The roofline from the logo became the connective tissue. A divider exists for every move between white, gray and blue.

From / toWHITEGRAYBLUE
WHITEWhite to White roof dividerM89White to Gray roof dividerM69White to Blue roof dividerM68
GRAYGray to White roof dividerM67Gray to Gray roof dividerM90Gray to Blue roof dividerM85
BLUEBlue to White roof dividerM87Blue to Gray roof dividerM86Blue to Blue roof dividerM88

FROM KIT TO INBOX

The same parts, assembled into starter templates, then into real auto and renters campaigns.

Starter templates

Starter template 1Starter template 2Starter template 3Starter template 4

Real campaigns

AUTOSaving is easy when you switch
Auto email: Saving is easy when you switch
RENTERSProtect your favorite things under our roof
Renters email: Protect your favorite things under our roof
RENTERSFind the perfect fit under our roof
Renters email: Find the perfect fit under our roof

RULES THAT TRAVEL

AFI’s team would be building these emails themselves, so the guidelines had to do the art directing.

1

Only use a colored background header above a white background or full-bleed hero image.

2

A partner logo should not exceed 286 pixels in width and 104 pixels in height.

3

Only use a right-aligned logo when the hero has the roofline at the top.

AT A GLANCE

34+

modules in this set

9+

roof dividers

3

background colors

3

real campaign emails shown

Next project

AMERICAN DREAMS 2.0