DailyUI Challenge - Day 002: Checkout Form
Posted by
![Blog Doctor]( "Blog Doctor")
The DailyUI Challenge - Day 002 of 100.
Challenge: Create a Checkout form / page.
A Checkout form or page can either make a user pay or make the User leave before even buying from you.
Creating one with flexibility and great User Experience is a secret to closing deals even while you're asleep.
My Checkout UI Design
 |
| Checkout Form Design - #DailyUI |
The Design Concept/Process
I decided to create a pop-up checkout form where the user is trying to purchase a smart watch.
* The Left Side:
This side color confirms with th overall website color to maintain consistency and on the panel, a list of all items on the CART is placed for review by the user. The User can remove an item if not needed.
The Total payable price is also made auspicous as a law of inclusive design.
* The Form (Right Side):
There are several ways you can design the checkout form, I decided to go for clarity.
Card Chooser
Name
Card Number (without spaces) : This would aid newbies who haven't used a check out before to be able to fill it without getting any error.
Exp. Date: You might have MM/YY. But, a User might not know what that means. So using Exp Date, which is same as what is written on the card, it would be easier to fill it without thinking too much.
CVV: This is the security which is found at the back of the card.
Check: This is a check button to save the card to subsequent use.
Button: The Pay Now button reminds the User that by clicking this button, you would be charged and it is instant.
* Direction:
It's always good to let Users know that they can always go back and continue shopping, hence the redirect button. Know one likes to get lost!
Please kindly rate, comment, criticise, correct and contribute to this UI design. Day two DailyUI Challenge done.
A like/follow on my social media handles and DRIBBBLE would be awesome:
I Care!
#DailyUIwithIfeanyi
#BeYou100percent
Newer Posts
Newer Posts
Older Posts
Older Posts
Comments