Daily UI #2/100 : Credit Card Checkout

Day 2 of this daily challenge. If I stick through with this, it’ll be the most disciplined thing I’ve done in my life!

Today’s challenge involves designing a Credit Card Checkout. Decided to keep it simple to include data on JUST the necessary information. The following information which could be useful, was omitted although they would be useful:

  1. Order Summary — Information about the thing you’re ‘Checking Out’ for. Price etc.
  2. Back or cancel options?
  3. Billing Information that some sites ask for e.g. Billing Address etc.

Without further ado, my work.

Inspire by post this DesignModo Article

I designed 2 versions, one for more traditional layout for mobile, and another more experimental layout for a wider screen.

From this DesignModo Article, I learnt that at the checkout stage, users need to feel secure and safe, and just having an icon of a lock and reassuring the user of data security would help.

I honestly don’t know what ‘Secure 128-bit SSL encrypted payment’ means (I should find out), but it does make things look a little more legit.

Some subtleties:

  1. Input fields have a slight inset shadow to give a feeling of depth, and help prompt the user that the fields are usable. Using a completely flat design without shadows could work, but I decided to try something different from what I usually do this time.
  2. Used a slight gradient on the Call-to-Action as well, with the same rationale as above.
  3. Added a drop shadow to the cards to give additional feeling of depth.
  4. Users’ credit card provider would be automatically detected from the number they key in. It seems to be something quite common these days? (Just realized I didn’t have the icons for the traditional layout. Better be more careful next time.)
  5. I left the Expiry Date field as a text field instead of a dropdown. This has benefits (user just needs to type 4 digits), and drawbacks (less accuracy).
  6. Used the same Blue Hue (203) for most elements to create that unified color scheme. Seems to work quite well!

Another small bit of experimentation. Started with a card design like the left, then moved on to the design on the right.

Point to note, the left design used grey borders for input fields, which made me process (1) White text field (2) Grey border (3) White card.

Right design made me process (1) White text field (2) Bluish card. I figured that this works better since it requires less visual processing.

Ok, that’s it for today. Goodnight.


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.