UI Challenge 02 - Credit Card Checkout

UI Challenge for a credit card checkout form. My goal is to always keep an aim for simple and intuitive design. The UI hierarchy here is intended to allow the user to visually advance down the page as they progress through the process.

When choosing your payment methods your previously saved cards are shown and you can select from among them.

If there are many saved cards then you would have been able to scroll up and down and the list would move under the line below "Choose Payment Method" as you went down. That's what that line is for, in addition to helping provide visual hierarchy.

Selecting a radio button will allow the "Proceed" button to be selected allowing you to advance. Selecting a new card brings up a simple form which allows you to input the information for that card to allow you to save that card info. You would then simply select that newly saved card to proceed to checkout.

Lastly the purpose of the app I conceived in this challenge was to be a tool revolving around sleeping. Such as helping to create better sleeping habits and keeping track of sleep cycles and hours slept. Thus dark, but soft, colors were chosen to reduce eye strain and to help reflect the app's personality and intended mission.

Background photo used: Photo by Jeremy Thomas on Unsplash https://unsplash.com/photos/E0AHdsENmDg