#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


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


  • 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.




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.


Day #002 finished yeah!