Last year we released a single sign-in system called 37signals ID. It was a massive project for us, and when you do big projects you can’t make every detail perfect. “37id” (as we called it internally) would never launch if it had to be perfect. So since launch we’ve been fixing rough spots as we identify them.
One rough spot had to do with sign-ups. When you sign up for our products, you can either create a new account from scratch or you can identify yourself as an existing customer. Existing customers can use the same username, see their 37signals apps in one place (Launchpad), re-use their avatar and so on. Basically it’s a big time saver and a big convenience. The problem was very few customers took advantage of the feature. Our support staff often heard from customers with multiple accounts who had no idea that they could link their accounts into a single 37signals ID. So we had a design problem on our hands. Why weren’t people logging in on the sign up screen?
Let’s have a look at the original signup screen. The form was completely geared for new customers, except there was a strip at the top of the screen just below the header. The strip called out to new customers with a link to “sign in” if they already use our products.
We figured there were two reasons why people weren’t signing in with this link. One: it could be that they didn’t notice the callout. And two: maybe people were noticing the link, but the language wasn’t compelling enough to make them click. We took these explanations one at a time and focused first on the placement of the callout.
Our basic intuition was that the callout should detach from the header block. When it’s attached to the header, the callout and header glom into a single unit and it’s easy to skip past both of them. Does detaching the callout help?
The detached header was harder to miss, but it took us too far in the other direction. It had too much focus. It felt like an obstacle. We wanted the signup form to stay focused on new customers and we didn’t want anything to trip new customers up or make them pause. The detached block felt like an interruption or a diversion instead of a helpful callout. “Already use a 37-what? Do what now? I just want to sign up.” This noticable-vs.-obstructive dichotomy become a key balancing point right from the start.
Next we tried moving the callout into a sidebar so it wouldn’t interrupt the vertical flow.
This didn’t satisfy either side of the problem. It wasn’t noticeable enough. It felt like a tooltip or “did you know?”—something we expected repeat customers to skip. And while it didn’t stand out enough, it still introduced enough extra complexity that it remained an obstruction. It felt like a fork in the road. We wanted new customers to get further down the form.
To increase the noticeability we could give the callout a background color. And to decrease the obstruction, we could move it further into the flow of the form, after new customers already have gained momentum.
At first glance, this looked better. But we had to pause and ask ourselves: was the block noticeable because it was really noticeable, or had we already trained ourselves to stare at the right side of the screen? Would people read the right-hand side so carefully? After a step back, our intuition said no. It was too easy for the eye to follow the scanline of fields downwards and disregard the sidebar.
But one thing felt right. The top of the page looked better without a callout. It looked simpler. There were no alternatives or choices to make. Just a couple easy questions – everybody knows their name and email address – and the momentum would start.
Another thing came to mind. It’s no big deal to enter your name, email, company and time zone. But as soon as you hit the username field, friction appears. Usernames are weird. The one you want might be taken. There might be requirements, like a certain number of characters for security reasons. Generally this is the part of sign-up where pain enters the picture. That brings us back to 37id. A key benefit of 37id is that you can re-use the same username/password for all of your 37signals products. Creating usernames is a pain and 37id is a pain reliever. So something was right about this placement near the username field.
A few facts floated in our heads. 1) The sidebar was too easy to ignore. 2) The callout made sense near the username fields because of the pain/remedy connection. And 3) the eye was more likely to see the callout if we interrupted the scanline. With these facts in mind we mocked a version with the callout below the “Now choose a username & password” header.
Now we were getting somewhere. It was time turn our focus to the copy. The block with two lines of text was too tall and substantive. We wanted a thin, noticeable strip with a clear message.
Here’s a sample of the process we went through in Campfire to shorten and improve the language:
Here’s the final design:
It’s short, punchy, clear, hard to miss and easy to skip when it doesn’t apply.
Something unusual about this design is that it actually encourages people to type information unnecessarily. If you fill out the name, email, and company fields before you click the “sign in” button, that data you typed in will be replaced by the info we have on file for your 37signals ID. At first this might look like a fault, but we decided that the hassle of unnecessarily filling out those fields was much smaller than the hassle of having separate accounts, separate username and passwords, separate log-in URLs and all the rest.
It felt good to focus on a rough spot in the 37id flow and whittle down to a sharp solution together. I hope you enjoyed a look behind the scenes at the decisions behind the design.