Create a landing page for user to complete the transaction process by filling in the payment details.
Date
2023 February 26
Tool
Figma
Brief
Design a credit card checkout form or page. Don't forget the important elements such as the numbers, dates, security numbers, etc.
Find Reference
I checked my frequently visited websites and reviewed them for reference.
Image 1 - Reference
List of Information
Header: Cart > Shipping > Payment > Confirmation
Title: Payment Method
Description: Choose from a range of secure and hassle-free payment options to complete your purchase.
Payment option:
PayPal
VISA (Debit/Credit Card) Card number: xxxx - xxxx - xxxx - xxxx (mark checklist logo) Name Cardholder: MIA CHELSEA Expired: MM/YY Security code: xxx
Button: Save
Cart Details
Design
I split the landing page into two sections:
Payment Method (on the left) After creating the Payment Method, I moved on to work on other elements and later returned to review and refine the details.
Cart Details with illustrations (on the right) Cart Details would be set on the upper right as a reminder on the total cost of the order. For the illustration, I used the concept of a transaction where someone gives money and someone receives a product and to create the hand in the illustration, I captured photos of my own hand as the references.
Image 2 - Hands reference for illustration
Landing Page
Below is the final look of the landing page, with simple and minimalist concept.
