Hubtill Authentication & Error Pages

Responsibilities

  • UX & UI Design
  • Prototyping
  • HTML, CSS & Javascript
  • Jinja2 Templating

A complete authentication system was required to access Hubtill apps. The design of this system was driven by one of the main initial requirements: to create a design that could be branded in to any of the customers or partners of Port80 Connected Technology.

As the registration process is normally the most tedious part to start using an application, the number of input fields were reduced to the minimum required by the security system specifications. In order to make the registration and login quicker, social authentication was introduced in the design as the first option.

During the desing process of the authentication pages, the form validation required special atention. If the validation system throws an error on the registration page, the user is indicated in which field the error occurred with a red alert box, and what would be the correct way to fill out the field. However, the way the errors are displayed in the login page is different. For security reasons, a single red alert box with a generic message ("Username or password is incorrect") is placed at the end of the form to make harder to potential attackers hacking an existing account.

Other pages designed to complete the authentication system were the Forgot Password page and the Reset Password page.

I did also design for Hubtill system error pages to communicate the user in a friendly way that an error just happened, and how to go back to the home page.

Desktop Registration Page
Hubtill Desktop Registration Page.
Hubtill Desktop Login Page
Hubtill Desktop Login Page.
Palmer and Harvey Desktop Login Page
Palmer and Harvey Desktop Login Page.
Mobile Login Page
Mobile login page.
Mobile Error Login Page
Mobile login page with error.
Mobile Registration Page
Mobile registration page.
Mobile Error Registration Page
Mobile registration page with errors.
Forgot Password Error
Forgot password page: error state.
Forgot Password Success
Forgot password page: success state.
Reset Password Page
Reset password page.
404 Server Error Desktop
404 server error desktop page.
403 Server Error Desktop
403 server error desktop page.
404 Server Error Mobile
404 server error mobile page.
403 Server Error Mobile
403 server error mobile page.