Design a Checkout Page

What I like the most about your approach to the checkout flow is how you placed “Order Details” into chunks under dropdowns for contact, delivery, and payments. It makes things clearer than showing everything by default. Whether it’s easier to use or not would need testing 😄 since I’m not sure if everyone will recognize the caret as a cue that more fields are hidden under a single word. Still, visually it looks neat and tidy.

On typographic alignment and consistency, the “Order Details” heading is slightly indented compared to “Shopping Cart.” Is that intentional? Also, the “subtotal” label under “Order Summary” is written in lowercase, while the others use uppercase. I can’t tell if that’s deliberate or a mistake.

The visual hierarchy is working, but I’d argue the section headings and prices could use something softer than pure black. Toning them down would keep clarity without everything competing at the same level.

Behnaz, the layout checks out and is ready to ship!

Behnaz, your checkout flow looks super clear and trustworthy—maybe just refine small details like alignment and text consistency, but overall it’s a solid, user-friendly design!

Behnaz has designed a clean and clear checkout page that makes purchasing simple and trustworthy. The step by step flow is easy to follow, with intuitive forms and helpful guidance for users.

Microcopy supports clarity and confidence, and the visual hierarchy ensures information is easy to scan.

Including a user flow and mobile templates shows a thoughtful approach to usability and presentation.