Project Background

Primo Water is a national water distribution service that owns and operates several local spring water brands across the country. I was brought on to rework the entire suite of transactional emails to unify the look and feel based on new brand guidelines. I pitched creating a modular design system that would allow us to work quickly and efficiently to scale the solution across the dozens of necessary emails.

Primary Objectives

Unify the look and feel of every asset across the email program
Create a simple guideline system that allows designers to piece together emails from a set of flexible modules
Create development guidelines that ensure emails deliver the expected experience across email clients and devices
Ensure all modules work in light and dark mode, and meet all ADA compliance standards

Grids and Spacing

The first task was to establish a basic grid and minimum display sizes for design and development. This helps ensure that padding and margins are always consistent across assets and takes the guesswork out of development. I chose to base my grid off of 12px increments to make elements divisible by 2, 3, and 4.

Text Components

Many elements for transactional emails are comprised of dynamic text. These elements require additional attention to detail to ensure that the display text looks good in the context of image based text in other parts of the email. We used a similar set of default display fonts to ensure compatibility with the designed elements.

Grid Components

A key part of this project was ensuring a uniform display of products. I created a number of flexible display elements that could be purely image based, or include dynamic descriptions and pricing info.

Graphic Elements

I also created a number of hero image and banner guidelines to give future designers clear guidance for these elements.

Design Assets

In addition to flexible design and development components, I provided some predesigned graphic elements. These banners and graphics can be added from a library of reusable elements to quickly add content and funnels to an email. These simple kinds of additions are the easiest way to increase engagement and improve the customer experience.