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
Sneak
I designed a responsive desktop checkout page for Sneak, a modern sneaker e-commerce platform. The design focuses on reducing cart abandonme

Project
Heuristic Evaluation - Booking.com
OverviewI examined Booking.com's desktop web site to find usability problems that could affect the hotel booking experience. Using Nielsen's

Project
User persona for TikTok
RationalePlatform & DevicePlatform: TikTok Device: Android Market: Brasil. Project PreparationThe project began with the systematic organiz

Project
Empathy Map - Revolut
OverviewI analysed Revolut's mobile app platform to understand user pain points and create actionable insights for improving the digital ban
![UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]](https://users-content.uxcel.com/451aa544-1b86-419f-9120-5a6ac83f023f/briefs/universaltaxprofessionals-website-revamp-informational-website-thubmnail-8090-1756604786988.jpeg)
Project
UNIVERSALTAXPROFESSIONALS WEBSITE REVAMP [ Informational Website ]
Universal Tax Professionals (often abbreviated as UTP) is a U.S.-based tax and accounting firm that specializes in assisting American citize

Project
Satori Reader-Dark & Light Mode Empty State Pages
Satori Reader is a reading focused learning app for intermediate Japanese learners, despite their many offerings and huge library their bran
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.