User Registration/Signup Process (Everyday User)

[seamuskraft]

Target Outcome #1: Users enjoy a ridiculously efficient, hassle-free and secure sign-up experience. Target Outcome #2: Users can easily add - and remove - from the conversation as much relevant personal, professional and participatory information as possible, receiving absolute control over their personal information and how they choose to present themselves. This includes credential retrieval. Target Outcome #3: Clear distinctions between verified and everyday users, starting with the sign-up process.

Design Philosophy

• No one likes the sign-up process. It's a necessary evil, but one that can be made so seamless and surprisingly smooth so that, by comparison, it may actually seem a little fun.
• User privacy, security and control - of their data, activity and each session - are paramount and persist throughout.
• Eliminate as many form fields as possible at every step. Authentication that's fast and secure but not stupidly complex.
• Instantly, in-line and clearly indicate every form field error.
• The more complete the profile, the more useful Madison becomes.

Initial Sign-Up Form Content (Required)

• First Name
• Last Name
• Email Address
• Create Password
• Confirm Password
• Democracy Points Awarded

Initial Sign-Up Form Content (Optional)

• Log In With: Facebook, Github, Twitter (?), LinkedIn, Quora (?), Stack Overflow (?), reddit (?), AOL (?), yahoo (?), Foursquare, Google+,
• Complete Your Profile Now or Later?
• Agree to Terms of Use (?)

Miscellaneous

• "Our Guarantee" made clear throughout sign-up process, and on every profile page(s)
• Leave "Do you want to be a verified user?" to later in the process or in a follow-on email/admin-creation

Good Form Design Examples

• Smashing Magazine Special Edition on Webform/Signup Process Design (Lots of good articles, from design 101 to eliminating/condensing fields, to validation, etc): http://www.smashingmagazine.com/web-form-design-showcases-and-solutions/
• Mobile: https://www.evernote.com/shard/s129/sh/b2613e45-c7bd-460f-9ca3-0cc635bc0e69/d6ee8dfd5db88bc25166600fa3834886
• Mint: http://cdns.designmodo.com/wp-content/uploads/2013/01/Mint.com-Sign-Up.jpg
• Mint Signup Form Wireframe: http://uxpin.com/uxporn-sign-up.html?seid=370964&img=2013/01/Mint.com-Sign-Up-wireframing-template.png
• Github Signup (Clear PW Requirements): http://cdns.designmodo.com/wp-content/uploads/2013/01/GitHub-Sign-Up.jpg
• Facebook (Good Design, Suggestion of NEW Password): http://cdns.designmodo.com/wp-content/uploads/2013/01/Facebook-Sign-Up-Form-Wireframe-Template.jpg
• Hunch (Encourage Social Sign-Ins): http://cdns.designmodo.com/wp-content/uploads/2013/01/Hunch-Sign-Up.jpg
• Tumblr (Great Initial Call to Action in Signup Process): http://cdns.designmodo.com/wp-content/uploads/2013/01/Tumblr-Sign-Up-Form-Wireframe-Template.jpg
• Gumroad (Like Tumblr, Gets User "Doing" Wicked Fast): http://discover.usabilla.com/discovery/4f4ca7160a18e7004a000018
• Lovely (Keeps Telling User Benefits of Signup All the Way to the End): http://discover.usabilla.com/discovery/4f4ca6fadbe603374d00002a
• Mashape (Special Challenges/Requirements for Different Users...In This Case, Developers): http://discover.usabilla.com/discovery/4f4fa0930a18e71d50000080

Signup Process Overview

• User signs up
• User taken directly to their home page (including prominent profile progress bar)
• User receives quick and directed tutorial (e.g. new Google products/updates/first-timers)...including a "Got it" option to get right to their user dashboard.
• User receives confirmation email with validation email. Clicking validation takes the user to their profile page with a nudge to complete it the FIRST time only. All other times, user is taken to their dashboard.

[cmbirk]

Moved to wiki