OVERVIEW

Problem
The markdown and flash-sale-driven apparel and home goods market is highly competitive. In this space, a seamless cart and checkout experience is essential to driving conversions and creating a successful user experience.

Goal
Staying competitive requires a clear understanding of what enhances the user experience and what creates friction. I conducted a detailed competitive analysis of e-commerce sites in similar market spaces to evaluate cart and checkout usability, identify key features, and surface both best practices and pain points along the user journey.

Background

I was brought on to collaborate with a cross-functional team of product designers, UX designers, product managers, SMEs, and engineers to help craft a world-class, user-centric e-commerce experience for the Nordstrom Rack and HauteLook brands.

Our "Cart & Checkout 2.0" initiative focused on enhancing the purchasing experience through a more intuitive and visually engaging design. To inform our approach, we conducted a competitive analysis of six peer retailers to identify UX strengths and weaknesses. Three of which are elaborated in this case study.

Additionally, we reviewed extensive research from the Baymard Institute, which evaluated the checkout usability of 100 leading e-commerce sites against industry best practices. These insights helped shape our strategy and informed key design decisions throughout the project.

This case study includes key findings of the competitive analysis of the following three peer retailers:

• Gilt

• TJ Maxx

• Neiman Marcus LastCall

Observations

Gilt

Strengths

• Key information is displayed compactly without overwhelming the user.

• The cart appears as an overlay rather than a full page, encouraging continued shopping while reserving the full-page experience for checkout.

• Information is presented clearly, with intuitive information architecture and clear prioritization.

• Payment method options are listed at the bottom of the cart overlay.

• Subtotal and savings are prominently displayed, and the absence of promotional content keeps the overlay clean and uncluttered.

• The "Proceed to Checkout" button is given clear priority.

• The layout is minimal and well-organized, making it easy to identify the current step.

• A small note under the "Shop To" title adds a human touch and softens the tone.

• Padding is consistent throughout, suggesting thoughtful design and development on a well-structured grid.

Weaknesses

• The quantity dropdown uses default browser styling; it should be custom styled for a more refined, branded appearance.

• The message “This item is no longer reserved” is unclear, especially since the item’s price is still included in the subtotal. It appears to be a bug.

• The thick light blue bar paired with the gold gradient checkout button creates a visually awkward contrast; a lighter blue may offer better harmony.

• Graying out the right column is distracting. Although users may understand it becomes active later, the approach is not effective.

• Having both a “Contact Us” link and a “Chat Live” button is redundant—live chat is a contact method.

• The cart item is hidden to reduce clutter during shipping entry, but the absence of any product reference could distract users or cause concern.

• Dropdown fields should be consistently styled to match the UI; current default styles are visually inconsistent.

• There is a slight misalignment between the top-right background container and the adjacent section; the bottom edges do not align.

• The STELLA Service badge appears randomly placed, lacking visual context or supporting content.

• The second street address field should include placeholder text or hints about acceptable input types.

TJ Maxx

Strengths

• The cart layout is clean, simple, and easy to follow, using a familiar structure and standard information.

• The top-of-page upsell is a clever and unobtrusive way to promote additional purchases.

• A "Secure Checkout" message is included, helping to build user trust in the transaction process.

• Brand colors are applied consistently throughout the interface.

• Users can easily make last-minute edits or remove items from the cart.

• Only one primary CTA is displayed, maintaining a clear visual hierarchy.

• Form fields are well-organized, with consistent padding and grid alignment.

• Shipping methods are clearly labeled with delivery windows and associated pricing.

• A helpful tip is included in Address Line 2 to guide users on what to enter.

• The total price is prominently displayed for full transparency.

• The main navigation is hidden to keep users focused on completing checkout.

• Error messaging is clear and easy to understand.

Weaknesses

• The primary and secondary buttons (“Checkout” and “Apply”) are styled too similarly, making it hard to distinguish between them.

• The promo code entry field is overly prominent and visually distracting.

• Inconsistent padding between elements creates a slightly unpolished appearance.

• Although "Secure Checkout" is mentioned, its placement near the footer makes it easy to overlook.

• The primary CTA reads “Continue to Next Step,” but should be more specific—e.g., “Continue to Payment.”

• The "Edit Bag" feature requires two extra steps to modify an item. Users must return to the cart and then click “Edit” to open the product overlay. This process could be streamlined by allowing direct access to the overlay from the “Items in Your Order” section.

• While removing the navigation supports focus, there should still be a subtle option to continue shopping. Currently, users are locked into the checkout flow.

• The billing address does not default to the shipping address, requiring unnecessary input unless changed.

