Engineering a Frictionless Signup Experience

Originally published on Segment’s blog and republished here.

Like many of our peers in the SaaS space, Segment’s growth team is ruthlessly focused on increasing the number and quality of leads for our sales team. For us, that means more companies completing our signup form. But we don’t just want more companies signing up — we also want our sales team to have a more comprehensive understanding of our customers.

To increase conversion rates it makes sense to shorten these forms. However, this runs the risk of losing vital information on signups that is critical further down the sales funnel. After much deliberation, we decided to run an experiment we’ve dubbed “Frictionless Signup”. In this experiment we use Segment’s data enrichment product to prefill the signup form.

After a month of testing, the results are in: adding an email capture form on our homepage increased conversion rates by 5.45%, and prefilling the signup form with Clearbit-enriched data increased conversion rates by 23.76%.

Reduce friction without compromising data

Frictionless Signup is the process of prefilling a signup form, or any lead generation form, using firmographic data (i.e. company name, company employee count, total company funding, etc). When the user types in their email address, we hit Clearbit’s Enrichment API and use the data that is returned to complete the remaining part of the form.

As you can see from the GIF below, the customer typed in their email address and the form automatically prefills the remaining fields:

Why does it work so well?

Frictionless Signup and profile enrichment adds four major improvements to a standard form:

1. Form prefilling: We are reducing the effort a user encounters on any form. By reducing the number of form fields on our sign up page, we made it easier for visitors to sign up.

2. Rich user profiles: When you hit Clearbit’s API, especially via Segment’s Enrichment Integration, you get hundreds of additional data points about your signup. For example, here is the returned data for Guillaume Cabane, our in-house growth guru:

3. Data validation: Long signup forms often result in fake data, since users fill the required fields with anything to get through the signup process. Prefilled, enriched data allows the user to review, correct, and validate rather than having to enter data from scratch. In addition to that, you can automatically discard the Clearbit data if the user changes any field in the form (because that would indicate the Clearbit data is invalidated). This is huge, as we no longer run the risk of a false positive match.

4. Dynamic content: Because we pass the Clearbit data back to the client (i.e. the browser), we have the option to customize the onboarding process with unique content targeted to that user. In the example above, we are displaying social proof in the form of a quote from one of our beloved customers. The quote is role-specific, so the marketer sees a marketer quote and so on.

For example, this is our default signup form page:

When we pre-qualify a signup based upon the data returned from the Clearbit call, we can add an additional form field asking if they’d like help getting started:

How we did it

To help others reach the same goal, we open-sourced the code, and we wrote this step-by-step guide on how we used it at Segment.

Before diving into the details, here’s a high-level overview of the process:

1. The customer enters their email address
2. Email address is then sent to Clearbit’s Enrichment API
3. Form fields are prefilled with info returned from Clearbit
4. The customer’s profile is enriched via Segment identify and track calls, giving you better data for your sales and marketing team

If the above sounds new or intimidating, don’t worry. I’ll walk you through each step.

Step 1: Accept an email address

In order to prefill our form, we need to first collect an email address. This is what Clearbit’s Enrichment API requires in order to return traits on the user like first name, last name, and company role. We made the email address the first input box on our demo form because we needed some time (a couple hundred milliseconds) to hit Clearbit’s API and prefill the rest of the form.

Thus, step #1 of Frictionless Signup is: you must ask your users for an email address so you can query Clearbit’s API.

Step 2: Write simple JavaScript to listen for email field changes

We wrote a few lines of JavaScript that listened for changes to the email form field and captured the user’s input. This step was important because the moment the user finished typing their email address, we needed to hit Clearbit’s API immediately.

In the following code, we got the HTML element called “email” and added a “change” event listener to it. This means whenever the user leaves the email form field, the JavaScript will be listening:

document.getElementById("email").addEventListener('change', () => {
  // keep reading for the code that belongs here
});

With this done, now you’re ready to query the Clearbit API and start populating the rest of the form.

Step 3: Query the Clearbit API

Once we captured the lead’s email address, we could then use it to query the Clearbit API to pull relevant information on that email address. We simply make an HTTP request with that email address to Clearbit’s Enrichment API endpoint. The response can include both personal and company information that we can use to populate all the form fields. Here is what your client-side JavaScript code would look like:

