#002 Daily UI – credit card

Day 2/100

Alright! Today we tackle the credit card screen. You see that screen if you are already fine with your basket and ready to see the stuff in your bare hands.

In the process we find ourselves here:
add items to cart -> choose payment -> enter credit card -> agree & pay -> confirmation

dailyui_002_result

Info's to play around with

must have:

  • saved card:
    • card number
    • card holder
    • expire date (info: where to find)
    • CV (info: where to find)
    • add new credit card
  • switch payment method
  • confirm button

optional:

  • card scanner
  • payment progress
  • order summary
  • subtotal price
  • tax & fees
  • shipping costs
  • total

Color styles

Once the color palette is fix, it's so much fun to play around with. My favorite is the middle one. It's clearly readable and fit's more to common shops.

dailyui_002_colors

 

 

An idea a had while working: A modal opens on click to the share button. There you got a little preview of your shopping cart you can send to your friend. Would be nice to add a function to share only specific items although 😉 The bottom bar could be hidden probably.

dailyui_002_result
dailyui_modal

Day #002 finished yeah!