Drag & Drop Email Editor

About the Project

Campaign managers and non-profit leaders sought an easy way to build sleek, elegant emails with ease. Teaming up with product managers, stakeholders, and engineers, I designed this feature to allow our users to focus on the content of their messages, rather than the granularity of layout styling. 

With attention to small details, like feedback around saving, easy to drag blocks of content, and a variety of template options to get people started, we shipped an email builder that was intuitive to use for clients of all skill levels. 

Screen Shot 2021-05-11 at 1.01.10 PM

Goal: Create an intuitive, easy to use email-builder tool for mid-market users.

UX Solutions

In order to lay the foundation for the design process, we needed to collect information on our users' mental models. What felt intuitive with a drag and drop editor? How were people building emails already? How would they interact with our interface in the easiest, most intuitive manner possible?

After 12 hours of usability testing and interviews, we arrived at a clear direction of how our users approached email design -- what they wanted to be simplified, and what they wanted expedited. I set out to create an MVP that we would then test with users again to see how they interacted with each element. 

BEE design

Ever-growing design file ... 

Onboarding

As the project progressed, it became clear that users would benefit from  help getting started with the drag and drop editor. There were many elements that weren't as discoverable to users in early usability tests, such as how to place a layout block first before inserting an image or picture. 

 

Solution: I designed a quick onboarding flow. I made it short and sweet. If the tour was too long, it might overwhelm the user and UX researched hinted more than a few new pieces of information wouldn't be stored in their memory after all. But some sort of grounding information -- directing the user where to start and what pieces they might overlook -- was crucial. 

drag in rows

Framing the feature, adding value 

As we introduced long-time users to the new, advanced, and human-centered Drag & Drop editor, I aimed to make the editor as enticing as possible, from an intro modal to the panel on the compose page. 

Below, you can see the documentation of the panel which invites the user to "Design Email," illustrator and describing what they can do without blocks of text. I aimed to demonstrate value with short bullets, and make the call-to-action clear and distinguishable.  

Screen Shot 2021-05-11 at 1.03.20 PM

Final Design

The final design expanded to include almost everything a user could need from this email design feature, such as the template library where users can search and filter to begin their design with the help of a partially created email. 

 

Screen Shot 2021-05-11 at 1.06.18 PM (1)
Slice 1 (1)

Support for the New Drag & Drop Editor 

goodjob

See other client projects

               Contact  


Email design@carolyn-burnham.com

 

                                © 2022 Carolyn Burnham. All rights reserved.

                                © 2021 Carolyn Burnham. All rights reserved.