03

Drag & Drop Email Builder

As a B2B email service provider, Benchmark wanted to build its customers a better tool for creating responsive emails for a growing mobile viewership.

2014-2020

Benchmark Email / Web App

Header for visual email builder
Header for visual email builder

Email Too

Similar to other tech fields, mobile device popularity changed the email industry in 2013. Consumers heavily viewed emails on mobile devices and as a result, responsive emails performed better and produced higher engagement levels since they looked better on smaller screens and were easier to interact with.

As an email service provider, Benchmark's single email builder couldn't create responsive emails and meet a rising demand.

Slide to view before and after

Slide to view before and after

Slide to view before and after

In 2013, our team set out to replace the legacy builder. As a no-code tool, customers needed to easily create emails by dragging and dropping their content. Behind the scenes, it needed to auto create synchronized HMTL and text-only outputs, following industry best practices for email clients. This updated drag & drop email builder was initially released in 2014 and has undergone multiple changes and improvements since then.

My Role

Initially joining the concept team to flush out wireframes, I later became the lead designer, collaborating with stakeholders and a small team of developers. From 2014-2020, I was closely tied to working on its UI/UX design, interactions, and template system while contributing to its roadmap and adapting its UI into the app's design system for long term scalability.

This no-code email builder, known as the Drag & Drop Editor, went from struggling to get off the ground to the company’s core offering.

Design system components used in the visual email builder
Design system components used in the visual email builder

Adapted the editor's UI into the app’s overall design system in 2018

Adapted the editor's UI into the app’s overall design system in 2018

Adapted the editor's UI into the app’s overall design system in 2018

Customer Outlook

Keeping up-to-date with industry changes and customer discovery, the builder has gone through multiple iterations while retaining its product principles.

Comfortable Space

It was important to create a comfortable space since customers consistently used the builder on a regular basis. Many spent over an hour on their emails at a time so the space had to feel good for long sessions. With a SMB target audience, the tool needed to be easy, contrasting with competitors offering complex tools with overwhelming options.

Animation of the editor in 2019
Animation of the editor in 2019

Maximized visual workspace without sacrificing visual comfort

Maximized visual workspace without sacrificing visual comfort

Maximized visual workspace without sacrificing visual comfort

Efficient & Easy

With customers sending emails consistently, we focused on providing efficient ways for them to save, access, and reuse assets including templates, images, files, and other content. Using data to inform our decisions, we improved repeated actions such as the dragging, uploading, content storage interactions, and duplicating workflows.

Implemented dropzone into image gallery
Implemented dropzone into image gallery
Image upload experience in image gallery
Image upload experience in image gallery

Improving high frequency interactions

Improving high frequency interactions

Improving high frequency interactions

Global Usability

Because the product supported 9 languages, I intentionally focused on simplicity and global usability. With localization and scaleability in mind, we accounted for items such as lengthy text strings, non-breaking words, special character display, and other considerations for the app's supported languages.

Interface displayed in Japanese
Interface displayed in Japanese

UI scaled to support multiple languages

UI scaled to support multiple languages

UI scaled to support multiple languages

Insights & Continuous Learning

Up until 2017, our product team only had the means to access customer feedback through our support team, regional teams and reading reported client issues. Later on, we pushed to implement other tools to get quantitative data and gather direct feedback.

Actual Customer vs. Perceived Customer

When digging in further, we found Benchmark’s actual customers didn’t match who stakeholders thought they were. We quickly learned that the majority of users weren't interested in advanced features released, such as extra mobile style options. They cared that their content stacked nicely, but rarely more. Our team ended up pivoting to target customers who weren’t as versed in best email practices and HTML knowledge.

Personalized message to users
Personalized message to users

Used Intercom to communicate and gauge US/CAN reactions on features

Used Intercom to communicate and gauge US/CAN reactions on features

Used Intercom to communicate and gauge US/CAN reactions on features

Revealed Common Workflows

Feedback loops and reported issues helped highlight what customers were doing in the tool. For example, we found that customers commonly wrote their content in an external source, like a Word doc, before pasting it into the email builder. Once in the builder, they spent their time formatting and adjusting. Because of this, we focused on improving formatting workflows rather than grammar tools that are needed when writing content.

Updated text editing tool
Updated text editing tool

Impact

Benchmark delivered over 100 million emails per week for businesses around the world. As of mid 2019, more than 85% of its emails were created with the Drag & Drop Editor. This tool became Benchmark’s core offering in their email marketing product.

Forbes

Mar 2017

"… they entered the email marketing business early and became a leading player without taking significant outside funding. Today their product features a slick WYSIWYG design interface and an easy-to-use metrics platform."

Business.com

Jan 2019

"what really sets Benchmark apart from the crowd is its easy-to-use tools. From its drag-and-drop email editor to the automation tools, Benchmark makes it simple to create professional and personalized emails."