Hubspot — Email builder using machine learning

Why I decided to work on this project?

Recently I attended a design talk in Hubspot Dublin office where one of the Senior UI Designer from Hubspot shared some of her research on how they improved the Email builder tool in Hubspot.

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?

Present Situation —

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?

  • Marketers who use Hubspot email buiders

What’s my role in the project?

  • Analyst
  • UI Designer
  • Usability Tester

Solution to the problem

Email builder which creates a template from an image using image processing and machine learning.

Build template from an Image

Design Process

In this project, most of my analysis is based on the research data I got to see during the talk.

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 -

Hubspot ran different usability testing and empathy sessions, to understand how users are actually creating emails.

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?

As the most observed behaviour of the users is recreating emails after looking at emails or email mockups, which is time consuming, I tried to study if using image recognition and machine learning will be feasible or not to improve the existing tool.

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?

Since the suggested solution relies on image recognition and machine learning to identify the email elements such as image or buttons and creates a template based on the image provided , it saves lots of time for the end user.

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 —

  1. User clicks on “From Image” to access the feature.
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 data available, we understood the most commonly used email structures. For any application that uses machine learning, the most important factor is how well it is trained with training data.

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?

At the moment, the user experience researchers manually open and view the email templates used by users and rely on user manual feedback to introduce changes.

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

As this will be a new feature, we should test these 2 points -

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

How easy is the feature easy to discover?

To help with discovering the new feature, we must draw the attention of the user towards the new feature. So this purpose, I tested 2 ideas -

  • 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?

To test how easy the feature is to understand, the users were given think aloud testing with a scenario to complete a test which involved clicking on a prototype.

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

All Screens -

Thank you :)

Click on this link to go to my UX Portfolio.

    Pritish Krishna Panda

    Written by

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

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade