Checkout Page for an E-commerce platform

Great Design Hamza. I will provide the feedbacks based on the below aspects

UX Feedback:

Progress Tracker Simplification:

• A lengthy checkout process can cause users to lose interest or abandon their purchase. To simplify, you can remove the "Summary" step and include shipping details under the "Address" step, streamlining the flow.

Forgot Password Option:

• If there's a login option, providing a "Forgot Password" feature is essential. It ensures users who can't remember their credentials have an easy way to access their accounts.

Guest Checkout Details:

• Allowing users to fill in their details during the "Address" step for guest checkout keeps the process straightforward and avoids redundancy. This ensures a smooth experience for non-logged-in users.

Contact Information Under Address:

• Adding a contact information field under "Address" eliminates the need for a separate step, reducing complexity while capturing all necessary user details.

CTAs in Login Tab:

• Having three CTAs below the login button is confusing as it implies users might skip steps and go directly to payment. Display payment-related CTAs only in the "Payment" tab to align with the progress tracker and avoid user confusion.

Product Card Appearance:

• If the product cards are intentionally greyed out as part of the design language, they appear disabled. Consider adding more visual cues or changing the color scheme to indicate they are interactive and available for selection.

Tax Information:

• Taxes are an important detail when pricing products. Ensure this information is clearly displayed so users have full transparency before proceeding to payment.

Discount "Apply" Button:

• The arrow icon next to the discount field is misleading as it suggests a next step. Replace it with an "Apply" button to make the functionality clear and actionable.

Surname to First Name:

• In the address form, replace "Surname" with "First Name" to align with standard naming conventions and user expectations.

Summary Display:

• The "Summary" section should be contextually relevant. If it is about the product ordered, it should display product details. If it’s about user details, it should summarize their input. Ensure its content matches its purpose.

UI Feedback:

Icons in Progress Tracker:

• Adding icons to the progress tracker enhances visual clarity and helps users quickly identify steps in the process.

Cart Summary Icons:

• The delete and edit icons in the cart summary are too small, making them difficult to locate and use. Increasing their size improves visibility and usability, especially for mobile users.

Input Field Height for Mobile:

• Input fields should have a taller height on mobile devices to accommodate touch interactions and improve accessibility.

Input Field Stroke Thickness:

• A thinner stroke for input fields can give a cleaner, more modern look while still maintaining clear visibility.

Good work, keep designing. All the best