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.

Screenshot of the original design

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?

Detached callout

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.

Sidebar callout

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.

Floated right beside the user fields

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.

Callout interrupting the scanline

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:

Jason F.
Already use a 37signals product? Then sign in with your 37signals ID to save time.

Already use a 37signals product? Sign in to use the account you already have.
Already use a 37signals product? Sign in to use the same username and password.
Already use a 37signals product? Sign in so you don’t have to pick a new username & password.
Already use a 37signals product? Sign in to use your existing account.
Already use a 37signals product? Sign in to use your existing 37signals account.
JZ I like your variation a lot too.
Ryan S.
Already using a 37signals product? You can sign in with your existing username
JZ i like "instead of"
that cuts closer to the real issue
how you want to avoid creating a new username
3:15 PM
Jason F.
"Already use a 37signals product? Sign in instead of creating a new username"
I don’t think we need the "You can"
Words we can do without
Jason Z.
creating a new "username" sounds a little clunky
Jason F.
"Already use a 37signals product? Sign in to use the username you already have."
Jason Z.
but it’s clear
Ryan S.
"use the username you already have" is pretty good
Jason F.
"...Sign in to use the account you already have."
Ryan S.
"account" sounds a little abstract to me
i like how "i don’t want to make a new username" is concrete
Jason Z.
I avoided "account" because it sounded like you could confuse it with the product account
Jason F.
Yeah I like "you already have" angle
Jason Z.
hmmm… we say already in the first sentence
3:20 PM
Jason Z.
Jason F.
Could start with "Use a 37signals product?..."
Jason F.
Keep already in the second sentence.
Jason F.
I prefer the "you already have" angle, personally. I think it speaks to someone’s "ownership" better.
Jason F.
So we can kill "Already" in the first setence.
Ryan S.
+1 for "you already have"
i don’t even mind the "already" repetition, cuz it’s so clear
Jason Z.
Jason F.
"Use a 37signals product? Sign in to use the username you already have."
Ryan S.
repetition isn’t automatically bad
Jason F.
Fine with already twice, as well. Doesn’t bother me.
Ryan S.
i feel like "use a 37signals product?" isn’t as clear
"Already use a 37signals product?" is clearer
Jason Z.
3:25 PM
Ryan S.
i like that
i like how this pops too, even before you start filling out the form
Jason Z.
I changed the background behind "your just 60…" so it wasn’t yellow also
Ryan S.
good call on that
Jason F.
This is good.

Here’s the final design:

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.