• On the final step, the CTA again reads “Continue to Next Step,” which should be clearer—such as “Review and Complete Order.”

• Users cannot update their email confirmation address from this screen and must leave checkout to update it via their profile.

• Promo code entry is not available during checkout; users must return to the cart to apply one.

Nieman Marcus LastCall

Strengths

• A smart promo at the bottom of the cart suggests products commonly purchased with items in the user’s cart.

• Required fields are clearly labeled, reducing confusion during form entry.

• The “Use as shipping” checkbox is pre-selected by default to streamline the process.

• Navigation is hidden to minimize distractions and keep users focused on completing checkout.

• Only one primary CTA is displayed, maintaining a clear visual hierarchy.

• Checkout progress is shown through a breadcrumb-style indicator.

• Multiple shipping methods are available, offering flexibility to the user.

Weaknesses

• The page layout feels cluttered and visually overwhelming.

• A wide range of fonts with tight line spacing creates visual noise.

• The dark gradient background gives the interface an outdated appearance.

• The promo code field is overly prominent and distracting.

• An excess of content makes the page hard to scan and digest at a glance.

• Secondary CTAs are styled redundantly, reducing clarity and visual hierarchy.

• The billing address is required before entering the shipping address, while credit card details are not—creating a confusing and non-standard flow.

• Inconsistent styling includes oversized form fields, a mix of font sizes and colors, and tight line heights throughout.

• Address Line 2 lacks helpful guidance or placeholder text.

• The progress indicator may be mistaken for a breadcrumb, reducing its effectiveness.

• Users must return to the shopping bag to modify items, adding unnecessary friction.

• There is no way to add a new billing address without editing an existing one.

• City and State are not auto-populated based on ZIP code entry.

• The Country dropdown appears at the top of the form without clear justification, disrupting the flow.

Competitive analysis conclusion

Among the e-commerce sites evaluated in this analysis, Gilt and TJ Maxx demonstrated the strongest cart and checkout experiences, aligning closely with established UX best practices. In contrast, Bluefly and NM Last Call exhibited notable usability gaps that deviated from these standards.

Goals, considerations, and UX best practice inspirations

Drawing from our competitive analysis, we identified key insights and distilled them into a set of UX best practices and guiding principles to inform our aspirational goals. These include:

• Offer Guest Checkout by Default
  Heuristic: Flexibility and efficiency of use
  Allowing users to check out without creating an account reduces friction and respects diverse user goals (e.g., one-time purchase vs. loyalty). This supports efficient task completion.

• Use a Clear, Step-by-Step Progress Indicator
  Heuristic: Visibility of system status
  Clearly showing steps like "Shipping," "Payment," and "Review" gives users confidence and a sense of control, reducing anxiety about process length.

• Ensure CTAs Reflect the Specific Next Step
  Heuristic: Match between system and the real world
  Use action-specific labels like “Continue to Payment” rather than vague terms like “Next.” Clear language helps users predict outcomes and avoid errors.

• Allow Inline Edits to Order Details
  Heuristic: User control and freedom
  Let users make changes (e.g., size, color, quantity) without leaving the checkout funnel. Prevents frustration and abandonment from disjointed navigation.

• Minimize Required Input with Smart Defaults
  Heuristic: Recognition rather than recall
  Auto-detect city/state from ZIP code and pre-select “Use as shipping address.” These reduce cognitive load and speed up form completion.

• Use a Clean, Consistent Layout with Visual Hierarchy
  Heuristic: Aesthetic and minimalist design
  Align form fields to a grid, apply consistent spacing, and limit visual noise. Emphasize the total amount while making subtotals secondary to keep users focused on what matters.

• Highlight Only Optional Fields
  Heuristic: Help users recognize, diagnose, and recover from errors
  If most fields are required, state this upfront. Only marking optional fields avoids over-labeling and form fatigue.

• Deprioritize Promo Code Fields
  Heuristic: Aesthetic and minimalist design
  Since most users don’t have promo codes, tucking this field behind a link minimizes clutter and avoids prompting discount-seeking behavior that disrupts checkout.

• Display Error Messaging That’s Clear and Contextual
  Heuristic: Help users recognize, diagnose, and recover from errors
  Errors should be descriptive, inline with the relevant field, and in plain language. Avoid generic or overly technical error states.

• Provide a Discreet Option to Continue Shopping
  Heuristic: User control and freedom
  While the nav can be hidden to focus attention, offer a subtle link to exit the funnel so users don't feel trapped.

Nordstrom Rack cart and checkout designs

The following designs were guided by our heuristic-based UX goals and validated through usability testing with end users via UserTesting.com. Feedback was overwhelmingly positive, requiring only minor refinements.

More projects