Designing Bertolli’s Email Program

The Challenge

Bertolli recently had their website redesigned by helia, and requested new email templates to match the updated site. I took on the brainstorming, wireframing, and design of these templates.

Initially, the program will consist of a monthly send that directs users to Bertolli’s library of recipes and food how-tos, with an occasional promotion as needed. However, I wanted to create flexible modules that would allow Bertolli to use these templates for various types of content as their email program continues to grow.

To start the process, I needed to know more about the users on Bertolli’s email list to evaluate the types of content they would want to see, and in what format.

 

The Users

Bertolli identified their core user group as Millennial and older moms who like to experiment with classic recipes in order to elevate their meal experiences. This group is looking for healthier alternatives to traditional meal options, and are creative in other aspects of their lives. They plan out their trips to the grocery store, typically know which specific brands they want to buy, and search for grocery coupons before and during their grocery store trips.

 

The Content

Bertolli wanted to make use of content already available on their site for this first push of sends. Currently, they have large databases of recipes and how-tos, which both lend themselves to being pulled into emails as relevant secondary content. I imagined that hero content would mainly focus on new product releases or campaigns Bertolli runs throughout the year. I wanted to keep a good amount of image and text space in the hero areas in order to accommodate the possible content.

 

The Sketches

After learning more about Bertolli’s users and the goals of their email program, I sketched out potential modules and layouts on a whiteboard, to quickly iterate different ideas and ways of displaying content:

Set of sketches on whiteboard showing different hero layouts
Set of sketches on whiteboard showing different module layouts
Set of sketches on whiteboard showing coding options for hero space

Whiteboarding enabled me to work through how the content could be displayed to Bertolli’s users in the most appealing ways. Given the age and demographics of the user group, I assume that most are familiar with Pinterest and that format of saving and sharing recipes (and other content). Many of the module designs I worked through are inspired by Pinterest’s tactic of displaying multiple images with teaser content, that will then link to a page with more detailed information.

Because these are templates that need to have some longevity, I designed out different variations on each module, so that Bertolli has flexibility with different ways to display content. Some modules incorporate room for longer text descriptions, while others are more space-conscious, for example. If they add new content types in the future, they should be able to work well in these modules.

 

The Wireframes

After a great whiteboarding session, it was time to streamline the module options and create digital wireframes. I used Sketch to create all of the hero and secondary modules, then mocked up sample emails to show how the modules would work together.

Wireframe showing single hero image
Wireframe showing 2 main messages
Wireframe showing another option for 2 main messages
Coupon module showing "add to wallet" functionality

At this stage, I simplified all of the different modules into 3 main templates:

  • A single-message hero space with a single column of secondary content. The stacked approach to the secondary content allows for the text to grow as needed, if some items have longer descriptions. This template also features a header variation, in the event that Bertolli wants to brand this series
  • A hero area with space for 2 modules, in order to show multiple new products, or to explain a campaign with multiple components to it. This template features side by side secondary content that alternates down the page, drawing the user in to the email
  • A second option of a hero space with 2 modules to give some options, depending on the content. The secondary module on this page features a very Pinterest-inspired design with two content items sitting side by side

The Design

Once all the internal stakeholders signed off on these wireframes, I designed out each template to present to the client.

Bertolli Template 1 design
Bertolli Template 2 design
Bertolli Template 2 design

I added multiple content sections to the final templates in order to illustrate how we can mix and match the different modules in order to build a cohesive email. Nearly all of the text in these templates is live text, so that content can be dynamically pulled into the email to increase customization based on customer segments or other parameters.