Hubspot — Email builder using machine learning

Why I decided to work on this project?

About the Email Builder —
HubSpot’s drag and drop email editor provides an intuitive interface to create and scale your email marketing efforts for your business. Each email created in the editor will render a clean and responsive design on any email client and device type.

After listening to the talk and observing the research data, I thought of different ways how I can improve their tool.

“I want to make creating emails simpler.”

What is the main problem I am trying to solve?

At this moment, the users create email by selecting a template or empty template and then they drag and drop elements into the template like image, video etc.

User research show that most times users try to copy an existing email design by creating a similar template using drag and drop builder and adding images and videos to the template, which is a manual and time consuming process.

“I want to make email building simpler and faster.”

Who are the users I am solving this problem for?

What’s my role in the project?

  • UI Designer
  • Usability Tester

Solution to the problem

Build template from an Image

Design Process

So primarily the design process included-

  • Analysis of user data
  • UI Design for the solution
  • Feedback on solution and Usability testing

The hubspot research data included data from Surveys and Usability testing sessions. I took pictures of all the research data I saw in the screen.

Here are the screens -

Feedback gathered from users
Feedback from users
User Survey

Q1 ) Rate the following email templates types in terms of importance for your company.

Q2 ) Imagine that you are ready to send an email to your customers and you are given the following email templates. Select the templates you would be drawn towards? (Select all that applies)

Q3)What are the main reasons for your template selection in question 2?

The analysis of the results from the above surveys shows -

  • Top email templates types in terms usage includes donations, Holidays/birthdays , E- Commerce , Notifications (Announcements), plain text, setting up a meeting etc.
  • Users want templates which seem clean and impactful without being too heavy with content.
  • With Graphics
  • Clean, flexible
  • Structured
Users response to feature requests

What features Users want in Email builder?

  • Video
  • HTML Editor
  • Image / Text / Button/ Block
  • Spacer
  • poll
  • Event RSVP
  • Image Group
  • Two Column Image
  • Quote
  • Ecommerce
Users use different designs of footer with all the socials.
This image illustrates how users are creating different types of similar content.

Usability Testing -

The testing sessions showed three insights -

  • Users use drag and drop options but again they make custom changes.
  • Most users want to create a copy of an old email and make changes to that to suit their current needs.
  • Most users try to recreate emails after looking at some other email image.

“Users try to recreate emails after looking at images of other emails or by looking at email mockups.”

The existing user journey is time consuming.

How this can be improved?

Existing — The user Look at a mockup and try to recreate it using drag and drop email builder.

Suggested solution — The user add a snapshot or image of an email he wants to recreate and the tool creates a template of email using same texts and image assets.

How the solution improves the existing tool?

If manually recreating an email from an image takes 20 minutes, using this solution, the user can recreate using 7–8 minutes thus reducing the time by around 60%.

Flow —

User clicks on From image option

2. User clicks on upload image.

Prompt the user to click on upload image

3. User uploads an image

4. User click on Convert

5. User Clicks on Use template

6. The user can edit the template with the assets like a regular template

The template is saved under “From Image” section for future use as well.

Machine Learning aspects

From the research, the new solution should easily recognise the following features -

  • Video
  • Image / Text / Button/ Block
  • Spacer
  • poll
  • Event RSVP
  • Maps mention
  • Image Group
  • Two Column Image
  • Quote
  • Socials

How using machine learning can help to improve the user research further?

After implementing the machine learning solution, the application will easily gather information related to user preference in email templates as users will provide images of what template they would like to recreate.

So in a nutshell , using machine learning will

  • Help the users to create any template much faster than existing solution and will reduce the effort as compared to manually copying a template from an image.
  • will provide lots of interesting user research data which can help the team to improve the product further and get a clear idea of what the user is looking for.

Solution Testing

  • How easy is the feature easy to discover?
  • How easy is the feature easy to understand?

How easy is the feature easy to discover?

  • A circular badge
  • A helper tooltip

For a given scenario, the user were asked where they will click first (First Click test )to find the new feature.

The main aim was that it should capture users attention.

Version 1
Version 2

During the testing, Version 1 performed significantly better and users were easily able to discover the new feature.

How easy is the feature easy to understand?

The test results were favourable and test participants found the flow pretty intuitive.

All Screens -

Thank you :)

UX Designer @Blueface. Minimalist, photographer and visual storyteller. Find me on

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store