@wazir-dev/cli 1.0.0

package/expertise/design/patterns/e-commerce.md

@@ -0,0 +1,1494 @@
+# E-Commerce Design Patterns
+
+> Comprehensive design expertise module covering pattern anatomy, best-in-class
+> examples, user flow mapping, micro-interactions, anti-patterns, accessibility,
+> cross-platform adaptation, and decision frameworks for e-commerce experiences.
+
+---
+
+## Table of Contents
+
+1. [Pattern Anatomy](#1-pattern-anatomy)
+2. [Best-in-Class Examples](#2-best-in-class-examples)
+3. [User Flow Mapping](#3-user-flow-mapping)
+4. [Micro-Interactions](#4-micro-interactions)
+5. [Anti-Patterns](#5-anti-patterns)
+6. [Accessibility](#6-accessibility)
+7. [Cross-Platform Adaptation](#7-cross-platform-adaptation)
+8. [Decision Tree](#8-decision-tree)
+9. [Quick Reference Checklist](#9-quick-reference-checklist)
+10. [Sources & Citations](#10-sources--citations)
+
+---
+
+## 1. Pattern Anatomy
+
+### 1.1 Product Listing Page (PLP)
+
+The product listing page is the primary browsing surface where users scan, filter,
+and compare products. It must balance information density with scannability.
+
+**Core Components:**
+
+- **Product card** -- thumbnail image, product name, price, star rating, badge
+  (sale, new, bestseller), quick-add or quick-view action
+- **Grid / list toggle** -- grid view prioritizes imagery (fashion, home decor);
+  list view prioritizes specs (electronics, B2B). Default to grid for consumer
+  retail. Offer both when product types benefit from comparison
+- **Filter panel** -- placed in a left sidebar on desktop; drawer or bottom sheet
+  on mobile. Use checkboxes (not radio buttons) so users can multi-select within
+  a category. Common facets: price range, size, color, brand, rating, availability
+- **Sort controls** -- dropdown above the grid. Standard options: "Best Sellers",
+  "Price: Low to High", "Price: High to Low", "Newest", "Avg. Customer Review".
+  Default sort should match user intent (bestsellers for general browse, relevance
+  for search results)
+- **Pagination / infinite scroll** -- paginated lists give users a sense of
+  position and allow bookmarking. Infinite scroll works for casual browsing but
+  must include a "back to top" button and preserve scroll position on return.
+  "Load more" buttons are a pragmatic hybrid
+- **Result count and applied filter summary** -- show "Showing 1-24 of 312
+  results" and active filter chips with remove actions
+
+**Design Guidelines (Baymard Institute):**
+
+- Keep product cards to 3-4 columns on desktop, 2 columns on tablet, 1-2 on
+  mobile. Overly dense grids reduce tap-target size on touch devices
+- Ensure filter updates happen in real time without requiring a separate "Apply"
+  button -- reduces friction, especially on mobile
+- Make filters sticky as users scroll on mobile so they remain accessible without
+  scrolling back to the top
+- Show thumbnail swatches (color variants) directly on the card to reduce
+  unnecessary page loads
+
+### 1.2 Product Detail Page (PDP)
+
+The product detail page is where purchase decisions happen. Every element must
+reduce uncertainty and build confidence.
+
+**Core Components:**
+
+- **Image gallery** -- primary hero image with zoom capability, thumbnail strip
+  or dot indicators, 360-degree view where applicable, lifestyle/in-context
+  images alongside studio shots. Video should autoplay on hover (desktop) or
+  appear as a distinct thumbnail (mobile)
+- **Product title and brand** -- clear hierarchy: brand name, product name,
+  variant descriptor. Use semantic heading levels (h1 for product name)
+- **Price block** -- current price, original price (struck through if
+  discounted), discount percentage or savings amount, unit pricing where
+  applicable. Position near the add-to-cart button
+- **Variant selectors** -- color swatches with labels (not color-only), size
+  selectors with availability indicators, configuration options. Update the hero
+  image when a variant is selected
+- **Add to cart / Buy now** -- primary CTA, visually dominant, above the fold.
+  "Buy Now" for express checkout, "Add to Cart" for continued browsing. Include
+  quantity stepper adjacent to the CTA
+- **Product description** -- scannable format: key features as bullet points,
+  expandable detailed description, specifications in a structured table
+- **Social proof** -- star rating with review count near the title, "X people
+  bought this today", badges for bestseller or editor's pick status
+- **Shipping and returns** -- estimated delivery date, free shipping threshold
+  indicator, return policy summary. Position near the price or CTA
+- **Related and recommended products** -- "Frequently bought together",
+  "Customers also viewed", "Complete the look" -- positioned below the fold
+
+**NNG Guidelines:**
+
+- Nielsen Norman Group's 108 product page guidelines emphasize showing key
+  information (price, availability, primary image, CTA) above the fold
+- Use progressive disclosure: show summary first, let users expand for full specs
+- Never auto-select a variant the user has not chosen (especially size) -- this
+  leads to incorrect purchases and returns
+
+### 1.3 Shopping Cart
+
+The cart serves dual purposes: order summary and last chance for upsell. It must
+clearly communicate what the user is buying and what it costs.
+
+**Core Components:**
+
+- **Line items** -- product thumbnail, name, selected variants (size, color),
+  unit price, quantity control, line total, remove action
+- **Quantity stepper** -- minus/plus buttons with numeric input. Enforce min (1)
+  and max (stock limit). Update line total and order summary in real time
+- **Order summary** -- subtotal, shipping estimate (or "Free" with threshold
+  messaging), tax estimate, promo code input, order total
+- **Promo code field** -- collapsible by default to avoid implying the user is
+  missing a discount. Validate inline with clear success/error feedback
+- **Cart-level CTAs** -- "Proceed to Checkout" (primary), "Continue Shopping"
+  (secondary/link). Express checkout options (Apple Pay, Google Pay, PayPal)
+  should appear here as well
+- **Empty cart state** -- friendly message, link to popular categories or
+  recently viewed items. Never show a blank page
+- **Save for later / Move to wishlist** -- allow users to declutter the cart
+  without losing items
+
+**Key Principles:**
+
+- Persist cart contents across sessions (use server-side storage for logged-in
+  users, local storage with cookie fallback for guests)
+- Show a mini-cart (flyout or drawer) on add-to-cart for quick confirmation
+  without navigating away from the PLP/PDP
+- Display stock warnings ("Only 3 left") at the line-item level, not just on
+  the PDP
+
+### 1.4 Checkout
+
+Checkout is the highest-friction point in the e-commerce funnel. Baymard
+Institute research shows that the average large e-commerce site can achieve a
+35% increase in conversion rate through checkout UX improvements alone.
+
+**Core Components:**
+
+- **Contact information** -- email (for order confirmation and guest checkout
+  identification), phone (optional, for delivery notifications)
+- **Shipping address** -- address autocomplete (Google Places or similar),
+  country/region selector, saved addresses for returning users
+- **Shipping method** -- clear options with price, estimated delivery date, and
+  carrier name. Pre-select the most popular option
+- **Payment** -- credit/debit card form with real-time validation, digital
+  wallets (Apple Pay, Google Pay) prominently above manual entry, saved payment
+  methods for returning users
+- **Order review** -- collapsible order summary always visible (sticky sidebar
+  on desktop, expandable section on mobile). Show item thumbnails, quantities,
+  and all cost components
+- **Place order CTA** -- single, prominent button. Label should be explicit:
+  "Place Order" or "Pay $X.XX" (including the amount reinforces transparency)
+
+**Baymard Institute Findings:**
+
+- The average checkout has 23.48 form elements; the ideal is 12-14
+- 39% of shoppers abandon when surprised by additional fees
+- 18% abandon due to a "too long / complicated checkout process"
+- 24% abandon because the site required account creation
+
+### 1.5 Order Confirmation
+
+The confirmation page and email serve as receipts and set expectations for
+what happens next.
+
+**Core Components:**
+
+- **Order number** -- prominently displayed, easy to copy
+- **Order summary** -- all items, quantities, prices, discounts applied,
+  shipping method, estimated delivery date, billing and shipping addresses
+- **Next steps** -- "Track your order", "Create an account" (for guest
+  checkout users, post-purchase -- never pre-purchase), "Continue shopping"
+- **Confirmation email** -- sent immediately, mirrors the on-page confirmation,
+  includes a direct link to order status
+- **Cross-sell** -- subtle post-purchase recommendations ("Pairs well with your
+  purchase"). Keep this secondary to the confirmation content
+
+**Design Principles:**
+
+- Provide a clear visual success state (checkmark icon, green accent, "Thank
+  you" heading) to give users immediate confidence
+- Never require the user to screenshot this page -- all information must also
+  be in the email
+- Include customer support contact information in case of issues
+
+### 1.6 Wishlist / Save for Later
+
+Wishlists serve as persistent intent signals, enabling users to bookmark items
+for future purchase or gifting.
+
+**Core Components:**
+
+- **Heart / bookmark icon** -- placed on product cards and PDPs. Toggle state
+  with filled/unfilled visual. Allow guest users to save items (persist via
+  local storage) without forcing registration
+- **Wishlist page** -- grid layout matching the PLP. Include price, availability
+  status, "Add to Cart" action per item, remove action, and "Share wishlist"
+  functionality
+- **Price drop notifications** -- alert users when wishlist items go on sale.
+  This is a high-conversion re-engagement mechanism
+- **Multiple lists** -- power users benefit from named lists ("Birthday ideas",
+  "Home office setup"). Most users need only one default list
+
+**NNG Research:**
+
+- Sites that require login to save items to a wishlist see significantly lower
+  adoption. Allow guest wishlisting and prompt account creation only after the
+  user has items saved ("Create an account to access your wishlist from any
+  device")
+
+### 1.7 Reviews and Ratings
+
+Reviews are the primary trust signal in e-commerce. 95% of consumers consult
+reviews before purchasing (Spiegel Research Center).
+
+**Core Components:**
+
+- **Aggregate rating** -- star rating (1-5) with total review count. Displayed
+  on PLP cards and near the PDP title, above the fold
+- **Rating distribution** -- horizontal bar chart showing the breakdown of 1-5
+  star reviews. Clickable to filter reviews by rating
+- **Individual reviews** -- reviewer name/alias, date, verified purchase badge,
+  star rating, review title, review body, helpful/not helpful voting, seller
+  response (if applicable)
+- **Photo/video reviews** -- user-submitted media displayed in a carousel above
+  text reviews. Significantly increases trust and conversion
+- **Review filters and sort** -- by star rating, recency, most helpful,
+  verified purchase only, with photos/videos, by product variant
+- **Review submission form** -- star rating selector, title, body, photo upload,
+  pros/cons fields, fit/sizing feedback (apparel). Email follow-up prompt
+  post-delivery to solicit reviews
+
+**Design Guidelines:**
+
+- Show star ratings on PLP cards -- they are one of the strongest conversion
+  drivers in product listings
+- Display the total review count alongside stars (e.g., "4.3 (1,247 reviews)")
+  to convey statistical reliability
+- Allow filtering reviews by purchased variant (size, color) for apparel
+- Never hide or suppress negative reviews -- this erodes trust. Instead,
+  feature seller responses to negative reviews
+
+### 1.8 Price Display
+
+Price presentation directly impacts perceived value and purchase confidence.
+
+**Core Components:**
+
+- **Current price** -- the most visually prominent element in the price block.
+  Use a larger font size and/or bold weight
+- **Original / compare-at price** -- struck through, smaller than the current
+  price, positioned adjacent. Use a muted color
+- **Discount indicator** -- percentage off ("-25%") or absolute savings
+  ("Save $50") in a contrasting color (typically red or green). Baymard
+  recommends showing both the percentage and the absolute amount
+- **Unit pricing** -- "$4.99/oz" for consumables, "$2.50/count" for multi-packs.
+  Required by law in some jurisdictions
+- **Installment pricing** -- "or 4 payments of $25.00 with Afterpay". Show the
+  total and per-installment amount
+- **Currency and locale** -- auto-detect via geolocation with manual override.
+  Display currency symbol and correct decimal/thousands separators for the locale
+- **Price range** -- for products with variants at different prices, show
+  "From $29.99" or "$29.99 - $49.99"
+
+**Accessibility for Price Display:**
+
+- Screen readers should announce prices clearly. Use `aria-label` to provide
+  context: `aria-label="Current price: $29.99, was $39.99, you save 25%"`
+- Do not rely solely on color (red strikethrough) to indicate a discount --
+  include text labels
+- Use `<del>` for the original price and `<ins>` or a standard element for
+  the current price to convey semantic meaning
+
+### 1.9 Promotions
+
+Promotions drive urgency and conversion but must be implemented transparently
+to avoid dark-pattern territory.
+
+**Core Components:**
+
+- **Banner / announcement bar** -- site-wide promotion messaging (free shipping
+  threshold, sitewide sale percentage). Sticky at top, dismissible
+- **Product badges** -- "Sale", "New", "Bestseller", "Limited Edition" overlaid
+  on product card images. Strategically placed badges can yield up to a 55%
+  increase in conversion rates
+- **Countdown timers** -- use only for genuine time-limited offers. Display end
+  date alongside the timer. Never reset or fabricate urgency
+- **Threshold incentives** -- "Add $15 more for free shipping" progress bar in
+  the cart. Highly effective at increasing average order value
+- **Promo codes** -- auto-apply where possible. If manual entry is required,
+  make the field discoverable but not distracting (collapsed by default in
+  checkout). Validate instantly with clear feedback
+- **Bundle and BOGO offers** -- show the effective per-unit price and total
+  savings clearly. Use visual grouping to communicate the bundle
+
+---
+
+## 2. Best-in-Class Examples
+
+### 2.1 Apple Store (apple.com)
+
+**What they excel at:**
+
+- **Visual storytelling on PDP** -- immersive, full-bleed imagery with scroll-
+  triggered animations that showcase product features in context. Interactive
+  3D product viewers for hardware
+- **Progressive configuration** -- step-by-step product customization (storage,
+  color, accessories) with real-time price updates and visual feedback as
+  options are selected
+- **Minimal checkout** -- streamlined flow leveraging Apple ID for pre-filled
+  address/payment, Apple Pay as the primary express checkout
+- **Typography and hierarchy** -- San Francisco typeface with carefully weighted
+  font sizes creates an effortless scanning experience
+- **Accessibility first** -- VoiceOver-optimized product pages, adjustable text
+  size, high-contrast mode support throughout
+
+**Key pattern:** Configuration-driven PDP where the product page itself becomes
+a guided selling experience rather than a static spec sheet.
+
+### 2.2 Shopify Stores (Shopify Polaris)
+
+**What they excel at:**
+
+- **Unified design system** -- Polaris provides consistent components across
+  Admin, Checkout, and Customer Accounts. Web Components architecture ensures
+  framework-agnostic compatibility
+- **Checkout extensibility** -- Shopify's one-page checkout (introduced 2023,
+  refined through 2025) reduces form fields while maintaining all necessary
+  information collection. Supports Shop Pay for one-tap checkout
+- **Merchant-adaptable patterns** -- themes provide flexible PLP grid layouts,
+  PDP templates, and cart drawers that merchants can customize without breaking
+  UX conventions
+- **Performance** -- Polaris Web Components are significantly smaller and faster
+  than their React predecessors, directly impacting conversion (a site loading
+  in 1 second converts at 2.5x the rate of one loading in 5 seconds)
+
+**Key pattern:** Platform-level UX standardization that raises the floor for all
+merchants, ensuring basic patterns (cart, checkout, product page) follow
+research-backed conventions regardless of theme customization.
+
+### 2.3 Amazon
+
+**What they excel at:**
+
+- **One-click purchasing** -- patented "Buy Now" eliminates all checkout friction
+  for returning customers. Pre-populated shipping and payment from account data
+- **Review ecosystem** -- star ratings with distribution histograms, verified
+  purchase badges, photo/video reviews, AI-generated review summaries, Q&A
+  sections. Reviews appear next to the product name and price so users connect
+  quality with value instantly
+- **Recommendation engine** -- "Frequently bought together", "Customers who
+  viewed this also viewed", "Compare with similar items" drive discovery and
+  increase average order value
+- **Search and filtering** -- powerful faceted search with category-specific
+  filters. Auto-suggest with rich results (product images in suggestions)
+- **Prime integration** -- delivery date prominence ("Get it tomorrow") as a
+  conversion driver. Prime badge on listings signals fast, free shipping
+
+**Key pattern:** Information density optimized for decision-making. Amazon
+prioritizes utility over aesthetics, surfacing every data point a buyer might
+need (price history, competitive options, delivery estimates) at the cost of
+visual elegance. This works because Amazon's audience is intent-driven.
+
+### 2.4 Stripe Checkout
+
+**What they excel at:**
+
+- **Form minimization** -- every extra field is a potential drop-off point.
+  Stripe's checkout collects only what is necessary to process the payment
+- **Real-time validation** -- inline error messages next to the problem field.
+  Specific messages ("Card number is incomplete", "Expiration date appears to be
+  in the past") rather than generic "Invalid input"
+- **Card brand auto-detection** -- displays the relevant card logo (Visa,
+  Mastercard, Amex) as the user types, providing visual reassurance
+- **Trust signals** -- lock icon, "Powered by Stripe" badge, subtle security
+  copy. Small, familiar visuals reduce anxiety at the payment step
+- **Adaptive payment methods** -- automatically surfaces region-appropriate
+  payment methods (iDEAL in Netherlands, SEPA in EU, PIX in Brazil)
+- **Field ordering** -- follows user mental model: contact info, then shipping,
+  then billing, then payment. Progress is visible via numbered steps or a
+  progress bar
+
+**Key pattern:** Payment-specialized checkout that strips away all non-essential
+elements, creating a focused "payment tunnel" that minimizes cognitive load at
+the highest-anxiety moment of the purchase flow.
+
+### 2.5 Nike (nike.com)
+
+**What they excel at:**
+
+- **Dynamic product imagery** -- lifestyle and action photography alongside
+  studio shots. Videos showing products in use (running shoes on a track,
+  apparel in motion)
+- **Size and fit guidance** -- integrated size finder tools, fit feedback from
+  reviewers ("Runs small -- order a half size up"), size charts with
+  measurement guides
+- **Customization (Nike By You)** -- real-time 3D product configurator for
+  custom colorways. Configuration choices update the product visualization
+  instantly
+- **Member-exclusive access** -- tiered loyalty program driving account creation
+  through value (early access, exclusive products) rather than forced registration
+- **Wishlist / Favorites** -- persistent across devices for logged-in members,
+  with "Notify me" for out-of-stock items
+
+**Key pattern:** Aspirational product presentation combined with practical
+decision-support tools (size finder, fit reviews) that address the primary
+purchase barrier for online apparel and footwear -- fit uncertainty.
+
+### 2.6 Glossier (glossier.com)
+
+**What they excel at:**
+
+- **Conversational product copy** -- tells users what a product DOES and DOES
+  NOT DO with a transparency uncommon in beauty retail. Builds trust through
+  honesty rather than marketing superlatives
+- **User-generated content** -- real customer photos and unfiltered reviews
+  prominently featured. Creates an authentic, relatable shopping experience
+  versus traditional aspirational beauty photography
+- **Community-driven social proof** -- reviews feel like conversations, not
+  testimonials. Glossier's review section reads more like a forum, increasing
+  engagement and time on page
+- **Simplified product line** -- curated, minimal product catalog reduces
+  decision fatigue. Each product page focuses on a single hero product with
+  clear use-case positioning
+- **Clean visual design** -- generous whitespace, soft color palette, editorial
+  photography style. The design itself communicates the brand's "skin first,
+  makeup second" philosophy
+
+**Key pattern:** Brand-as-community e-commerce where social proof and
+authenticity replace traditional merchandising techniques. The product page
+serves as both a sales page and a community discussion space.
+
+---
+
+## 3. User Flow Mapping
+
+### 3.1 Primary Purchase Flow
+
+```
+Browse/Search --> Product Listing --> Product Detail --> Add to Cart
+     |                   |                  |                |
+     |              [Filter/Sort]     [Select Variant]  [Mini Cart
+     |                   |                  |           Confirmation]
+     |                   v                  v                |
+     |              Refine Results    Compare Options        v
+     |                                                  View Cart
+     |                                                      |
+     +------------------------------------------------------+
+                                                            |
+                                                            v
+                                                      Checkout
+                                                            |
+                                            +---------------+---------------+
+                                            |                               |
+                                      Guest Checkout              Signed-In Checkout
+                                            |                               |
+                                      Email Entry                  Pre-filled Data
+                                            |                               |
+                                            +---------------+---------------+
+                                                            |
+                                                            v
+                                                   Shipping Address
+                                                            |
+                                                            v
+                                                   Shipping Method
+                                                            |
+                                                            v
+                                                      Payment
+                                                            |
+                                                            v
+                                                   Order Review
+                                                            |
+                                                            v
+                                                    Place Order
+                                                            |
+                                                            v
+                                                Order Confirmation
+                                                   (Page + Email)
+```
+
+### 3.2 Guest Checkout Flow
+
+Guest checkout is critical -- 24% of users abandon when forced to create an
+account (Baymard Institute).
+
+**Flow Design Principles:**
+
+1. **Entry point** -- present "Continue as Guest" and "Sign In" as equal
+   options. Never position guest checkout as a secondary, de-emphasized link
+2. **Email collection** -- collect email first (required for order confirmation
+   and abandoned cart recovery). Single field, no password
+3. **Deferred account creation** -- after order confirmation, offer "Save your
+   information for faster checkout next time" with a single password field. This
+   converts 25-30% of guest users to accounts without pre-purchase friction
+4. **Session persistence** -- if a guest user returns (same device/browser),
+   pre-fill their email and offer to restore their previous cart
+5. **Order tracking** -- provide a guest-accessible order tracking link via
+   email that does not require login. Use order number + email as verification
+
+**Implementation Notes:**
+
+- Store guest checkout data in a session-based record linked to email
+- Hash the email for abandoned cart recovery triggers
+- Offer "Look up order" functionality using order number + email/zip code
+
+### 3.3 Account / Signed-In Checkout Flow
+
+For returning customers, the goal is maximum speed through pre-filled data.
+
+**Flow Optimizations:**
+
+1. **Saved addresses** -- default to last-used shipping address with one-click
+   selection of alternatives. Include "Add new address" inline
+2. **Saved payment methods** -- display last four digits and card brand. Default
+   to last-used method. PCI-compliant tokenized storage
+3. **Express checkout** -- for single-item or reorder flows, offer "Buy Again"
+   with one-click purchase (pre-selected address + payment + shipping)
+4. **Order history integration** -- "Reorder" buttons on past orders that
+   add all items to cart with current pricing and availability
+
+### 3.4 Abandoned Cart Recovery Flow
+
+The global average cart abandonment rate is 70-78% (Baymard Institute, 2026).
+Up to 20% of abandonments can be recovered.
+
+**Recovery Sequence:**
+
+```
+Cart Abandonment Detected (session timeout or exit)
+        |
+        v
+  [Wait 1 hour]
+        |
+        v
+  Email 1: Reminder
+  - Subject: "You left something behind"
+  - Content: Cart items with images, names, prices
+  - CTA: "Return to your cart" (deep link restoring cart state)
+  - Tone: Helpful, not pushy
+        |
+        v
+  [Wait 24 hours]
+        |
+        v
+  Email 2: Social Proof / Urgency
+  - Subject: "Still thinking it over?"
+  - Content: Cart items + reviews/ratings for those items
+  - Include: "X people bought this today" or low-stock warning (if genuine)
+  - CTA: "Complete your purchase"
+        |
+        v
+  [Wait 72 hours]
+        |
+        v
+  Email 3: Incentive
+  - Subject: "A little something to help you decide"
+  - Content: Cart items + discount code or free shipping offer
+  - CTA: "Use code SAVE10 at checkout"
+  - Include: Expiration on the offer (48-72 hours)
+```
+
+**Design Requirements:**
+
+- Deep links must restore exact cart state (items, quantities, variants)
+- Emails must be mobile-optimized (60%+ of recovery emails are opened on mobile)
+- Personalize by segment: first-time vs. returning customers, cart value tiers
+- Include unsubscribe and frequency preferences
+- Abandoned cart emails have average open rates of 40-45% (significantly above
+  standard marketing email benchmarks)
+
+### 3.5 Returns Flow
+
+A frictionless returns experience directly impacts repeat purchase rates and
+customer lifetime value.
+
+**Flow Steps:**
+
+```
+Order History --> Select Order --> Initiate Return
+        |                              |
+        v                              v
+  View Order Detail            Select Items to Return
+                                       |
+                                       v
+                               Select Return Reason
+                               (dropdown + optional comment)
+                                       |
+                                       v
+                               Choose Return Method
+                               - Prepaid shipping label (print or QR)
+                               - Drop-off at partner location
+                               - Schedule pickup
+                                       |
+                                       v
+                               Return Confirmation
+                               (Return ID + instructions + timeline)
+                                       |
+                                       v
+                               Return Status Tracking
+                               (Shipped --> Received --> Inspected --> Refunded)
+                                       |
+                                       v
+                               Refund Processed
+                               (Email notification + account credit)
+```
+
+**Design Principles:**
+
+- Make the return policy visible pre-purchase (PDP and checkout) -- it is a
+  conversion driver, not just a post-purchase necessity
+- Provide self-service returns without requiring customer support contact
+- Offer exchange as an alternative to refund (retains revenue)
+- Show estimated refund timeline at initiation
+- Send proactive status updates at each stage
+
+---
+
+## 4. Micro-Interactions
+
+### 4.1 Add-to-Cart Animation
+
+The add-to-cart moment is the primary conversion micro-interaction. It must
+provide immediate, unmistakable confirmation.
+
+**Recommended Pattern:**
+
+1. **Trigger** -- user taps/clicks "Add to Cart" button
+2. **Button state change** -- button text changes from "Add to Cart" to
+   "Adding..." (with a subtle spinner) then to "Added" (with a checkmark).
+   Duration: 300-600ms total
+3. **Product image animation** -- small thumbnail of the product scales down
+   and arcs toward the cart icon. Use natural easing (cubic-bezier) to simulate
+   physical movement. Duration: 400-500ms
+4. **Cart icon feedback** -- cart icon bounces or pulses, badge count increments
+   with a scale animation. Duration: 200-300ms
+5. **Mini-cart reveal** -- optional: slide-in drawer or flyout showing the added
+   item with "Continue Shopping" and "View Cart" CTAs. Auto-dismiss after 3-5
+   seconds or on outside click
+
+**Implementation Notes:**
+
+- Use `transform` and `opacity` for animations (GPU-accelerated, no layout
+  thrash)
+- Respect `prefers-reduced-motion` -- fall back to a simple checkmark state
+  change with no spatial animation
+- On mobile, a toast notification at the bottom of the screen may be more
+  appropriate than a flyout cart that obscures content
+
+### 4.2 Quantity Stepper
+
+**Recommended Pattern:**
+
+1. **Layout** -- minus button, numeric display/input, plus button. Minimum
+   touch target: 44x44px (WCAG) / 48x48px (Material Design)
+2. **Tap feedback** -- brief haptic pulse (mobile) or button depression state
+   (desktop) on each increment/decrement
+3. **Boundary behavior** -- disable minus button at quantity 1 (grayed out,
+   `aria-disabled="true"`). Show max quantity message when stock limit is
+   reached
+4. **Direct input** -- allow users to tap the number to type a quantity
+   directly. Validate on blur. Use `inputmode="numeric"` on mobile
+5. **Price update** -- line total and order summary update in real time as
+   quantity changes, with a brief highlight animation (background flash) on the
+   updated value. Duration: 200ms
+
+### 4.3 Price Update Animation
+
+When prices change (variant selection, quantity change, promo applied), the
+transition should be noticeable but not distracting.
+
+**Recommended Pattern:**
+
+1. **Number transition** -- old price fades out and new price fades in, or
+   digits "roll" to new values (odometer effect). Duration: 200-300ms
+2. **Highlight flash** -- brief background color pulse behind the price (e.g.,
+   light yellow to transparent). Duration: 400ms
+3. **Savings callout** -- when a discount is applied, animate the "You save
+   $X.XX" text appearing with a slide-down and fade-in. Duration: 300ms
+
+**Accessibility:**
+
+- Use `aria-live="polite"` on price containers so screen readers announce
+  changes without interrupting the user
+- Ensure the animation does not prevent the price from being readable at
+  any point during transition
+
+### 4.4 Checkout Progress Indicator
+
+**Recommended Pattern:**
+
+1. **Step visualization** -- numbered circles or icons connected by a line.
+   Completed steps are filled, current step is highlighted/pulsing, upcoming
+   steps are outlined
+2. **Step transition** -- when moving to the next step, the connecting line
+   fills with an animated draw (left to right). Current step indicator scales
+   up briefly. Duration: 300-400ms
+3. **Step labels** -- always visible on desktop. On mobile, show only the
+   current step label with a "Step 2 of 4" counter
+4. **Back navigation** -- completed steps are clickable to allow users to
+   return and edit previous sections. Indicate clickability with cursor change
+   and hover state
+
+### 4.5 Payment Processing
+
+The payment processing moment is the highest-anxiety micro-interaction. Users
+need continuous reassurance that their transaction is progressing.
+
+**Recommended Pattern:**
+
+1. **Button state** -- "Place Order" transitions to "Processing..." with a
+   spinner. Disable the button to prevent double-submission
+2. **Progress indication** -- for processing times > 2 seconds, show a
+   progress bar or sequential status messages ("Verifying payment...",
+   "Confirming order...", "Almost done...")
+3. **Success state** -- green checkmark animation with "Order Confirmed!"
+   message. Transition to order confirmation page after 1-2 seconds
+4. **Error state** -- red/orange alert with specific error message and clear
+   recovery action ("Try a different card", "Check your card details").
+   Re-enable the form with the user's data preserved
+5. **Timeout handling** -- if processing exceeds 15 seconds, show a message:
+   "This is taking longer than expected. Please don't close this page." Provide
+   a "Check order status" link as a fallback
+
+---
+
+## 5. Anti-Patterns
+
+These patterns degrade user experience, erode trust, and reduce conversion.
+Backed by Baymard Institute, NNG, and Princeton's dark patterns research.
+
+### 5.1 Forced Account Creation Before Checkout
+
+**Problem:** Requiring users to create an account before they can purchase
+is the second-highest reason for cart abandonment (24% of users -- Baymard).
+
+**Why it persists:** Businesses want user data for marketing and analytics.
+
+**Better approach:** Offer guest checkout as the primary path. Collect only
+email for order confirmation. Offer account creation post-purchase ("Save your
+info for next time") with a single password field.
+
+### 5.2 Hidden Shipping Costs
+
+**Problem:** 55% of cart abandonments are caused by unexpected extra costs
+(shipping, taxes, fees) appearing at checkout (Baymard Institute).
+
+**Why it persists:** Showing lower prices on PLPs increases click-through.
+
+**Better approach:** Display shipping estimates on the PDP and in the cart.
+Show a "Free shipping on orders over $X" banner site-wide. If exact shipping
+cannot be calculated, show a range ("Shipping: $5.99 - $9.99").
+
+### 5.3 Overly Complex Multi-Page Checkout
+
+**Problem:** 18% of users abandon due to a "too long / complicated checkout
+process." The average checkout has 23.48 form elements; the ideal is 12-14.
+
+**Why it persists:** Legal requirements, business data needs, and legacy
+systems accumulate fields over time.
+
+**Better approach:** Audit every field. Remove optional fields or move them
+behind a "Add [optional info]" link. Use address autocomplete to replace
+5 fields with 1. Combine billing and shipping address with a "Same as
+shipping" checkbox (default checked).
+
+### 5.4 Too Many Form Fields
+
+**Problem:** Every additional form field costs approximately 2-3% in
+conversion rate (Baymard). Fields like "Company name", "Fax number",
+"Middle name", or separate "First name" / "Last name" fields (when a single
+"Full name" field suffices) add friction without value.
+
+**Better approach:** Implement a single "Full name" field. Remove all optional
+fields from the default view. Use smart defaults (auto-detect country from IP,
+auto-format phone numbers). Pre-fill from browser autofill attributes.
+
+### 5.5 No Guest Checkout Option
+
+**Problem:** A subset of forced account creation, but worth calling out
+specifically. Some sites literally have no path to purchase without creating
+an account.
+
+**Impact:** Direct conversion loss of 24% of potential buyers.
+
+**Better approach:** Always provide guest checkout. If the business requires
+accounts (e.g., subscription services), explain clearly why and what value the
+account provides.
+
+### 5.6 Misleading Urgency and Scarcity
+
+**Problem:** Fake countdown timers that reset on page reload, fabricated stock
+levels ("Only 2 left!" when inventory is abundant), manufactured demand
+("23 people are viewing this right now" when false). Princeton researchers
+found these patterns on 11,000+ shopping websites.
+
+**Why it persists:** Short-term conversion lifts of 10-25%.
+
+**Long-term damage:** 76% of users say they would stop using a product or
+service if they discovered dark patterns (UX Collective). FTC enforcement is
+increasing.
+
+**Better approach:** Use urgency only when genuine (real sale end dates, actual
+low stock). Show real-time stock counts from inventory systems. Use social
+proof based on actual purchase data.
+
+### 5.7 Dark Patterns in Pricing (Drip Pricing)
+
+**Problem:** Slowly revealing mandatory fees throughout the purchase process.
+Initial price shown on PLP excludes required fees (service charges, handling
+fees, "convenience" fees) that are added at successive checkout steps. Consumer
+Reports estimates hidden fees cost the average family over $3,200 annually.
+Drip pricing increases final amounts by approximately 20% over the displayed
+price.
+
+**Better approach:** Show the all-in price from the beginning. Break down cost
+components transparently in the order summary. If fees vary by region, show
+"+ applicable taxes and shipping" clearly on the PLP.
+
+### 5.8 Sneaking Items into Cart (Sneak into Basket)
+
+**Problem:** Pre-checked add-ons, insurance, or donations that users do not
+explicitly choose. The user must actively opt out to avoid unexpected charges.
+
+**Better approach:** All add-ons should be opt-in. Present them clearly as
+optional with unchecked checkboxes. Group them visually separate from the
+main purchase.
+
+### 5.9 Confirm-Shaming (Manipulinks)
+
+**Problem:** Decline options written to shame the user: "No thanks, I don't
+want to save money" or "I prefer to pay full price." This manipulates through
+emotional pressure rather than value proposition.
+
+**Better approach:** Use neutral language for decline options: "No thanks" or
+"Skip". Let the value proposition of the offer speak for itself.
+
+### 5.10 Forced Continuity (Subscription Traps)
+
+**Problem:** Automatically enrolling users in subscription services after free
+trials without clear notification. Making cancellation require phone calls,
+multi-step processes, or hidden menu options. The FTC's 2024 "Click-to-Cancel"
+rule specifically targets this pattern.
+
+**Better approach:** Clearly state when a trial converts to paid. Send
+reminders before charging. Make cancellation as easy as sign-up (same number
+of clicks/steps, accessible from account settings).
+
+### 5.11 Obstructing Comparison Shopping
+
+**Problem:** Hiding prices until registration, preventing right-click or text
+selection on prices, using images instead of text for pricing, or omitting
+key specs to prevent comparison with competitors.
+
+**Better approach:** Display prices publicly. Use structured data (Schema.org)
+for prices to appear in search results. Provide comparison tools that
+include competitor-relevant specs.
+
+### 5.12 Bait and Switch Availability
+
+**Problem:** Advertising products as in-stock on PLPs/ads that are actually
+out of stock, then redirecting to more expensive alternatives. Or showing a
+low price in ads/search results that is only available under specific,
+undisclosed conditions.
+
+**Better approach:** Synchronize inventory in real time. If a product sells
+out between page views, show a clear "Out of stock" state with "Notify me
+when available" and genuine alternative suggestions.
+
+### 5.13 Dark Pattern Newsletter Sign-Up
+
+**Problem:** Full-screen modal popups appearing within seconds of page load,
+before the user has any relationship with the brand. Popups that obscure
+content, have tiny close buttons, or use confirm-shaming language for the
+dismiss action.
+
+**Better approach:** Delay popups until the user has engaged (scrolled 50%+,
+spent 30+ seconds, visited 2+ pages). Use slide-in banners rather than
+modals. Make the close action prominent and neutral.
+
+---
+
+## 6. Accessibility
+
+### 6.1 Price Screen Reader Formatting
+
+Prices must be announced clearly and completely by screen readers, with full
+context.
+
+**Implementation:**
+
+```html
+<!-- BAD: Screen reader announces "$29" and "$39" separately, unclear meaning -->
+<span class="price-current">$29.99</span>
+<span class="price-original">$39.99</span>
+
+<!-- GOOD: Full context via aria-label -->
+<div aria-label="Current price: $29.99, originally $39.99, you save 25%">
+  <span aria-hidden="true">
+    <del>$39.99</del> <strong>$29.99</strong>
+    <span class="discount-badge">-25%</span>
+  </span>
+</div>
+
+<!-- ALTERNATIVE: Visually hidden text for screen readers -->
+<div>
+  <span class="sr-only">Original price:</span>
+  <del>$39.99</del>
+  <span class="sr-only">Sale price:</span>
+  <strong>$29.99</strong>
+  <span class="sr-only">You save 25 percent</span>
+  <span class="discount-badge" aria-hidden="true">-25%</span>
+</div>
+```
+
+**Key Rules:**
+
+- Use `<del>` element for struck-through original prices (provides semantic
+  meaning to screen readers)
+- Ensure currency is announced (use `aria-label` or visually hidden text)
+- Announce savings amount/percentage
+- Use `aria-live="polite"` on price containers that update dynamically (variant
+  selection, quantity changes)
+- Format numbers consistently (no ambiguity between "$1,299" and "$1.299"
+  across locales)
+
+### 6.2 Product Image Alt Text
+
+Product images are the primary decision-making tool for sighted users. Alt text
+must provide equivalent information for screen reader users.
+
+**Guidelines:**
+
+```html
+<!-- BAD -->
+<img src="shoe.jpg" alt="Product image">
+<img src="shoe.jpg" alt="IMG_4392.jpg">
+<img src="shoe.jpg" alt="">
+
+<!-- GOOD: Primary product image -->
+<img src="shoe.jpg"
+  alt="Men's Air Max 90 Running Shoe in Black/Red, side profile view.
+       Breathable mesh upper with leather overlays, visible Air Max cushioning
+       unit in heel.">
+
+<!-- GOOD: Lifestyle/context image -->
+<img src="shoe-lifestyle.jpg"
+  alt="Runner wearing Air Max 90 in Black/Red on a trail path, showing the
+       shoe in motion.">
+
+<!-- GOOD: Color swatch -->
+<img src="swatch-red.jpg" alt="University Red">
+```
+
+**Key Rules:**
+
+- Describe the product, not the image file ("Black leather crossbody bag"
+  not "bag-photo-3.jpg")
+- Include key visual attributes: color, material, style, orientation/view angle
+- For gallery images, vary descriptions to cover different angles and details
+- Color swatches must have text labels, not just color images -- "Red" not just
+  a red square
+- Decorative/duplicate images can use `alt=""` but at least the primary product
+  image must have descriptive alt text
+- For user-submitted review photos, use alt text like "Customer photo of
+  [product name]" as a minimum
+
+### 6.3 Form Accessibility in Checkout
+
+Checkout forms are where accessibility failures have the most direct revenue
+impact. 71% of users with disabilities abandon inaccessible e-commerce sites
+(UsableNet).
+
+**Implementation Requirements:**
+
+```html
+<!-- Every input must have an associated label -->
+<label for="email">Email address</label>
+<input type="email" id="email" name="email"
+       autocomplete="email"
+       aria-required="true"
+       aria-describedby="email-help email-error">
+<span id="email-help" class="help-text">
+  We'll send your order confirmation here
+</span>
+<span id="email-error" class="error" role="alert" aria-live="polite">
+  <!-- Populated dynamically on validation error -->
+</span>
+```
+
+**Key Rules:**
+
+- **Labels:** Every form field must have a visible `<label>` element linked
+  via `for`/`id`. Do not use placeholder text as the only label (it disappears
+  on focus and fails WCAG 1.3.1)
+- **Error handling:** Use `role="alert"` and `aria-live="polite"` on error
+  message containers. Errors must be announced when they appear. Provide
+  specific error text ("Enter a valid email address" not "Invalid input").
+  Place error messages adjacent to the field, not only at the top of the form
+- **Required fields:** Use `aria-required="true"` and a visible indicator
+  (asterisk with "* Required" legend). Do not rely on color alone
+- **Autocomplete:** Use correct `autocomplete` attributes (`given-name`,
+  `family-name`, `street-address`, `postal-code`, `cc-number`, `cc-exp`, etc.)
+  to enable browser and password manager autofill
+- **Keyboard navigation:** Ensure tab order follows visual order. All
+  interactive elements must be focusable. Focus must be visible (never
+  `outline: none` without a replacement focus indicator)
+- **Field grouping:** Use `<fieldset>` and `<legend>` for related field groups
+  (shipping address, payment details). This provides context for screen reader
+  users
+- **Input types:** Use appropriate `type` attributes (`email`, `tel`, `number`)
+  and `inputmode` to trigger the correct mobile keyboard
+
+### 6.4 Payment Method Accessibility
+
+Payment is the highest-stakes form in the checkout flow. Errors here directly
+prevent purchase.
+
+**Requirements:**
+
+- **Card number input:** Use `inputmode="numeric"` and `autocomplete="cc-number"`.
+  Format with spaces (4242 4242 4242 4242) for readability. Announce card brand
+  detection to screen readers via `aria-live` region
+- **Expiration date:** Use a single input with `MM/YY` format and clear
+  placeholder, or two separate select elements. Auto-advance from month to year
+  field. Use `autocomplete="cc-exp"`
+- **CVV/CVC:** Provide a help icon that reveals a tooltip showing where to find
+  the code on the card. Tooltip must be keyboard-accessible (triggered by
+  focus, not just hover). Use `autocomplete="cc-csc"`
+- **Digital wallets:** Apple Pay and Google Pay buttons must meet minimum
+  contrast ratios. Provide text alternatives for the button icons. Ensure the
+  wallet payment sheet is navigable by screen readers
+- **Payment method selection:** Use radio buttons (not custom-styled divs) for
+  payment method selection. Ensure the selected state is programmatically
+  determinable (`aria-checked="true"`)
+- **Error recovery:** When payment fails, return focus to the first field
+  with an error. Preserve all correctly entered data. Announce the error
+  via `aria-live`
+
+### 6.5 General E-Commerce Accessibility Requirements
+
+**WCAG 2.1 AA Compliance (minimum for e-commerce):**
+
+- **Color contrast:** 4.5:1 minimum for body text, 3:1 for large text and UI
+  components. Critical for prices, availability status, and CTAs
+- **Target size:** Interactive elements must be at least 24x24px (WCAG 2.5.8
+  in 2.2), with 44x44px recommended for primary touch targets
+- **Text resizing:** Content must remain usable at 200% zoom without horizontal
+  scrolling
+- **Keyboard operability:** All functionality must be operable via keyboard
+  alone (Tab, Enter, Space, Escape, arrow keys)
+- **Focus management:** Focus must be managed when content changes dynamically
+  (modal open/close, cart update, checkout step transition)
+- **Semantic HTML:** Use proper heading hierarchy, landmark regions (`<main>`,
+  `<nav>`, `<footer>`), lists, and tables. This is the foundation that makes
+  all other accessibility work
+- **Skip links:** Provide "Skip to main content" and "Skip to checkout" links
+  for keyboard users
+
+**Testing Protocol:**
+
+- Automated: axe, Lighthouse, WAVE -- catches ~30% of issues
+- Manual: keyboard-only navigation through full purchase flow
+- Screen reader: test with VoiceOver (macOS/iOS), NVDA (Windows), TalkBack
+  (Android)
+- Magnification: test at 200% and 400% zoom
+- Color: test with color blindness simulators (protanopia, deuteranopia,
+  tritanopia)
+
+---
+
+## 7. Cross-Platform Adaptation
+
+### 7.1 Mobile Checkout Optimization
+
+Mobile abandonment rates are approximately 79% versus 67% on desktop (Stripe,
+2025). Mobile checkout requires specific design adaptations.
+
+**Layout:**
+
+- Single-column layout exclusively -- multi-column forms do not work on small
+  screens
+- Stack CTAs vertically with the primary action at the bottom of the viewport
+  (thumb-zone accessible)
+- Use bottom sheets for secondary information (order summary, promo code entry)
+  rather than inline expansion that pushes form fields off screen
+- Sticky order total bar at the bottom of the screen during checkout
+
+**Input Optimization:**
+
+- Trigger the correct mobile keyboard for each field type:
+  - `inputmode="numeric"` for card numbers, CVV, zip code
+  - `inputmode="email"` for email fields
+  - `inputmode="tel"` for phone numbers
+- Enable autofill via correct `autocomplete` attributes -- this is the single
+  highest-impact mobile checkout optimization
+- Use address autocomplete (Google Places, Mapbox) to replace 5+ address fields
+  with a single search input
+- Minimize typing: use selectors/dropdowns for country, state/province,
+  expiration month/year
+
+**Touch Targets:**
+
+- Minimum 48x48px for all interactive elements (buttons, links, form fields,
+  checkboxes, radio buttons)
+- Minimum 8px spacing between adjacent tap targets
+- Stepper controls (quantity +/-) must be large enough for reliable tapping
+
+**Performance:**
+
+- Target < 3 second load time for checkout page on 4G
+- Lazy-load non-critical elements (product thumbnails in order summary)
+- Minimize JavaScript execution -- every 100ms of input delay increases
+  abandonment
+
+### 7.2 Apple Pay / Google Pay Integration
+
+Digital wallets increase mobile conversion by 12-18% and account for
+approximately 30% of online transactions.
+
+**Placement Strategy:**
+
+- Present digital wallet options BEFORE manual card entry, not after. Most
+  checkouts hide Apple Pay / Google Pay at the bottom of payment selection,
+  after users have already started typing card numbers. Reversing this order
+  increases wallet adoption and reduces abandonment
+- Show wallet buttons on: PDP (Buy with Apple Pay), Cart page, Checkout
+  payment step
+- Use the official button styles and guidelines from Apple and Google -- custom
+  styling reduces trust and violates platform terms
+
+**Implementation:**
+
+```
++------------------------------------------+
+|  Express Checkout                        |
+|  +------------------+  +---------------+ |
+|  |   Apple Pay      |  |  Google Pay   | |
+|  +------------------+  +---------------+ |
+|                                          |
+|  ── or pay with card ──────────────────  |
+|                                          |
+|  Card number: [                        ] |
+|  Expiration:  [    ]  CVV: [    ]        |
+|  ...                                     |
++------------------------------------------+
+```
+
+**UX Considerations:**
+
+- Detect wallet availability via JavaScript APIs before rendering buttons
+  (do not show Apple Pay on Android or Google Pay on iOS)
+- Handle wallet-specific flows gracefully: Apple Pay presents a native payment
+  sheet that collects shipping address and method. Your checkout must update
+  shipping costs in real time within the sheet
+- Provide clear fallback messaging if a wallet transaction fails: "Apple Pay
+  could not process your payment. Please try again or use a different payment
+  method."
+
+### 7.3 Responsive Product Grids
+
+Product grids must adapt fluidly across breakpoints while maintaining
+scannability and usability.
+
+**Breakpoint Strategy:**
+
+| Viewport       | Columns | Card Content              | Filter Position    |
+|----------------|---------|---------------------------|--------------------|
+| Desktop (1200+)| 3-4     | Image, title, price,      | Left sidebar,      |
+|                |         | rating, quick-add         | always visible     |
+| Tablet (768)   | 2-3     | Image, title, price,      | Collapsible sidebar|
+|                |         | rating                    | or top bar         |
+| Mobile (< 768) | 1-2     | Image, title, price       | Bottom sheet or    |
+|                |         |                           | filter drawer      |
+
+**Responsive Considerations:**
+
+- Use CSS Grid or Flexbox with `minmax()` for fluid column counts rather than
+  fixed breakpoints alone
+- Product card images should maintain consistent aspect ratios (1:1 or 4:3)
+  across breakpoints to prevent layout shift
+- On mobile, consider a horizontal scrolling product row for "Recommended"
+  sections (saves vertical space)
+- "Quick view" modals should become full-screen on mobile
+- Filter counts update in real time on all viewport sizes
+- Sort controls remain accessible (sticky or within thumb reach) on mobile
+
+**Image Optimization:**
+
+- Serve responsive images via `srcset` and `sizes` attributes
+- Use WebP/AVIF formats with JPEG fallback
+- Implement lazy loading for below-fold product cards (`loading="lazy"`)
+- Placeholder aspect-ratio boxes prevent cumulative layout shift (CLS)
+
+---
+
+## 8. Decision Tree
+
+### 8.1 Single-Page vs. Multi-Step Checkout
+
+Use this decision framework to choose the right checkout architecture:
+
+```
+START: What is your primary use case?
+  |
+  +-- Average order value < $150 AND 70%+ mobile traffic?
+  |     |
+  |     YES --> Single-page checkout
+  |     |       - 10-15% higher conversion vs. multi-step
+  |     |       - Reduces perceived steps
+  |     |       - Ideal for impulse/convenience purchases
+  |     |
+  |     NO --> Continue evaluation
+  |
+  +-- Complex product configuration (custom items, B2B, subscriptions)?
+  |     |
+  |     YES --> Multi-step checkout
+  |     |       - Each step handles distinct concerns
+  |     |       - Easier to validate complex inputs per step
+  |     |       - Better analytics (identify exact drop-off step)
+  |     |
+  |     NO --> Continue evaluation
+  |
+  +-- Average order value > $200?
+  |     |
+  |     YES --> Consider multi-step
+  |     |       - Completion rates of 82.4% vs. 78.1% for single-page
+  |     |       - Higher-value purchases benefit from structured review
+  |     |       - Each step provides a "commitment checkpoint"
+  |     |
+  |     NO --> Continue evaluation
+  |
+  +-- Few SKUs, simple product catalog, standard shipping?
+  |     |
+  |     YES --> Single-page checkout
+  |     |       - Less complexity = fewer fields = single page works
+  |     |
+  |     NO --> Multi-step checkout
+  |             - Handle complexity in manageable chunks
+  |
+  UNIVERSAL RULES (regardless of choice):
+  - Maximum 12-14 form elements total
+  - Always offer guest checkout
+  - Always show order summary alongside form fields
+  - Always provide express checkout (digital wallets)
+  - Always show progress/step context
+  - Test your specific audience -- these are guidelines, not absolutes
+```
+
+### 8.2 When to Require Account Creation
+
+```
+START: Does the user need an account to use your product?
+  |
+  +-- Subscription / recurring service?
+  |     |
+  |     YES --> Require account, but explain why clearly
+  |     |       "You'll need an account to manage your subscription,
+  |     |        update preferences, and pause/cancel anytime."
+  |     |       - Collect only email + password
+  |     |       - Defer profile completion to post-purchase
+  |     |
+  |     NO --> Continue evaluation
+  |
+  +-- One-time purchase (physical goods, digital downloads)?
+  |     |
+  |     YES --> NEVER require account before checkout
+  |     |       - Offer guest checkout as primary path
+  |     |       - Post-purchase: "Save your info for next time?"
+  |     |       - 25-30% of guest users convert to accounts this way
+  |     |
+  |     NO --> Continue evaluation
+  |
+  +-- Marketplace / platform (user-to-user transactions)?
+  |     |
+  |     YES --> Require account for sellers, optional for buyers
+  |     |       - Buyers can guest checkout for first purchase
+  |     |       - Prompt account creation for order tracking
+  |     |
+  |     NO --> Evaluate case by case
+  |
+  ACCOUNT CREATION PRINCIPLES:
+  - Social login (Google, Apple) reduces friction by ~40%
+  - Email + password is the minimum viable account
+  - Never require phone number, address, or demographics at sign-up
+  - Clearly communicate the value of having an account:
+    * Order tracking
+    * Faster future checkout
+    * Wishlist persistence
+    * Exclusive member pricing or early access
+  - If you offer a loyalty program, frame account creation as
+    "joining" the program rather than "registering"
+```
+
+### 8.3 When to Use a Cart Drawer vs. Cart Page
+
+```
+START: What is your catalog and purchase behavior?
+  |
+  +-- Primarily single-item purchases?
+  |     |
+  |     YES --> Cart drawer (slide-in mini cart)
+  |     |       - Faster path to checkout
+  |     |       - User stays in browsing context
+  |     |       - Skip the dedicated cart page entirely
+  |     |
+  |     NO --> Continue
+  |
+  +-- Multi-item shopping typical (grocery, office supplies)?
+  |     |
+  |     YES --> Full cart page
+  |     |       - Better for reviewing many items
+  |     |       - Easier quantity editing across items
+  |     |       - More space for upsells and saved-for-later
+  |     |
+  |     NO --> Continue
+  |
+  +-- Average 2-4 items per order?
+        |
+        YES --> Cart drawer with "View full cart" link
+                - Quick confirmation for small additions
+                - Full page available for detailed review
+```
+
+---
+
+## 9. Quick Reference Checklist
+
+### Product Listing Page
+- [ ] Product cards show: image, title, price, rating, availability
+- [ ] Grid/list view toggle available (consumer catalogs)
+- [ ] Filters are multi-select (checkboxes, not radio buttons)
+- [ ] Filters update results in real time (no "Apply" button)
+- [ ] Sort options include relevance, price, rating, newest
+- [ ] Mobile filters accessible via sticky button or bottom sheet
+- [ ] Result count and applied filters visible
+- [ ] Color swatches have text labels, not just color circles
+
+### Product Detail Page
+- [ ] Primary image above the fold with zoom capability
+- [ ] Price, availability, and CTA above the fold
+- [ ] Variant selection updates product image
+- [ ] Star rating with review count near product title
+- [ ] Shipping estimate and return policy visible
+- [ ] "Add to Cart" is visually dominant CTA
+- [ ] Product description uses progressive disclosure
+- [ ] Related/recommended products below the fold
+- [ ] Alt text is descriptive for all product images
+
+### Cart
+- [ ] Line items show thumbnail, name, variant, price, quantity, total
+- [ ] Quantity stepper with direct numeric input option
+- [ ] Real-time price updates on quantity change
+- [ ] Order summary shows subtotal, shipping, tax, total
+- [ ] Promo code field is collapsible (not prominent)
+- [ ] Express checkout options (Apple Pay, Google Pay) visible
+- [ ] Empty cart state is helpful (not blank)
+- [ ] "Save for Later" option available
+- [ ] Cart persists across sessions
+
+### Checkout
+- [ ] Guest checkout offered as equal option to sign-in
+- [ ] Maximum 12-14 form elements
+- [ ] Address autocomplete implemented
+- [ ] Correct autocomplete attributes on all fields
+- [ ] Digital wallets presented BEFORE manual card entry
+- [ ] All costs shown before payment step (no hidden fees)
+- [ ] Progress indicator visible (steps or progress bar)
+- [ ] Real-time inline validation with specific error messages
+- [ ] Order summary visible throughout checkout (sticky sidebar / expandable)
+- [ ] "Place Order" button shows total amount
+- [ ] Form fields have visible labels (not placeholder-only)
+- [ ] Back navigation to previous steps is available
+
+### Accessibility
+- [ ] All prices announced correctly by screen readers
+- [ ] Product images have descriptive alt text
+- [ ] Form fields have associated labels and error messages
+- [ ] Keyboard navigation works through entire purchase flow
+- [ ] Color contrast meets WCAG 2.1 AA (4.5:1 text, 3:1 UI)
+- [ ] Touch targets are 44x44px minimum (48x48px preferred)
+- [ ] Focus indicators are visible on all interactive elements
+- [ ] `aria-live` regions for dynamic content (price updates, cart count)
+- [ ] `prefers-reduced-motion` respected for animations
+- [ ] Skip links provided for keyboard users
+
+### Mobile
+- [ ] Single-column checkout layout
+- [ ] Correct input types trigger appropriate mobile keyboards
+- [ ] Autofill enabled via autocomplete attributes
+- [ ] Sticky order total visible during checkout
+- [ ] Touch targets meet minimum size requirements
+- [ ] Page load < 3 seconds on 4G
+- [ ] Digital wallet buttons detect platform availability
+- [ ] Product grid adapts column count to viewport
+
+### Trust & Transparency
+- [ ] No hidden fees or drip pricing
+- [ ] No forced account creation before checkout
+- [ ] No pre-checked add-ons (opt-in only)
+- [ ] No fake urgency or fabricated scarcity
+- [ ] No confirm-shaming on decline options
+- [ ] Return policy visible pre-purchase
+- [ ] Security indicators on payment forms
+- [ ] Real-time order tracking available post-purchase
+
+---
+
+## 10. Sources & Citations
+
+### Research Institutions
+
+- **Baymard Institute** -- E-Commerce Checkout Usability research (41,000+
+  checkout performance scores, 650+ UX guidelines, 327 benchmarked sites).
+  Key findings: 35% conversion increase achievable through checkout UX fixes;
+  average 70-78% cart abandonment rate; 23.48 average form elements vs. 12-14
+  ideal. https://baymard.com/research/checkout-usability
+- **Baymard Institute** -- Cart Abandonment Rate Statistics (50+ data points,
+  meta-analysis of 49 studies). https://baymard.com/lists/cart-abandonment-rate
+- **Baymard Institute** -- Product Page UX Best Practices 2025.
+  https://baymard.com/blog/current-state-ecommerce-product-page-ux
+- **Baymard Institute** -- E-Commerce Accessibility Research.
+  https://baymard.com/research/accessibility
+- **Nielsen Norman Group (NNG)** -- E-Commerce UX Research Reports (1,073
+  design guidelines across 13 volumes, 350+ websites tested across 5 countries).
+  https://www.nngroup.com/reports/ecommerce-user-experience/
+- **NNG** -- Product Page UX Guidelines (108 guidelines).
+  https://www.nngroup.com/reports/ecommerce-ux-product-pages-including-reviews/
+- **NNG** -- Trust and Credibility in E-Commerce (53 UX guidelines).
+  https://www.nngroup.com/reports/ecommerce-ux-trust-and-credibility/
+- **Princeton University** -- Dark Patterns at Scale: Findings from a Crawl of
+  11K Shopping Websites.
+  https://webtransparency.cs.princeton.edu/dark-patterns/
+
+### Design Systems & Platform Documentation
+
+- **Shopify Polaris** -- Design system for e-commerce, unified Web Components
+  across Admin, Checkout, and Customer Accounts.
+  https://polaris-react.shopify.com/
+- **Shopify Polaris** -- 2025 unified and web-first architecture.
+  https://www.shopify.com/partners/blog/polaris-unified-and-for-the-web
+- **Stripe** -- Payment Page Template Best Practices.
+  https://stripe.com/resources/more/payment-page-template-best-practices
+- **Stripe** -- Checkout UI Design Strategies.
+  https://stripe.com/resources/more/checkout-ui-strategies-for-faster-and-more-intuitive-transactions
+- **Stripe** -- Mobile Checkout UI Best Practices.
+  https://stripe.com/resources/more/mobile-checkout-ui
+- **Stripe** -- Credit Card Checkout UI Design Guide.
+  https://stripe.com/resources/more/credit-card-checkout-ui-design
+- **Stripe** -- One-Page Checkout vs. Multistep Checkout.
+  https://stripe.com/resources/more/one-page-checkout-vs-multistep-checkout
+- **Google** -- Google Pay UX Best Practices.
+  https://developers.google.com/pay/api/web/guides/ux-best-practices
+
+### Accessibility Standards
+
+- **W3C WCAG 2.1 AA** -- Web Content Accessibility Guidelines (minimum
+  compliance standard for e-commerce).
+- **AllAccessible** -- E-Commerce Accessibility 2025 WCAG Compliance Guide.
+  https://www.allaccessible.org/blog/ecommerce-accessibility-complete-guide-wcag
+- **TestParty** -- E-Commerce Checkout Accessibility WCAG Compliance Guide.
+  https://testparty.ai/blog/ecommerce-checkout-accessibility
+- **UsableNet** -- E-Commerce Website Accessibility Guide (71% of users with
+  disabilities abandon inaccessible sites; 4,605 ADA lawsuits in 2024, 68%
+  targeting e-commerce).
+  https://blog.usablenet.com/ecommerce-website-accessibility-guide
+
+### Industry Data & Case Studies
+
+- **Statista** -- Global Digital Shopping Cart Abandonment Rate 2026.
+  https://www.statista.com/statistics/477804/online-shopping-cart-abandonment-rate-worldwide/
+- **Spiegel Research Center** -- 95% of consumers consult reviews before
+  purchasing.
+- **Consumer Reports** -- Hidden fees cost the average family $3,200+ annually.
+- **UX Collective** -- 76% of users would stop using a product if they
+  discovered dark patterns.
+- **FTC** -- Negative Option Rule amendment (2024), "Click-to-Cancel" provision.
+- **Baymard Institute** -- Apple UX Case Study.
+  https://baymard.com/ux-benchmark/case-studies/apple
+- **Baymard Institute** -- Nike UX Case Study.
+  https://baymard.com/ux-benchmark/case-studies/nike
+- **Baymard Institute** -- Amazon UX Case Study.
+  https://baymard.com/ux-benchmark/case-studies/amazon
+
+---
+
+*Last updated: 2026-03-07. This document synthesizes findings from Baymard
+Institute (41,000+ checkout scores, 650+ guidelines), Nielsen Norman Group
+(1,073 e-commerce design guidelines, 5 rounds of international testing),
+Shopify Polaris design system documentation, Stripe checkout research, and
+WCAG 2.1 AA accessibility standards. Statistics reflect 2025-2026 data where
+available.*