<?xml version="1.0" encoding="utf-8"?>
Open full project

This design neatly splits product details and payment info across two columns, making your journey from browsing to buying smooth and straightforward. I keept things clear and simple, with straightforward labels for payment options and a call-to-action button that shows exactly how much you'll pay, ensuring transparency.

The calm design, with a selective color palette and ample whitespace, highlights key actions like completing your purchase. It's accessible to everyone, meeting WCAG guidelines for a hassle-free experience for users of all abilities.

I thought to prioritize security and privacy, with encrypted payments and minimal, necessary data collection. This setup is all about making your online shopping experience easy, clear, and secure.

Thanks for checking it out.

Share your insights — leave a project review and help others grow their skills

Reviews

4 reviews


Hey Dan,

I love this design so much!

You put a lot of attention into the details and the Practical UI book is an extra touch.

However, I was expecting the Figma link to be a prototype, asking for too much I guess, but I couldn't get enough of the neatly designed checkout. It looks so real I want to interact with it, haha. And also cause it's under the interaction design category.

Regardless, this is beautifully done!


Our aim for checkout pages is to create designs that are hassle-free, straightforward, and follow the industry standard, such as Stripe Checkout, Gumroad, and LemonSqueezy. This design also follows the best layout for checkout pages. However, I find it unnecessary to choose the card type when the system automatically detects the card type once you enter your card number. Additionally, I suggest making the discount code part more prominent, maybe by using a different container background color or something similar. Overall, the design is exactly what you would expect when purchasing something online and proceeding to checkout. Nice work!


Very nice and very clean!


Nice work Dan. The layout is cool and seems easy to scan through. Keep up the great work!


25 Claps
Average 5.0 by 5 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>