Site registration + login

Boston.com is a free news site because its supported by advertising. Advertisers today want to reach specific audience segments and the best way to do this is to have an audience that you know something about. Requiring users to register on our site will do just this. When launched, it will interrupt users who are logged in and ask them to login or register in order to proceed.

The challenge for me was to develop an experience that totally interrupts the reading process and asks the user to jump through a couple of hoops before continuing on. Because we are surrounded by other free sites, most without their own registration, its vital that we get this experience correct. If not, users will bail and find other sources of news and information.

Research

Because there are many risks in requiring registration, it was important that before I started defining the experience I first knew a great deal of fundamentals. We took a number of steps to gather data:

• Forrester consultations – we discussed the issue with Forrester and looked at some of their reports on registration practices.
• User survey – We conducted an online survey of several hundred users to find out which information they were most comfortable sharing, how comfortable they would be with required registration and several other important factors.
• Site analytics – We looked at past traffic patterns since we have required registration in our past and saw it affect our pageviews.
• Best practices – I looked carefully at many other sites and observed how they handled this situation, particularly their use of Facebook Connect.

Research Artifacts Some screens I wrote that summarized a lot of the research.

User / screen flow

This involved a lot of screens and weird use cases so I wanted to organize it all into a site map.

My registration screen flow I need to see the whole picture before I can be confident that my solution will work.

Hi-fidelity wireframes

I worked on a few concepts for the registration screens.

Top Regi Bar This approach included a tool bar that would follow you around the site. I was also thinking about using this for sections of a site that required payment.

Top Regi Bar This shows how the bar would expand when the user was required to register or login.

Pop-up Login My favorite approach was a pop-up layer that would appear the instant that a user requested a page that was behind the wall. This was later deemed too difficult to build.

Registration pop-up After much deliberation, I decided this would be the best way to get all users through the process. I wanted the registration screen right infront of the user, so they could see right away how simple the process was.

thank you screen After a user is registered or logged in, we will ask them to sign up for an email product or two.

Final comps

In the end we decided to use a more simpler approach – redirecting the user to a new screen, totally streamlined for registration. This was much easier to execute and would more reliably deal with unregistered users.

Final comp In the end we settled on a design that was not in a popup and changed some of my coloring and formatting. The form got longer too unfortunately.

Final Thank you Here is a comp showing the Thankyou page after a user has used Facebook to connect.

This entry was posted on Thursday, October 21st, 2010 at 8:15 am and is filed under Featured, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed.