Checkout Experience Optimization

Create Your First Project

Start adding your projects to your portfolio. Click on "Manage Projects" to get started

Checkout Experience Optimization

Role

Principal UX Designer & Researcher - VF Corporation

Goal

To create a seamless, frictionless checkout experience that is highly usable, especially on mobile, and allows for a fast and simple conversion.

Insights

• Updated UI throughout checkout funnel.
• Utilized checkout best practices and google analytics to tweak where needed and leave high performing areas alone
• Added confidence boosters on cart to encourage the consumer to advance to the next step.
• Auto-populate fields wherever possible utilizing browser saved data, linked data (zip code determines city), address lookup tools, etc.
• Input fields are easier to review and edit and using inclusive design principles.

VF Team

Carson Monroe | UX Design

.....................................................

As the UX lead for the Checkout Experience Optimization project, I was tasked with improving the e-commerce checkout flow within the constraints of a legacy platform. Despite a rigid backend systems, I led the initiative to streamline the purchase process, reduce cart abandonment, and drive measurable improvements in user satisfaction. By working cross-functionally with product, engineering, and analytics partners, we identified key friction points in the flow and prioritized enhancements that would deliver the most impact without requiring significant platform changes.

One of the biggest challenges was modernizing the user experience without overhauling the system architecture. The UX team approached this by focusing on high-leverage UX improvements: simplifying form fields to minimize cognitive load, introducing a clear progress indicator to set user expectations, and implementing trust signals—such as social proofing in the form of user generated quotes and value statements, alerting the consumer of return policy, shipping time, giving back and/ recycling efforts—to reduce hesitation during checkout. I also advocated for mobile-first refinements, ensuring the interface was responsive, touch-friendly, and easy to navigate on smaller screens.

To further reduce barriers to conversion, we added a guest checkout option as the default option, with the option to sign in — expanded support for multiple payment methods, including digital wallets and buy-now-pay-later options—all without requiring a full redesign of the payment system. Small, strategic wins like improving inline error messaging and adding sticky call-to-action buttons helped users complete their transactions with confidence. Throughout the process, I championed a user-centered approach, using research and testing to guide decisions and validate design iterations.

This project is a strong example of leading through constraints—finding creative, low-lift solutions that still create significant value for users. By focusing on what we could control and aligning improvements with user needs, we were able to meaningfully elevate the checkout experience and demonstrate the power of UX even within technical limitations.

photo of checkout screens and a funnel analysis on desktop, laptop and mobile device

Checkout Screens and Funnel Analytics

The new checkout experience was rooted in finding a seamless, frictionless user journey. We dove deep into the existing analytics to find drop off points and leaned on checkout best practices - with the ultimate goal of giving the consumer confidence to complete a purchase on the website.

Checkout timeline - UX focused

The UX team kicked off the project with Smartwool and Alta at the end of January, We discussed painpoints & goals. As the principal UX designer, I created a timeline for the team to ensure milestones were met and expectations were set with brands and our product and engineering squads.

image of a Baymard study showcasing abandonment reasons in the checkout funnel

The Trouble with Shopping Carts

During our discovery, I learned Cart is where all the action is, or more specifically, lack of action. This is the place where consumers drop off the most. As you can see with the Baymard chart, reasons for drop off are varied, but demonstrate the need for more clarity, trust and simplicity.

Smartwool and Altra Checkout funnel

image of existing cart and checkout screens, along with top priorities in the re-design

Existing Cart & Checkout Screens

The starting point for this project. You can easily see the need for a better UI and page hierarchy. Our desired UX outcomes included increasing the conversion rates and reducing the cart abandonment by; reducing time to complete purchase, decreasing bounce rate, optimizing the mobile experience and overall checkout performance.

image of new checkout flow and wireframe explorations on a mobile device

Proposed solution - wireframes and checkout flow

With the sign in gate removed, our new user flow was simplified: Cart > Shipping > Payment > Confirmation. Streamlining the pages and reducing page clutter was priority.

image of improvements on the cart page for both smartwool and altra

UX/UI Improvements - Cart

Notable improvements in include: Quantity Stepper in place of a dropdown, Product card adjustments with larger images, text styling and alignment. A new Save for later feature, allowing users to save items in cart, thus allowing users to interact with the cart as they expect (according to Baymard studies). Adding single click upsell items allows users to add last minute items to their cart and lastly adding in new confidence boosters in the form of user quotes and unique brand offerings, like free shipping and returns information, loyalty sign up and climate pledges like sustainability or planting a tree with purchase.

image of improvements on the shipping page for both smartwool and altra

UX/UI Improvements - Shipping

Notable improvements in include: new sticky cart on mobile. The old experience had cart at the bottom of the page, causing users to search for their items and possibly abandon the process at this step, the new sticky experience allows users to see cart items at a glance and edit as needed. A new high impact, time saving experience was in the shipping address fields, where we connected to Google API and allowed the user to find their address before having to type in all details. If the address was unfound, there is a manual entry text link available.

image of improvements on the payment page for both smartwool and altra

UX/UI Improvements - Payment

Notable improvements in include: Displaying shipping address at the top of the page, moving this information, helped the consumer feel more confident the site had the correct address. We also honed in on a cleaned up payment section. Having the clearer payment options displayed in a radio button list, ensured users could understand and trust the website. Previously payment was a bit of a Picasso painting, with fields scattered throughout the page area, not in a logical order.

image of improvements on the confirmation page for both smartwool and altra

UX/UI Improvements -Confirmation

Notable improvements in include: a much needed UI refresh.

.pro-gallery-wix-wrapper {display: block !important;} .pro-gallery-wix-wrapper .gallery-item-container {opacity: 1 !important; display: block !important;}