Cart + Checkout Redesign

At Baymard we’ve tracked the global average cart abandonment rate for 9 years, and it currently sits at 69.2%.
— Baymard
 

One of the biggest tasks at ModCloth was to redesigning the checkout experience. Through several e-comm launches, blog + podcast posts, and research, I was thrilled to get to hop on this project.

simple design improvements to consider

  • Use a visual indicator to communicate the steps

  • Standardize all field and form entries; mask in necessary fields (credit cards, phone numbers, etc)

  • Only ask for necessary information + combine where necessary

  • Allow all forms of payment in the cart + in the billing section

Approved designs (in development currently)

Artboard.png

CART DESIGN IMPROVEMENTS

  • Enabled the user to edit directly from the cart

  • Added more forms of payment to cart page

  • Eliminated any un-needed information and fields

  • Streamlined the forms for easy readability

 
Artboard Copy.png

Shipping Design improvements

  • Improved the functionality of the field entries

  • Designed prominent step indicators that are tappable

  • Added a checkbox for “Billing same as shipping”

  • Designed a stronger visual for shipping options

  • Continued with the sticky checkout button throughout the entire process

 

Billing design improvements

  • Rearranged the payment method above the billing address (which is now folded in the checkbox).

  • Created branded buttons for Visa Checkout and PayPal

  • Folded the shipping information into a card-like format

Artboard Copy 3.png
 
Artboard Copy 4 (1).png

Review design improvements

  • All information is organized in a card-like manner for easy scanning

  • User is still able to edit shipping/billing/billing address for any last minute changes