03

03

03

Drag & Drop Email Builder

Drag & Drop Email Builder

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.

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

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

2014-2020

2014-2020

Benchmark Email / Web App

Benchmark Email / Web App

Benchmark Email / Web App

Header for visual email builder
Header for visual email builder
Header for visual email builder

Email Too

Like many tech fields, mobile device popularity heavily changed the email industry in 2013. Many consumers now viewed emails on mobile devices, and as a result marketers found subscribers engaged more with responsive emails since they looked better on smaller screens and were easier to interact with.

As an email service provider, Benchmark had one builder but it couldn't make responsive emails and couldn’t meet a rising demand.

Our team set out to replace the legacy tool in 2013. The new tool needed to make it easy for customers to create emails by dragging and dropping their content while it automatically created a HMTL output that followed best industry practices. This updated drag & drop email builder was released in 2014 and has undergone multiple improvements.

My Role

I initially joined the team to complete concept wireframes, but later became the lead designer to collaborate with stakeholders and a small team of developers. From 2014-2020, I had been closely tied to working on its UX, visual designs and interactions while weighing into its roadmap and creating its design system for long-term scalability.

This WYSIWYG 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

Over the years, our team has learned a lot and the builder has gone through multiple iterations.

Comfortable Space

It was important to carve a comfortable space for customers since they logged into the builder on a regular basis. We found many of our customers spent over an hour on their emails at a time so it had to feel good for longer sessions. It had to be easy to get going immediately and feel simple, contrasting with an industry full of complicated 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

Improved Repeated Actions

Since customers consistently sent emails, it also meant providing efficient ways for them to save and reuse assets including templates, images and files. Over multiple iterations, we improved repeating motions such as the dragging actions, 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

I had a high focus on simplicity and global usability since the web app supported 9 languages. Though the majority of customers were in North American regions, the tool needed to be accessible for all supported regions. It had to look and feel easy for everyone while accounting for language considerations such as lengthy text strings, non-breaking words and special character display. It needed to scale.

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 Builder. This tool became Benchmark’s key offering in their email marketing product.

Forbes

Mar 2017

Mar 2017

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

Jan 2019

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."