When first planning to turn our internal email platform into a standalone product, we knew that one of the main challenges both from a technology and UX perspective would be to design a world-class email template builder. First, we have identified the pain points for the marketers, then we have translated them into their actual needs and from this, we have designed solutions to improve the email design framework
Identify The Pain Points
While building Pepo Campaigns initial features — i.e. Lists and HTML Campaigns — we conducted in parallel several rounds of primary research with prospective clients to uncover their frustrations with the existing email template builders in the market.
The 5 main challenges that were identified can be summarized as follow:
- Email Marketers need to reduce the overall newsletter creation time;
- Email Marketers need to be independent of graphic designers in the creation of most of the email templates;
- Email Marketers need a certain type of flexibility which — directly quoting one of them — “is not Mailchimp flexibility, but real flexibility”;
- Email Marketers need better-templating technology to avoid the newsletters to break in different browsers/email client;
- Email Marketers need an environment where developers are not required to be involved in troubleshooting.
Translate The Email Marketers Needs
After the identification of the perceived pain points, our team at Pepo Campaigns translated them into two tangible and concrete action items.
The first topic concerns the email layout structure. When adding new content elements- e.g. Text, Images — in a structure with a diversified number of columns, the frustration can arise for two different reasons.
In one case, if the layout structure is not properly outlined the content boxes can fluctuate ending up in placements which are not the desired ones.
Fragmented layout structure with HTML code that is not 100% pre-clustered into safe blocks can produce unsafe output unable to ensure responsiveness as the layout may break in some browsers/email clients;
In the other case, like for Mailchimp, once you have chosen a layout structure upfront before entering the tool, there is no way to edit it. From their side, the approach to ease this constraint is to give more complex content elements — e.g. a double image, the image with the copy.
We did not consider this a good solution as it excludes several layout combinations that will not be possible to achieve.
The second topic concerns the styling. When you offer too many options to style the content elements, this will end up making the entire styling process too long and painful.
The user is more likely not to find right away what he needs, forcing him to scroll among infinite menus and endless values in drop-downs.
Improve The Framework
Starting from these constraints we have outlined a new framework to build templates in a quick and flexible way.
While most email marketing providers have only a layer of Content in their template builder, we have proposed a solution with a two layer approach based on Content and Containers.
The Containers are predefined Row elements which can be split into one or more columns. In these Containers then, the content elements can be easily dropped and stocked.
The “frame” of the layout is now outlined, preventing elements to fluctuate or being dropped in non-desired location preventing long adjustment times.
With this logic, the blocks of HTML code and their possible combinations are pre- defined, providing a more secure code less likely to break in different environments.
Pepo Campaigns Containers come in two different formats: the responsive ones for (one), two and three column, and the adjustable ones for two and three column and the adjustable ones.
The adjustable containers are not responsive and are based on fixed width, ensuring more flexibility in the column design when the objective is primarily a desktop oriented audience.
With regard to the styling topic, after consultation and after shortlisting the main styling requirement from every content element, the generally shared vision was to embrace a solution looking more at a “Medium-like” approach to the problem.
To evaluate options and values, the team has collected and reviewed the newsletter templates styles created over a time span of more than five years at Fab and Hem and has added other newsletters from brands we admire for doing advanced and compelling email marketing.
We have broken down the elements and the requirements in order to be able to achieve all those emails, simply, with few styling options.
If you love the design and email templates, try out Pepo Campaigns Template Builder and let us know how we can improve it more!