Payment Modal

At work, I've been doing some payment and checkout related things, so for this sketch, I wanted to highlight a couple of interaction points that make payment input fields more accessible.

1. Inputting a card number updates the card type image on the right i.e. cards starting with a 5 show a Mastercard image.
2. Input fields retain the field header even after something has been typed (applicable to all input fields).
3. Layout the input fields and label them as seen on a card (CVC is on the back, but that's the general idea).

More by Craig Johnson

View profile