Redesigning the registration form to increase the conversion rate

Background

Alchemist Accelerator is a startup accelerator based in San Francisco. Access to an extensive network of faculty, mentors and investors is one of the valuable perks provided to the founders of startups accepted to the Alchemist program. 

MY ROLE

User Research, Concept Ideation, User Testing, Wireframing, Prototyping

TEAM

1 Product Manager

4 Software Engineers

1 Designer (Me)

TOOLS

sketch-symbol-transparent@2x.png
logo.png

Design Challenge

One of the top Alchemist Accelerator's business goals is the constant growth of its network. It allows Alchemist's startups to build meaningful connections with mentors, coaches, angels, VC's and other founders. To join this network a person needs to fill out the registration form. People hate forms. And if besides the length the form has multiple usability issues it is very unlikely that anyone is going to complete it. 

34

questions

in the average form

22 (65%)

of these questions

are optional

41%

completed forms

Step 4 of the Old Registration Form

 Despite such a high drop-off rate, stakeholders were not ready to remove any of the optional questions. I needed to make the registration form easier and faster to complete without removing anything from it. 

My Process

To understand the reasons why the drop-off rate is so high, I had conducted 20 remote usability testing sessions. 

Usability Testing Findings

Due to the limited engineering resources, we couldn't approach all the discovered issues at once. I had to divide them into two groups that could be tackled one after another. To identify the most critical issues that should be addressed first, I employed the Decision Tree approach described in the "Think Like a UX Researcher" book by David Travis.

Decision Tree to Prioritize Usability Problems 

I marked two usability issues as those that have a big impact because both of them were blocking users from moving to the next step. I marked all the discovered issues as affecting many users because all new users have to fill the registration form. At the same time, all the users need to do it only once, that's why I marked all the issues as "not persistent".

As a result, I created this table with all the usability problems sorted by their priority. This table made it obvious what our two iterations will be: 1st iteration - issues with 2 critical points, 2nd iteration - all the rest issues.

Prioritizing usability issues using the Decision Tree approach  

Iteration 1: Improving the Most Critical Usability Issues

The two most critical issues we planned to tackle first were:

  1. A subtle visual difference between required and optional fields.

  2. Disabled Save and Continue button if some of the required fields are not completed.

 

A combination of these two issues was providing a highly frustrating user experience and in some cases was forcing users to abandon the form.

STEP 1 - Personal Old Copy 3.png
  • To solve these issues I've suggested using text instead of asterisk and to mark both: required and optional fields.

 

  • Also, we've made the Save and Continue button always enabled and implemented a top-level error message.

Iteration 2: Design Exploration

For Iteration 2 I've focused mostly on the visual improvements of the form. I've added more color accents to emphasize the logical structure of the form and worked with the spacings between the fields. Based on the rule the rule of thumb that "comfortable spacing between label/input pairs is about 50-75% of the height of an input field" ("Web Form Design: Filling in the Blanks" book by L.Wroblewski) I decided to go with a 50% value. 

Iteration 2: Improving visual accents, structure and adding visual hints

Marking the required fields & adding progress indicator

  • Instead of marking only the required fields with asterisks, now both required and optional fields are marked with text labels. It reduces users' cognitive load by eliminating the necessity to keep information in short term memory. 

  • Old progress indicator was not clickable. Despite it looked like a breadcrumbs it was just a text. As a result, we had a lot of rage clicks. New progress indicator is clickable.

Reducing the spacing

Reduced spacings between labels and fields as well as between label/field pairs.

Getting rid of dropdowns

Dropdowns in questions with a short list of predefined answers are now substituted with radio buttons and checkboxes.

Eliminating confusion with the optional step

Step 4 is variable based on the roles selected in Step 2. Previously Step 4 was shown in the breadcrumbs but if it was not required user saw Finish Registration button while on the Step 3. It was confusing.

 

Now the logic is this: If based on the previous answers Step 4 is needed, user sees the questions; if Step 4 is not needed, instead of questions user sees a message explaining that this Step is not required. 

Results

At this point, only the first iteration of the redesign has been implemented. It alone has provided a significant improvement in the completion rate. We expect that the second iteration will help us to reduce the drop-off rate even more.

Next Steps

Based on this research, form length is the second reason for online form abandonment. Considering that stakeholders are not ready to remove any of the optional questions from the form, my next step will be to explore different options of postponing optional questions to a later time. 

One more interesting finding for us was the fact that not all our potential users have a LinkedIn profile. Historically, Vault had been providing only one way to register - logging in via LinkedIn. This decision was based on the unverified assumption that all business people use LinkedIn. Performing user research for this project helped us to discover that this assumption was wrong. As a result we started to develop an alternative way of signing up.

Let's create something great together.


Please get in touch If you feel I’d be the right fit for a role you’re looking to fill. 

Just drop me an email and I’ll get back to you as soon as I can.

I promise! 👌

  • LinkedIn Social Icon

2020 by Lisa Timanova