Daily UI — 2nd Challenge: Credit Card Checkout
This is my design proposal to the second Daily UI Challenge:
Navigation:
Navigation indication is a big part of usability. It shows the system state, current location and navigation possibilities.
At the top part the navigation indicators show where the user is in the proccess of checkout, what is already completed and how far he is from completing the checkout.
The Products section is where the user would see its shopping cart and choose quantities of certain items, apply promo codes, etc.
The Address section is pretty clear, it is the section where the user would provide the shipment address. The payment section is the one i’m presenting. The final section would be confirmation, where the user could see the products he chose, the address and payment data provided and has the option to go back and edit anything before finally confirm and make the order.
The colored icons in combination with grey labels(products and address), indicate what is already complete. The colored lines between steps indicate completion and direction. The combination of both icon and label colored indicates current step. And obviously, label and icon in greyscale indicate steps further.
Since online payments create an anxiety on users, they should be informed that some sort of security is at place while in the process of providing personal and financial data. A simple message like this, makes users relax more and enjoy the checkout process, which is already a pain point in the process of shopping.
The payment methods choice were put in this design, since a real world application would offer much more payment methods, rather than the credit card option alone.
I chose the simple approach of a card carrousel since they are elegant, big targets that makes tapping pleasant, and they are functional in this case.
I used the classic “credit card like” form, which is so common nowadays. It works, it looks nice and it gets the job done. Different from some application i’ve seen, i used the, more usable, dedicated input labels instead of the “placeholder label” that disappear on input.
Since the credit card information needs billing address, this section had to exist in this flow. I chose radio buttons so the user chooses to use the same address as the shipment provided before in the checkout process or to provide a different address. Big input fields, good white spacing and clear labels to make it less stressful to type more info during the checkout process. The Zip Code field comes first so that some fields are filled automatically when it is provided.
I chose to put the navigation actions at the bottom because is the place where the user will be when he/she has done with the section, also because the bottom part of the phone is easier to reach with the fingers. I put a message below the “back” button informing the user the if he goes back, he won’t have to provide data that was already provided. In the foward button, i used the “Next” label because the word “Done” or “Finish” would feel like if pressed, it would finish the whole checkout process.
I’m always trying to imagine how some interaction would happen in the real world, filling the gaps in the design that would make it usable in a real product. Thanks for taking the time to read my article. Please send some feedback !
