The story behind Cordial’s new drag-and-drop email builder

We’re proud to announce the release of our new, native built drag-and-drop email template editor, Sculpt.

Sculpt is a best in class customizable drag-and-drop message creation tool that allows marketers to build branded, personalized messages with unlimited flexibility, all without writing a single line of code.

Here is a quick 2 minute video:

My name is Chris McGreal. As the product owner at Cordial, I want to share some of the reasons we built Sculpt, the thinking behind our decisions, and then take a deeper dive into how it works and what value it creates for our customers.

Starting with the problems to be solved

I’ve been in the email space a long time, and time and time again I see marketers struggling with the same pervasive issues. When we set out to build Sculpt, we started with these problems first. The question was simple: “How do we solve them?”

Building email code is hard to scale

Crafting a custom HTML email requires a functional knowledge of HTML, CSS and responsive design. On top of that, as any seasoned email designer or coder will agree, the multitude of coding workarounds and hacks needed for consistent rendering across email clients and mobile devices is dizzying.  This practice is hard to scale because it’s difficult to find design contributors who understand the nuance of email code.

Hand coding is error prone

Hand-coding an email is error prone and requires an excessive amount of QA testing and iteration.

Brand governance is challenging

When you have multiple people or teams building emails, it’s easy for brand guidelines to be misinterpreted or ignored.

Template based systems are usually rigid

Most drag-and-drop editors offer systematic layouts and content wrappers that are mostly customizable, sort of…

Taking a “buy” decision off the table

As the product owner, I am often asked the question, “Why did you guys decide to build Sculpt versus license an open source editor?” This is a great question with a fairly nuanced answer.

There are a few compelling 3rd party drag and drop editors. Some are able to be licensed (like BeeFree.io) and would be fairly easy and quick to “integrate” into the app. The ultimate problem with this approach is that we wouldn’t have access to, or control over, the underlying code.

At Cordial, we see content creation as a core aspect of the marketing workflow. We want to own and control our own roadmap for this cornerstone aspect of our platform. More importantly, we want to be able to fully leverage our personalization and optimization engine, a goal that would be impossible with a 3rd party tool that we, ultimately, would not fully control.

We put the marketer, and their customers, at the center of everything we do. Sculpt maintains the basic tenants of the typical drag-and-drop experience but offers infinite flexibility allowing marketers and developers to completely reimagine the campaign creation process.

Guiding Principles

Below are the guiding principles that helped us navigate the twists and turns of the development process. They are the pillars of Sculpt, which we believe will solve some of the problems that brands have been experiencing for decades.

Put marketers first

Lower the technical barriers to campaign production, making rich personalization and optimization more accessible to the non-technical marketer.

Time is money

Make it easy and fast to publish messages while removing challenges associated with testing and code quality.  Many marketers are challenged with time constraints especially in peak seasons for a given vertical. By decreasing production and testing time, we free up time for marketers to be creative, strategic and drive more revenue.

BYOM!  

Bring your own markup. Sculpt is flexible & customizable for any brand.

Blocks and variables over templates

Boil presentation elements down to their most atomic level and allow the creative marketer to mix and match blocks in an infinite number of combinations. Do NOT force a marketer to shoehorn content into a rigid “template”.

Make it awesome!

Support Experiments (Cordial’s optimization engine) and dynamic personalized contextual content (Cordial’s personalization engine).

What makes the Sculpt architecture awesome?

We started with the premise that two personas would contribute to the overall workflow: developers and non-technical marketers. Email designers and coders, don’t worry, you are still valuable contributors! We’ll refer to designers and coders as the developer persona moving forward.

Sculpt does not eliminate the value of the developer persona, rather, it pulls the developer out of the daily grind of constructing email markup, campaign by campaign. Sculpt allows the developer to focus on building more strategic, object-oriented, modules of reusable content.  We refer to these modules as “blocks.”  Blocks are the centerpiece of our drag-and-drop experience for the marketer.

How it works

Here is a quick illustration of how the developer persona is able to custom-build, not only the email presentation, but the entire user experience for the marketer. We’ll use a custom “sale item” block for a brief demo.

Here’s a quick video of a marketer setting up sale items in a custom sale items block.

And here’s a quick video of the developer configuring a field which allows the marketer to control the “call-to-action text” that is printed on a button.

The block builder gives the developer full control over the markup of any given block with any number of variables. The block builder also allows the developer to custom-design the experience for the marketer by specifying values that can be editable. This is done by simply creating a form field, specifying the label, and choosing which type of field should be presented.

It’s that simple!

Once the developer has customized the experience, they can access all of the data variables that can be placed into their custom markup.

Achieving brand control through flexibility

Because Sculpt is so flexible, your company can decide how much, or how little control to give the marketer over the actual visual presentation (fonts, colors, spacing, logos/branding).  We’ve even seen our beta users roll up multiple brand-acceptable “themes” and allow the marketer to choose one with a single click from a dropdown menu!

Sculpt also allows your company to continue using the assets that you’ve most likely made a big investment in over time. This investment comes in the form of days and weeks of design, render testing or conversion/optimization testing.  With Sculpt you don’t need to ditch your existing assets.  Bring them along and “Sculptify” them!

Scaling better UX across all campaign production

Remember, the developer (email coder/designer) only has to build a block once and publish it for use with all templates or a specific template.  From that point forward, the marketer has a simple drag-and-drop experience using that block across all campaigns.  You can BYOM! (bring your own markup), or use any of Cordial’s boilerplate starter blocks and templates.

Sculpt works in conjunction with Cordial’s existing HTML content snippet solution (re-usable sections of code that may be referenced globally across multiple campaigns (headers, footers etc.).  It also works in concert with Cordial’s programmatic adaptive personalization and optimization solutions (Cordial Experiments).

The sky’s the limit

We’re so thrilled to finally be able to share all of our hard work with you. Building a drag-and-drop email builder from scratch was no easy task, but we firmly believe it was the right decision. Because we wrote every line of code, we have complete control over the features and functionality, meaning we can quickly and easily respond to feedback, requests, and ideas. We have so much more planned for Sculpt and can’t wait to share new updates with you soon!