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

Hi everyone, hope you're all doing well!

I recently designed a checkout page for an electronics website, and I wanted to share some of the thinking behind it.

My main goal was to keep the design simple and clean, with a clear focus on transparent pricing — no hidden fees or confusing breakdowns. I also included a product image on the checkout screen, since seeing the item one more time helps reinforce trust and reassures users that they're buying exactly what they intended.

For the CTA button, I chose a contrasting color so it stands out immediately and guides the user toward completing the purchase without any guesswork.

One small detail I always pay attention to is the card expiration date field. It's a spot where users frequently get tripped up, so I added a placeholder example inside the input (e.g., MM/YY) to make the expected format obvious at a glance.

Would love to hear your thoughts and any feedback you might have!

Thank you!

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

Reviews

1 review


Hey Omar,

I like that you kept simplicity as a priority.

It’s also great that you identified the issue with entering the card expiration date. For consistency, it would be nice to include placeholders in the other input fields as well. Big plus wold also be the auto formatting as users type.

Instead of asking users to select their card type manually, a better approach would be to detect it automatically as they enter the card number. That removes an extra step and makes the flow feel smoother.

I’m also curious how your checkout would look if there were multiple products. It could be interesting to explore that scenario as well, just to show how your design handles a slightly more complex case.


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