Visual Content Editor

The Problem

Marketers wanting to create e-mail campaigns in our marketing platform had to choose: either bring your own HTML, or use one of our pre-built templates with practically zero control over its underlying code.

So in one hand, you could craft your fully custom e-mail — but only if you knew your HTML. In the other, you were able to replace text and pictures in our rigid templates — but you couldn't do advanced customizations, like changing the layout, or adding entirely new sections.

We wanted to find the sweet spot between these two extremes, and provide a friendly visual editor with a flexible, expandable template system: so you can build your template with your own code, then easily replace content in it in your browser — have your cake, and eat it too.

Our Solution

The templates for the new Emarsys Visual Content Editor contains content blocks — chunks of HTML code that can be inserted, removed, re-ordered in your e-mail's layout. These content blocks can be headers, footers, announcements, hero images, and product grids.
We provide some built-in content blocks for you, but you can also build your own using your own code — making this template system incredibly flexible and easy to customize.

Once you have a template with all the blocks you need, you can start building your e-mail campaigns.
By default, the blocks have dummy text and images — but these can be easily overwritten with your actual content right in the browser using VCE's live editor. Easy-peasy!

Of course, you can personalize these e-mails with real data — greet your audience by their names, display the shop nearest to them, and show products which are most relevant to them individually.

Key Features

  1. Direct manipulation: your content blocks can be added, removed, rearranged and customized in your e-mail campaign.
  2. Give your e-mail campaign some smarts: combine recipient data, product data, and your own content with conditional statements, so the e-mail your customer sees is actually relevant to them.
  3. Device views: see how your e-mail is going to look on mobile, edit the desktop and mobile view side-by-side, and customize how your e-mail appears in notifications and mail inboxes. You can even see a preview of how your message is going to look in certain apps, like Gmail or Outlook.
Realistic view of your e-mail on mobile
Optimize the mobile _and_ desktop view of your e-mail side-by-side
You can even edit what appears in notifications. Magical!
See how your e-mail is going to look in apps with Inbox Preview

My Challenges

  1. Making a WYSIWYG editor. it would be a rough ride even making a desktop app, but in a web browser? Ho boy.
  2. Seeing the big picture. this product has a huge, sprawling scope, and accounting for all the use-cases and workflows was hell of a job. We had to do a lot of research and run a bunch of workshops to bring up everything we could, and set up our roadmap accordingly.
  3. Drawing the line. it would've been impossible to deliver everything in a timely manner, so we had to carefully select what goes into the first release (the infamous MVP), and which features will be added later. Feasibility and user-needs formed our roadmap.

What I Liked

The Visual Content Editor is definitely better than our [/ce](previous e-mail editing solutions). I'm happy we built a product that's addressing actual user problems — it's not merely another idea some higher up thought was great.

What I'd Have Done Differently

I'd have pushed for more systemization. Sometimes we develop so lean and agile, we don't anticipate future changes — even obvious ones. "We'll fix it later when we need it", but as time goes on, more and more features and functions are built on top of bare-bones foundations and rigid solutions, making it harder to "fix it in post".

I believe these cons could've been minimized if we were thinking in systems, and how the whole product will interact with the feature-groups we will be most likely adding later on. Instead, we often pulled a "this works right now, so let's move on to the next one" move.

Is there a methodology that's lean but also thinks ahead? Maybe I'll have to put on my manifesto-writing hat…

Process Overview

  1. Running a Design Sprint
  2. Story mapping session
  3. Making the MVP
  4. Feature package roadmap
  5. Platformization