Design + Code

Atlas Login Password Update

  • logo of Adobe XD
  • logo of HTML5
  • logo of CSS 3
  • logo of Sass
  • logo of Angular
  • logo of Bootstrap
  • logo of Font Awesome

What was the problem?

Users and service coordinators (customer service agents of Atlas) had many complaints regarding the password process on Atlas. In its original configuration, users would enter their password. If it wasn’t correct, the user could continue to make a handful of attempts before being locked out. The only way to amend this would be to call or email a service coordinator to have them manually unlock their account. Alternatively, users could opt to reset their password, but they would be faced with the same issue of having to wait until a service coordinator to complete the password reset process on the backend. This caused frustration with the users and unnecessary busywork for the service coordinator.

My goal was to implement some password UX best practices to help reduce the overall amount of password lockouts and password reset requests.

How Did you Solve It with UX?

  • On focus, an interactive password guideline appears, helping the user remember what constitutes a validated password.
  • Added show/hide functionality so users’ can visually see what they are typing as they are entering their password
  • The CTA would remain disabled until the user entered a validated email address and password.
  • Added clear, concise, meaningful, actionable inline error messages

Reforming Login Inputs

Default/On Load

Welcome to Atlas Email Address * Password * Login

Entering Email Address

Welcome to Atlas Email Address * testemail@gmail Password * Login When the email address input has been touched and not validated, theinput UI shouldchange toreflect an errorstate ValidationRules: • “@“ sign• “.”• domain after “.”

Validated Email Address/Password Input On Focus

Welcome to Atlas Email Address * testemail@gmail.com Password * Login Inline UIerror indicatorsdisappear aftervalidation Passwordrequirement list:Appears whenpassword inputhas focus When the password input has been touched andnot validated,the input UI should change to reflect an error state

Entering Password

Validated Email and Password

Default/On Load

Welcome to Atlas Email Address * Password * Login Forgot Username or Password If you need login assistance, please email support@jclttime.com or call 1-800-272-2707. Show

Entering Email Address

Welcome to Atlas Email Address * testemail@gmail A valid email address is required. Password * Show Login Forgot Username or Password If you need login assistance, please email support@jclttime.com or call 1-800-272-2707.

Validated Email Address/Password Input On Focus

Entering Password

Validated Email and Password

Welcome to Atlas Email Address * testemail@gmail.com Password * Show Login Forgot Password If you need login assistance, please email support@jclttime.com or call 1-800-272-2707.

Adding Show/Hide Password Functionality

Show/Hide Password Default

Welcome to Atlas Email Address * testemail@gmail.com Password * Show Login Add “show” button to Password input. Upon clicking the button, the password is revealed in plain text.The button text is changed to “Hide”.

Show/Hide Password 2

Welcome to Atlas Email Address * testemail@gmail.com Password * Hide TestPassword12!! Login Note: Buttontext switchedto “Hide” Upon clicking the button, the password input toggles to default look.The button text changes back to “Show”.

Show/Hide Password Default

Welcome to Atlas Email Address * testemail@gmail.com Password * Show Login Forgot Password If you need login assistance, please email support@jclttime.com or call 1-800-272-2707.

Show/Hide Password 2

Welcome to Atlas Email Address * testemail@gmail.com Password * Hide TestPassword12!! Login Forgot Password If you need login assistance, please email support@jclttime.com or call 1-800-272-2707.

What was the result?

  • Significant increase in users’ successful login attempts
  • Happier service coordinators due to reduced number of manual password resets
Entering a password according to various requirements

What was the result?

  • Significant increase in users’ successful login attempts
  • Happier service coordinators due to reduced number of manual password resets
Entering a password according to various requirements

What were my contributions?

  • Wireframed and prototyped the new login page design
  • Added more helpful, plain-language inline error message
  • Provided the HTML, CSS/SASS, Angular 6 code via the Atlas Design System