02 Credit Card Form

Hello All,

Day 2 for daily UI challenge. This time it's a credit card form. I liked the idea of seeing a credit card template on the payment page and wanted to play with it. That said, I had issues trying to come up with a proper bus card design. I turned to existing examples in my city as well as other cities. I'm not entirely pleased with the way the final bus card turned out, but that's the idea of these exercises. More practice for me! I also wanted to try using more muted colours for today's screens since day 1 had such vivid colours.

Since I never dove into credit card forms before. I figured it would be similar to other forms. I had to investigate apps and websites for examples of credit card forms and use them as inspiration for my screens. I spent a bit more time with the visual design since I found there were a bit more components to it than the signup page. One of the things that the form needed to have was the ability to take a photo of the card and have the information populated into the fields. It's such a handy feature and my form needed to have it.

Happy to hear feedback on my screens.

Credits:
Bus by Bartama Graphic from the Noun Project
Camera Icon - FeatherIcon
AMEX - IconScout
Mastercard - IconScout