Day 02 - Credit Card Checkout

Daily UI 100 Days Challenge

Credit card checkout

💬 Prompt 

Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.

🎯My approach 

I decided to create a mobile version of an online clothing store, presenting the credit card checkout page as instructed. I wanted to integrate all the key elements, such as product details, shipping costs and of course the credit card form —all combined on a single page for a streamlined user journey.

🎨Design focus

• Keeping a minimalistic structure and visual consistency. 
• Visible payment controls/no hidden features, which means that the user has complete control over the product details and the payment options during the purchase.
• Seamless credit card integration with clear instructions and display of the total cost upfront to build trust in the users online transaction.

Low Fidelity Wireframe -> High Fidelity Wireframe

Check out the mockup in Figma here!