Tools - Sketch, Draw.io
Prompt
Design a sign up page, modal, form, app screen, etc. (It's up to you!)
Analysis
I studied the login & registration process for the last product I worked on. The overall experience left a little to be desired. The original user flow created too many waterfall moments; the UI was messy and dated; the registration form was much too long; form errors were not very informative and multiple errors were confusing as to which input they were associated with; the experience between the login form and the registration form was too disparate; and the platform functionality required additional configuration and modules for base functionality to even work.
New users are presented with two options, login or register. Login requires an additional modal to be configured and placed on a page to function (creating instances where users will have misconfigured sites and no one can log in) and when clicking the login button they are either provided a modal or jumped around the screen to autofocus on a form. If they fail, the page refreshes and there is a site alert that says they did not log in and they have to do the whole thing again. Registration, which can also be reached by the login module but not vice versa, directs the user to an entirely separate page and upon completion forces the user into onboarding.
Elements in this example are laid out exactly as they are generated via the DOM. Like items are not grouped together, button text is not explicit, there are no links to get you back and forth between forms, and errors are vague.
Approach
By updating the user flow; adjusting how the platform handles or displays the login/registration form; and using more current practices we are able to provide a cleaner and less frustrating experience to the end user. The first change to this was removing the requirement that a login block be placed on a page for the button to function and removing the need for a registration page by combining both forms in a single modal and switching between them as needed. When updating the forms I included social sign on options, reduced the amount of form fields, created more informative and lear inline errors, placed similar information in consistent areas, and created clear calls to action for each form.
Updated user flow removes the need for additional modules or pages for the user to sign in or register. Either button now presents the user with a modal that has a simplified form and allows users to switch back and forth between the two without the need for full page refreshes. Users who fail to login are not dumped back to the home page to start all over and can now be locked out after X number of failures. If a user decides to register and join the community they can now choose to skip the onboarding if they wish.
Social sign on reduces complexity for users by allowing them to use the same sign in across multiple sites. I included the ability to show the password to help with accessibility. Extra info like links to other forms or pages are now all at the bottom of the form field for both login and registration. For registration I removed the additional form fields and kept it at just email address and password. The rest of the info can be gathered during onboarding if needed. Errors are now inline and more informative to provide more clear validation changes for users.