Simplified Checkout Design
Solving Cart Abandonment Issues
This redesign streamlines the checkout for first-time guest purchases process by reducing common friction points, such as long forms or confusing steps. The mobile experience is optimized with fewer steps, and a visible order summary is always present to avoid unexpected costs and multiple shipping and payment option for the client convenience.
- Minimal Input Fields: The design reduces the number of fields to the essentials, providing immediate feedback for any errors, particularly for address entries.
- Breadcrumb Navigation: Incorporating breadcrumbs enhances transparency by showing users how many steps remain until their order is placed.
- Quick Login Option: A rapid login feature at the start of the checkout process allows returning customers to access their accounts easily.
- Multiple Shipping and Payment Options: Providing various shipping and payment methods enables quick selections for customers.
- Persistent Order Summary: Keeping a visible summary of the order helps prevent unexpected charges during the checkout process.
- Usability: Visual hierarchy and generous spacing enhance scannability, with clear typography for fast decision-making.
Reviews
1 review
Hey, Paulina, great job simplifying the user experience. In a marketplace, this is crucial; it can be the difference between completing a purchase and not, so it's great that you considered this and could make the purchase experience smoother.
I recommend a few tweaks in the UI:
- Keep the font size consistent. Phone label is larger than other labels.
- To meet accessibility requirements, the recommended minimum font size is 16px (help texts can be smaller) https://uxdesign.cc/guide-for-designing-better-mobile-apps-typography-5796495ef86f
- Also regarding accessibility, use something more than changing colors in the top navigation (Address / Shipment / Payment / Confirmation). For example, underline or bold.
- In the payment options, use the same radio button you used in the Shipping options. The selected radio on the Credit Card does not look like a selected radio button.
- Make the Payment form (the one that opens when you select Credit card) consistent with other forms (the font should be Arimo).
That's it, keep up the good work!
4 Claps
Average 4.0 by 1 person
You might also like
Project
edX Sign-Up Page Redesign
OverviewThis project focused on improving the accessibility and user experience of the edX sign-up page. The original design had usability a
Project
Beautify Login page WCAG principles
This accessible signup form design follows WCAG principles by ensuring the interface is perceivable, operable, understandable, and robust fo
Project
Design Prioritization Workshop
A structured session to evaluate product ideas, prioritize high-impact features, and define a clear implementation plan.
Project
Sanyahawa - Personal Portifolio_login page
Used Figma in this design as my core tool. Iconify brilliant place to get icons and vector for the designs and a little twich to my image l
Editors’ Choice
Project
Uxcel Halloween Icon Pack
🎃 Introducing the Uxcel Halloween Icon Pack! 🎃 This custom Halloween-themed icon set was created to enhance the seasonal user experience o
Project
eWallet App Development Project
✨ Experience the future of digital payments with our innovative eWallet App design! Our concept combines powerful fintech capabilities with
Interaction Design Courses
Course
UX Design Foundations
Learn UX design fundamentals and principles that create better products. Build foundational knowledge in design concepts, visual fundamentals, and workflows.
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.