Bookshop check out flow
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 😊
Tools used
From brief
Topics
Share
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!
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.
You might also like

Loginino

Notification microcopy - Project

El Mandoub-GovTech App

MalishaEdu Counselor Workspace

Goal Creation Flow











