Daily UI 002 - Credit Card Form

It's interesting, forms are one of those things you use all the time but it never crosses your mind that someone had to think about what it would look like. 

I thought I could simply sketch one out and be done with this challenge, but I ended up doing a lot of research. I had to think of the pain points of the user, the necessary information in the form, and some intuitive solutions to common input information. 

One thing the users needed to know, was how much they were going to be paying and what payment methods were accepted. I give you...the first screen. The payment amount is large and clear, and the method (shown in text and visually) you choose is highlighted by a border color.

Let's say you chose to use a card. It might not be your card, or maybe you handed the phone over to your mom/dad to enter their information. That's why I thought the second screen should still show the total. Each input area has a clear label and a placeholder showing the accepted format. The pay button is disabled since there's no information yet, but there is also the option to simply scan the card with your camera. 

If you've chosen to enter your information manually (I'm not completely comfortable with taking a photo of my card either) the active input will be highlighted with a border. It's intuitive too! When you begin the card number, the image of the card issuer will appear and the placeholder will change to that format if it differs. You also have the options to go to the previous or next input box above your number pad.

Now that all your information is in, you can review it and click to pay the amount securely.

Once your order has processed you get a confirmation notice and number. You have the option to email a receipt to yourself and finally, close the page. 

Of course there are other things I could've included in my design, like the form for the billing and shipping information, what happens when input information is incorrect, and how do I validate correct information? But this was a quick challenge (if you want to call three hours quick). Check back tomorrow for the next one.

~ Lisa Lou