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
L I N E A - Minimalist Fashion Brand
This project explores the creation of a high-impact landing page for LINEA, a minimalist fashion brand concept. The design focuses on clarit
Project
Video Streaming Service wireframe: Spoil-free mode and Interactivity
For this project brief, I considered how watching movies has changed recently. While a movie gets released on a streaming service, people wi
Project
Accessible Signup Form for SaaS Platform
Form
Project
404 for Personal Website
Hey Friend or Acquaintance, Happy Sunday Night, let's get back on that grind tonight and support our growth with a small movement of buildin
Project
SIPALA - Attendance, Leave, and Activity Management System
Project
Pawtify - Responsive Landing Page Brief
Description This is a landing page for a fictional pet salon called Pawtify, a modern, friendly pet salon brand designed to make grooming en
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.