const request = require('visionmedia/superagent');

document.getElementById("email").addEventListener('change', () => {
  // make a GET request to a clearbit route on your server
  request.get('/contact/clearbit')  // send in user’s email as a query param
  .query({ email: event.target.value })
  .end((err, res) => {    // simply return if there is an error
    if (err || !res.ok) return    // capture the person & company object
    const {person, company} = res.body    // more code below on how to parse the response
  });
});

It’s that simple. Onward!

The trickiest part here is that your Clearbit call needs to be made server-side to avoid exposing API keys. You will have to pass the response data to your client side JavaScript. Don’t worry, though: Clearbit offers a Node, Ruby, and Python library to help you do this. For our experiment, we used the Node Library.

Here’s the code on our Node server:

const clearbit = require('clearbit')('{clearbit_api_key}')// capture the email query parameter
const emailAddress = this.request.query.email;// hit clearbit enrichment API
clearbit.Enrichment.find({email: emailAddress, stream: true})
  .then(response => {
    return response
  })
  .catch(err => {
    console.error(err)
  });

The Clearbit response object would contain at least:

{
  "person": {
    "id": "a0dd5de3-b1ff-449d-85ab-4b2ffdfdca53",
    "name": {
      "fullName": "Alex Stein",
      "givenName": "Alex",
      "familyName": "Stein"
    },
    "email": "alex@example.com",
    "location": "San Francisco, CA, US",
    "employment": {
      "domain": "example.com",
      "name": "Example",
      "title": "Digital Brand and Content Lead",
      "role": "marketing",
      "seniority": "manager"
    },
  },
  "company": {
    "id": "3f5d6a4e-c284-4f78-bfdf-7669b45af907",
    "name": "Example",
    "legalName": "Example Technologies Inc.",
    "domain": "example.com",
    "domainAliases": ["example.org"],
  },
}

In fact, this is just a small proportion of the response. More information on the person and their company, such as social profiles and other contact information, is available through this call. Combining the two sections above — the client-side JavaScript that hits your Clearbit route and the server-side JavaScript that hits the Clearbit API — will get you 80% of the way. The next step is to parse the data in order to prefill the rest of the form.

Step 4: Update the form automatically

When the Clearbit API returns, you can then use the person and company objects to populate the required fields in your form. The easiest way to do this with JavaScript is to use the element IDs of the requisite fields that correspond to the data field in the response object:

document.getElementById("email").addEventListener('change', function() {
  request.get('/contact/clearbit')
  .query({ email: event.target.value })
  .end((err, res) => {
    if (err || !res.ok) return
    // set (prefill) the name form field
    document.getElementById("fullName").value = person.fullName
    // set (prefill) the company form field
    document.getElementById("company").value = company.name
  });
});

Step 5: Send your enriched user data to your downstream integrations

This part is super important, especially if you have a SaaS product and double especially if you are already using Segment. For those unfamiliar, Segment’s identify call helps tie user traits to their actions within your app. For example, every time a user completes an action (called a ‘track event’), you can automatically have their profile attached to that event. The data is then sent to any other tools you have turned on with Segment, like email marketing and analytics.

By integrating Clearbit Enrichment with your Segment account, all your users will automatically be enriched with new data. All you have to do is turn on the Clearbit integration in your Segment dashboard. It’s very easy to get started and your marketing and sales team will love you for it!

Advanced: predictive lead scoring

We have started using this profile information as the input for predictive lead scoring tool, Madkudu. This uses the profile information along with conversion and in-app behavioral data to distinguish high-value leads. Using the results from Madkudu in real-time, we can identify such high touch leads early in the signup process. This can then be used in conjunction with customization to make allow the customer success team to reach out before the individual has reached the product to help them with onboarding.

The results

At Segment, this technique, in addition to the predictive lead scoring, has increased our signups over 20%.

But more than that, since Frictionless Signup enables us to validate the data, we are able to get clean, accurate data about our users to send personalized marketing messages and dynamically display more better in-page content to drive demo requests. We are also able to properly score the leads based on likelihood to convert and then pass them over to our Sales folks, resulting in an increase in our Sales Qualified Leads.

We not only made it easier for a prospect to request a demo, we also hit our goals of increasing the quantity and quality of leads generated from our marketing site.