Credit Card Checkout

Hello !
This is my submission for Daily UI :: 02 - A credit card checkout page.
The design process took longer than expected because I wanted the user to have a smooth experience during checkout while also not compromising on the aesthetics of the page. So after designing atleast a dozen such layouts, I finally decided to go with this one.
This submission consists of 4 pages in total:
The first page is cart page that shows the products in cart, shows your total bill amount, let's you select the delivery address and add a payment method (add a new method in case of a new user but the existing user can choose the saved payment method or change it according to their preference). Here the checkout button has been inactivated because the payment method has not been chosen.
The next page lets you select the payment method (credit card), add the card details and save the card for future use.
The third page is basically the first page but in this case the payment method has been added and the checkout button has been activated.
The final page is the order confirmation page and it will inform the user if the order has been placed or not.

Thank you for taking a look at this ! Your feedback will be highly appreciated.

Cheers :)

More by Pranita D

View profile