I have been thinking about this a lot, because we’re examining the VisualCV signup process (I do consulting for them) plus I needed to develop a process for a product my partner and I are about to release called Twitterface.
Twitterface is an alternate Twitter interface that is browser-based. It offers distinctions like multiple accounts, and a modified brand experience, and so the potential for pain is moderate, but not too severe for Twitter users. Since the software can’t be used without a Twitter account, the vast majority of our audience should find our settings and design options familiar, and will likely want to move quickly into the site so they can see if this is a product they want to add to their Twitter toolkit or not. Here are step-by-step prototypes of the signup process for Twitterface:
Step 1: Signup from the Home Page
One of the first problems I ran into is that users will need a Twitterface account, which is separate from their Twitter account (although they could use the same name/password if they choose.) This is because we will have settings we keep track of for people so their account is easy & pleasant to use. I am hoping this signup form makes that clear by specifying the words “Twitterface URL” but user testing will have to be conducted to make sure.
Step 2: Add Primary Twitter Account
Now the user needs to add a Twitter account that will be considered (by us) their primary account, for the purpose of setting up a personal account on their Twitterface page & responding to search tweets. Users will be able to add multiple accounts here before moving on, or they can start with one.
Step 3: Select Twitterface Options
The user is asked to select the number of accounts to show on one web page, and their level of security for logging in and out.
Step 4: Choose the Page Design
A default Twitterface theme is selected, but the user can either change it or design their own interface, including background, logo, colors and icons. Because that sounds like a lot to do in the signup process, I made it easy by telling users they can come back and do this later.
Signup Done! User Sees New Twitterface Page
A four-step process may seem like a lot to do before arriving at the point of the product, but I feel it is the smoothest way to enter the user into our system. An alternative would be to let them signup and dump them straight into their Twitterface page, where they would need to figure out how to go down to the settings and make all the changes we just had them set up in a few steps. That idea didn’t feel very pleasant to me, despite the appeal of getting a user in front of the product immediately.
After we have a working prototype of the product online, I will do user testing and ensure this is as smooth as I want it to be, and the design may be adjusted. It is an art to guide users through complex or unfamiliar steps while employing the restraint to have them do enough to get started and begin learning the software, but not too much. I hope I struck the right balance with this design.
If you’re an application designer, think about your user’s first few minutes. Could you take them through a guided flow so that they ultimately arrive at the product with some understanding of the different components? If not, what would it take to provide this kind of path? If you look at the prototype screens carefully, you’ll see a lot of guided text on the sides of the page, and buttons that indicate next behavior (they don’t just say “next” or exist on the page if they aren’t needed yet. I also included “hints” about how to swiftly complete the step and keep moving in some cases (see the light blue “psst…” text.) This extra programming effort usually results in a significantly more simple experience for users in the interface. It’s well worth it!
Getting people to signup is a marketing and conversion issue not covered in this article, but the signup experience itself is your user’s first impression of using the product for their own benefit. I’d love to hear your thoughts about this design and see other great examples of signup processes. Link me up! 
