Development journey to get from V1 to V2 of our email editor

Hey guys,

I recently launched V2 of our email editor and thought it would be interesting to share the development journey from V1 to V2. :)

Quick overview

We share proven email templates for getting new clients, following up with prospects, partnering with influencers and more. Earlier this year, I launched V1 of the email editor. Instead of just sharing email templates you had to copy and paste to use, I wanted to give people the ability to personalize any of the email templates directly on the spot, and copy and paste them straight into their email or CRM.

How V1 worked

https://bucket.mlcdn.com/a/764/764116/images/c0d43536da33531968cea9ec1198b00ee5b18f9a.gif (a bit rough)

Issues with V1

While the fill in the blank approach seemed to make it easy to personalize any of the emails, I found it was important to give people the flexibility to freely edit any of the email content, not just specific phrases.

V2: ability to directly edit any of the email templates on the spot

Challenges

When you pasted the email you personalized, it retained some of our website’s formatting.

Solution: I used line-height: unset, font-size: unset, etc. to reset the text’s existing formatting.

When you pasted the email into Gmail or a CRM, the line breaks weren’t editable. You couldn’t just click on that empty line to type something or hit backspace to easily delete it if needed.

Solution: Replaced the <p>’s in the email template with 2 <br> tags. I gave each second <br> an unique ID class so I could easily target it with CSS to reduce its height so the 2 <br>'s didn’t create an extra wide gap between each paragraph.

We explain the psychology behind every key phrase in each email so people can understand why it works and easily personalize it for their prospect or client. After getting rid of the fill in the blank fields from V1 of the email editor, I needed another way for people to easily reference these explanations.

Solution: As people are actively editing a key phrase in an email template, I used jQuery to highlight the explanation of its psychology beside the template.

Live example of how the email editor works now:

https://artofemails.com/cold-emails#data

If you have any questions, let me know and I’ll answer in the comments. :)