We have a web application whereby a user's profile screen uses a card-based layout. One of the cards allows users to update their password.
Our team is split on how the password card should be laid out. Here are the 2 concepts we came up with.
download bmml source – Wireframes created with Balsamiq Mockups
Version 1 - This is more of a 2 step process built into the card. The current password is verified to ensure you're you before you go on changing things. If the current password doesn't validate, you don't have to re-enter the new + confirm password fields.
Version 2 - Puts the 3 fields all into 1 step for the convenience factor. Could possibly produce cognitive load because you are putting old and new stuff in the same place. It is also 3 password fields in one card which could be confusing to some and makes this card visually taller than other cards near it.
Is there a better way to do this? Is there 1 way that is better than the other, and why?