Yesterday we launched the redesign of the signup form used by Basecamp, Highrise, Backpack, and Campfire. This is one of the last phases of the marketing site redesign project we started earlier this year.

The new signup form design pulls from the look, feel, and language of the new marketing sites. The previous form, which pulled more from the previous generation’s site design, was dated and too long.

We’ve been watching a lot of Clicktale recordings of form usage and we noticed that just about everyone scrolls down to the bottom of the form, then back up, before they start filling out the form. So we wanted the redesigned form to be markedly shorter than the one it was replacing.

By moving instructions, shifting the header to the sidebar, widening the form field content area, rewording long blocks of text, and hiding elements that were infrequently used, we were able to save a good bit of vertical space. We also redesigned the error states and moved most of the error checking to the client side to prevent unnecessary reloads.

The images below provide a rough estimation of compared height. They aren’t resized to perfect scale, but they’re close enough to demonstrate the space savings. The number of fields, and the order of the fields, are the same.

We also wanted the new form to make people feel better about their choice. We spent a lot of time on the language, graphical elements in the sidebar, and overall information flow throughout the process. We wanted to reiterate that millions of people have accounts with 37signals, that our products are secure, reliable, and backed up daily, and that we provide fast and friendly customer service. We also wanted to bring some of the handwriting styles in from the account pages inside the products to soften up the design a bit.

After many iterations, here’s the final product:

You can view and interact with this form at full size by signing up for any one of our products. And here’s a screenshot of the previous form design for comparison.

This was an especially fun project since so many people were involved. Jamie and I worked on the core design (Jamie also came up with the gold star/seal icon concept). Jason Z did the handwriting (different for each product name). Jamis hooked the form into our central billing system. And Ryan gave his feeback multiple times along the way.

For technical reasons we’ve decided not to directly A/B test the old and new form at this time. We will be watching conversion numbers closely as well as Clicktale videos to gauge the improvement. If we have something interesting to share we’ll be sure to share it here on Signal vs. Noise.