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

Hi! I redesigned the checkout out flow of Ukrainian bookshop.

Key points of solution:

  • User can see filled data even for collapsed view,
  • Here are 3 main steps of flow: contact information, delivery and payment that you can collapse.
  • If you are logged-in user, contact information and delivery details will be autocompleted.
  • Required fields are marked with red "*",
  • The checkbox for adds is unchecked by default.
  • All elements of UI have hoves and focus states.

Looking forward to your comments and reactions 😊

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

Reviews

2 reviews


Thanks for your sub, Mariia!

I like your proposal with the accordion fill-in. They look clean and easy to use.

  • What I would love to see is some error statements.
  • what is the reason for using a red color on the CTA button? do you think this can be misleading with destructive action?
  • i would love to see also inactive buttons for incomplete actions

Great vibes only!

Thank you very much for your review! I used a red button for the following brand colour. But maybe it's better to use more neutral color like black

Hi Mariia

From a UX standpoint, a bookshop checkout flow has a unique opportunity: it should feel calm and trustworthy, not rushed. If your structure keeps the process simple and distraction-free, that’s a strong instinct especially for something as straightforward as purchasing books.

What matters most here is clarity. Users should always know where they are in the process, what they’re paying for, and what happens next. If your design communicates order summaries, shipping details, and payment steps transparently, that builds confidence and reduces abandonment.

To refine it further, I’d look at moments of reassurance delivery expectations, secure payment cues, or subtle confirmation feedback. Checkout isn’t about creativity; it’s about removing doubt. Overall, this feels grounded and conversion-aware, with a solid understanding of transactional UX.


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