Creating a fresh, new email template and asset library for a plant-based food company to match their evolving brand.
CHALLENGE
A plant-based food brand was in need of rejuvenating their B2B/B2C email templates with fresh designs that align with their new branding. They needed distinct templates for various email types targeted at both customers and partners. Additionally, they needed to build upon their asset library with designs that seamlessly integrate with their new brand guidelines.
A plant-based food brand was in need of rejuvenating their B2B/B2C email templates with fresh designs that align with their new branding. They needed distinct templates for various email types targeted at both customers and partners. Additionally, they needed to build upon their asset library with designs that seamlessly integrate with their new brand guidelines.
SOLUTION
In response, we collaborated closely with the client and their team to formulate a comprehensive plan and strategy. As part of this endeavor, we are crafting four fresh B2B/B2C email templates in their HubSpot portal to replace their existing layouts, starting with the design and development of the News Blast template. To ensure consistency with the client's evolving brand guidelines, we also created an asset library that encompasses custom typeface treatments, icons, and illustrations.
In response, we collaborated closely with the client and their team to formulate a comprehensive plan and strategy. As part of this endeavor, we are crafting four fresh B2B/B2C email templates in their HubSpot portal to replace their existing layouts, starting with the design and development of the News Blast template. To ensure consistency with the client's evolving brand guidelines, we also created an asset library that encompasses custom typeface treatments, icons, and illustrations.
Typefaces & Treatments
Helvetica is a sans serif typeface used throughout the email templates (with the exception of Tungsten Semibold in the navigation). We established hierarchy by assigning each headline, body, and button style a text size, weight, and color.
We created a handwritten typeface to complement Helvetica, the clients’ email default font. This would be used in labels that signify new sections or to highlight important callouts.
Since handwriting is unique, we created four versions of each character for variety.
Created in Adobe Illustrator, all letters, numbers, and symbols are vectorized and fully editable. They are then brought into Figma where they are manually put together to form words or phrases, recolored, and resized specifically for emails. They are to be uploaded to each email as a PNG file.
Since handwriting is unique, we created four versions of each character for variety.
Created in Adobe Illustrator, all letters, numbers, and symbols are vectorized and fully editable. They are then brought into Figma where they are manually put together to form words or phrases, recolored, and resized specifically for emails. They are to be uploaded to each email as a PNG file.
To ensure that each label is desktop and mobile responsive, they are resized in Figma before exporting. We set up a template for the client when creating new labels with recommended dimensions and guidelines to ensure consistency across all emails.
Iconography & Illustrations
Iconography is used to describe functions and features in a visual way. They also help break up text to keep the user engaged. We created a handful of icons that can be used throughout each template.
Created in Adobe Illustrator, all icons are vectorized and fully editable. They are then brought into Figma where they are resized specifically for emails. They are to be uploaded to each email as a PNG file.
We created fun illustrations to add a bit of pizazz to the emails. Similar to the icons, they also help break up text to keep the user engaged.
Created in Adobe Illustrator, all illustrations are vectorized and fully editable. They are then brought into Figma where they are recolored and resized specifically for emails. They are to be uploaded to each email as a PNG file.
News Blast Email Template
DESIGN ITERATIONS
We worked through many iterations of the News Blast email template with the client to ensure that they were the right fit for their company.
The News Blast email template is used for product releases, spotlights, announcements, and updates. We built the template with a variety of modules to fit all different kinds of content.
Based on the performance of prior emails, we found that a good amount of users viewed them on their phones. That’s why we kept mobile in mind when designing. We want to ensure that these emails look fantastic, no matter what device they’re shown on.
CUSTOM MODULES
We developed 13 custom modules which are now part of the clients’ module library and can be used across all emails.
We also created two versions of the header section for content layout flexibility: one with the headline before the image and one with the headline after the image.
SHORTENED EMAILS
To prevent the emails from being clipped*, we developed 7 additional shortened templates of version A (version B can also be used) to show how long each email can be with certain modules.
*Clipping results in stripped styling, which causes the email layout/design to be distorted. It also affects open rates (does not count unless you click on “View Entire Message”).
SAVED TEMPLATES
All News Blast email templates, full and shortened, are saved as templates in HubSpot.
DRAG-AND-DROP MODULES
The News Blast email template is built with drag-and-drop modules which allows users to easily create and edit their emails directly in HubSpot.
