Loop

How Three Small Changes Increased Our Sign Up Page Conversions by 43%

By Cody

Introduction

Optimizing your sign up page is an activity which offers one of the highest ROIs in terms of effort put in possible.

Let’s say that you are using google ads to drive traffic to a signup page with a cost per click of $2.43 and that your sign up rate once visitors get to that sign up page is 38%. That would mean that your cost per sign up is $6.39.

Every single tweak that you make to this sign up page could save you a lot on potential ad spend. In fact, an efficient or inefficient sign up page could be the difference between a net positive ROI on your ad spend or a net negative ROI.

In this article, I will go over the three changes that had the largest effect on our sign up rates. We have run quite a few experiments here at Loop for our sign up page, but these three are by far the most successful ones.

Required and Optional Fields

The first change that made a significant difference for us was splitting our sign up page into two different sections, with optional fields separated from the required fields visually and clearly labeled as “Optional.” Normally, sign up pages may indicate required fields with an asterisk like this:

Some signup forms don’t even indicate which fields are required and which aren’t. We’ve tried a few different ways of handling this problem of required and non-required fields.

The first thing we found was that with each additional field added (of any type) sign-ups went down significantly. However, required fields hurts sign up rates more than adding more optional fields.

Here’s an example of a signup page with way too many fields and an unclear indication of which fields are required and which aren’t:

There are two general strategies in regard to optional fields. The first is what we currently do, separating them from the required fields and clearly labeling the optional fields “optional.” The second is to have a two step sign up process.

With a two step sign up process the user first only has to enter the required fields and then, once they have done that, they are brought to the next page where they can fill out the optional fields if they want.

What we found with this is that the sign up % is higher for the first step (the required fields) since there are less fields overall, but that overall bounce rates for the entire process (number of users who navigated away from the website completely) were increased. We thought that the tradeoff was better for having a one page sign in process.

The most efficient sign up possible, if you are optimizing solely for sign up rate, is a one-click email and password field with social options for the email part (Gmail login, Facebook login, etc.).

Unfortunately this didn’t mesh with some of our goals like building a community, as well as some of our future planned projects.

Like instagram and twitter, we wanted users to have a recognizable handle to post from. This means having a username.

Auto-Generated Usernames

Usernames offer a conundrum because they require an extra field, and the worst kind of extra field at that. Usernames require the user to have to think and create something from scratch (the username). Most people would rather not bother. By most people I mean the actual majority of people (more than 50%) will bounce from the web page entirely rather than come up with a username.

There is one way to efficiently reduce the damage to sign up rates that adding a username field causes, while still preserving usernames. The solution is auto-generating a username for each user while still allowing them to change it if they want to.

This achieves two goals. For the users that don’t want to have to think of a username, they don’t have to, while still having a username. For the users that do want to have a custom username, they can type in their own.

Supplementary Explanatory Text

There is a catch to this strategy though. To reap the full benefits, you need to tell the user what you are doing. When we just auto-generated the username without telling the user what we were doing, we were getting feedback from users thinking that the field had pre-filled from a different user’s username on accident. So we added some explanatory text under it explaining to the user what we are doing which you can see below:

We are still working on perfecting this. A couple things I’m not pleased with is the auto-generated usernames are a bit awkward. I’d prefer not having to use numbers and I’d like the words to stand out a bit more.

We use the faker.js library to generate the usernames which, as far as I know, is the best option currently available. I’d also like to experiment with a couple other methods of telling the user about the auto-generated username. One thing we tried was tooltips, but they weren’t activated enough to be efficient at conveying the information.