Password Bar
For Citizens Access, I reworked one of their Online Enrollment steps, keeping their legacy information but making a more usable experience.
Steps
I focused on the 4th step in the sign up process, creating a username and password.
Step 1 – Product Selection
Step 2 – Personal Information
Step 3 – Account Terms
Step 4 – Online Enrollment
Create a Username
Create a Password
Current Password Experience
Works ok but…
Long password instructions go away if there’s an error
Password bar jumps in and pushes content down when you start typing
Non-accessible password meter colors
Styling concerns
New Password Experience
Improvements
Pulled password instructions to above the password entry
Created default blank password bar state
Used accessible colors
New styling
