Submit Credit Card Flow - GIF Animation

Optimize the keyboard shortcut and maintain the space with clarity input and progress indicator is few goals to craft this flow. Also, the idea is how user can feel secure when input the form is you can't rollback to previous form, actually not sure enough are this solution is the best with reset all the filled form rather than back to previous form. The credit card form is generic enough to understand, hopefully acceptable when user reset the field.

The enhancement also provided by giving transition effect between card type when input the number and clear swipe when reset the card after they done related action.

Thanks for Ramakrhisna for his inspiring shot for the reference at his checkout flow - card and well crafted icons and roboto font from material design. Ah, also the most popular monospace font, PT Mono from Paratype doing really good job here.

Feel free for any feedback and please bounce them in comment section, thanks for the appreciation and enjoy your weekend 🙌🏼

Thanks for Ilya Famenko to make this to live! you can check the GitHub here

Follow me for more updates :
Twitter | Behance | Instagram

Posted on Jan 15, 2017

More by Azís Pradana

View profile