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
1 review
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!
18 Claps
Average 4.5 by 4 people
You might also like
Project
Ithnain Management System
Creating a Design system for a management system for a healthcare app. Starting from understanding main functions for every user type by lis
Project
Jeel app website wireframes
Redesigning Jeel website for many Business Goals/ User Needs: Shows what the application is about. What are the benefits users can get from
Project
ALT.Studio Color System
The color palette of ALT Studio was developed to reflect the brand’s personality and values. The bright primary colors (Lime Green, Solar Ye
Project
2 PAY
2Pay Workshop: Building the Future of Cross-Border Transfers
Project
Design Workshop Plan
It's part of the work I'm doing for a while Part 1 - Research Part 2 - Prototype
Project
Visit Sri Lanka Mobile App
Problem StatementTourists and local travelers face difficulty finding accurate travel information, planning trips efficiently, and booking r
Interaction Design Courses
Course
UX Design Foundations
Learn the essentials of UX design to build a strong foundation in core principles. Gain practical skills to support product development and create better user experiences.
Course
Introduction to Figma
Learn essential Figma tools like layers, styling, typography, and images. Master the basics to create clean, user-friendly designs
Course
Design Terminology
Learn UX terminology and key UX/UI terms that boost collaboration between designers, developers, and stakeholders for smoother, clearer communication.