Designing user registration process

How should the interface and steps be

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint-Exupery

We weren’t that happy about the way our registration pages look @WhoScored, so we decided to redesign them, and this also gave us the opportunity to make some improvements on the overall process as well.

Let’s look at the current interface:

This page is used both for logging in and registration. If you are not registered and click on log in, then you’d automatically be registered. This might confuse some users as there’s no explicit “register” option.

If you click on “Create a WhoScored account manually”, then you see this page:

I read some articles about what are the best practices in the industry, and checked many popular and innovative websites. There’s a consensus about the design in most websites (well, how complex can it be anyways), but there’s clearly not one best way of doing it, but a set of tradeoffs that you need to think of.

I don’t know the exact reason but I realised instead of “Register / Log in”, most websites use “Sign up / Sign in”.

I decided to have different pages for registration and logging in, then I started to design the registration page.

Registration page

The first thing I changed was to place Facebook registration and manual registration sections side by side instead of placing them vertically, as we humans can read and focus much better when content is grouped in narrow columns instead of wide rows. The reason why it’s on the left is because we prefer users to register via Facebook instead of manually.

Secondly, I reduced the number of input fields to a minimum because firstly I’m a big fan of simplicity and minimalistic approaches, and secondly the more fields you add, the less registrations your site will have. I removed “Confirm password” field, as if the user would enter a password that she doesn’t mean to, then she can recover it the next time. Still, I opted for adding a “Show password” field, if the user would click on it, then she’d see what password she’s typing.

I embedded field descriptions into the input fields to save space, and added some information about them. I also moved registration benefits to the bottom with a nice phrase, and added a link to login page. Final step was to let the user know we’d never post to Facebook without asking to address any fears that we would.

I will also add On-the-fly validation, so that if user enters an incorrect email address or a password that’s not matching our criteria, she’d realise it as she types.

The final step of registration

Actually there are more data that we ask from the user, but for the sake of not scaring people off, they are kept on the second and final step of registration. Hence the first button’s name on the initial page.

The final page of our registration process has the same structure as the first page. All these fields are optional optional and will be noted with with a small tooltip. We will only make “age” mandatory if the user opts for betting newsletter due to legal obligations. I also added preview links to newsletters so that the user can see what she’ll get. Finally, the application will check user’s IP to automatically set her location.

If user has registered via Facebook, then she won’t see the section on the left as we get that information from Facebook already.

Hipmunk has a great way of hiding/showing fields that are unrelated at a specific time in user interaction. See their website: http://www.hipmunk.com/, it’s only when you click on “From” or “To” fields, you see further options like date or number of passengers. I find it quite elegant.

Login page

Our login page is almost the same as registration page.

So are we supposed to have two different pages? I find Magisto’s approach quite inspiring. Firstly, the page opens on a pop-up, so that after registering, users don’t lose where they were at. Secondly, as registration and login pages are usually very similar, when the user clicks on “Create account” or “Sign in”, page transforms very beautifully.

Check it out here.

We plan to have the same transition on our site as well. Also I think not having a checkbox to confirm terms and privacy policy provides a smoother user experience.

Our new registration pages are scheduled to go live next month, and the when it’s complete, I’ll add provide some more screenshots. Hope you like the new design!