Redesigning the registration form to increase the conversion rate
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.
User Research, Concept Ideation, User Testing, Wireframing, Prototyping
1 Product Manager
4 Software Engineers
1 Designer (Me)
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.
in the average form
of these questions
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.
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:
A subtle visual difference between required and optional fields.
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.
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
Hover over the image to see the BEFORE version.
⬅️ New progress indicator allows going more than one step back if needed.
⬅️ Prominent headers for easier scanning of the form.
⬅️ Reduced spacings between labels and fields as well as between label/field pairs.
⬅️ 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.
⬅️ Google API for location autocomplete. It allowed us to remove redundant fields such as City, State, Country. It also excludes the risk of typos in location names.
Hover over the image to see the BEFORE version.
⬅️ Dropdowns in questions with a short list of predefined answers were substituted with radio buttons and checkboxes.
⬅️ To save vertical space I placed short related fields into one line.
⬅️ Rich text formatting options are hidden when the field is not activated. It helps to reduce visual noise. Also, field height is now treated as an affordance: there are three different heights based on the length of an expected answer.
⬅️ Instead of generic Submit button, there is now a more “action-oriented” Finish Registration button.
I decided to keep showing a fixed number of steps in the progress indicator even though Step 4 is variable.
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. This approach allows us to keep a fixed number of steps in the progress indicator, and at the same time to remove the confusing combination of the “Finish Registration” button and an upcoming step.
At this point, only the first iteration of the redesign has been implemented. It alone has provided a resulted in a significant improvement in the completion rate. We expect that the second iteration will help us to reduce the drop-off rate even more.
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.