<?xml version="1.0" encoding="utf-8"?>
Open full project

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.

Tools used

Figma

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

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:

  1. Keep the font size consistent. Phone label is larger than other labels.
  2. 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
  3. Also regarding accessibility, use something more than changing colors in the top navigation (Address / Shipment / Payment / Confirmation). For example, underline or bold.
  4. 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.
  5. 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
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>