DESIGN_PRODUCT_COMPARISON_PAGE

Product Comparison Page UX Design

Version: 1.0
Status: Draft
Last Updated: April 2026

1. Overview

The BuyWhere product comparison page enables AI agents and human users to compare products side-by-side across multiple merchants and platforms. Designed mobile-first with agent-native structured data.

Target Users:

AI shopping agents comparing products for purchase decisions
Human users researching best prices and options
Embedding/sharing for external use

2. Page Structure

2.1 Layout Zones

┌─────────────────────────────────────────────────────────────────┐
│ HEADER                                                          │
│ [Logo]  Compare  [Search...]  [Theme]  [API]  [Login]          │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  PAGE TITLE                                                     │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │  Comparing: Sony WH-1000XM5 Wireless Headphones         │    │
│  │  3 products from 3 merchants                            │    │
│  └─────────────────────────────────────────────────────────┘    │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  PRODUCT CARDS (horizontal scroll on mobile)                    │
│  ┌───────────────┐ ┌───────────────┐ ┌───────────────┐          │
│  │   Product 1   │ │   Product 2   │ │   Product 3   │          │
│  │   ┌─────┐     │ │   ┌─────┐     │ │   ┌─────┐     │          │
│  │   │ img │     │ │   │ img │     │ │   │ img │     │          │
│  │   └─────┘     │ │   └─────┘     │ │   └─────┘     │          │
│  │   Title...    │ │   Title...    │ │   Title...    │          │
│  │   $XXX        │ │   $XXX        │ │   $XXX        │          │
│  │   [Buy]       │ │   [Buy]       │ │   [Buy]       │          │
│  └───────────────┘ └───────────────┘ └───────────────┘          │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  COMPARISON TABLE                                              │
│  ─────────────────────────────────────────────────────────────  │
│  ┌──────────────────┬──────────┬──────────┬──────────┐          │
│  │                  │ Shopee  │ Lazada  │ Amazon   │          │
│  ├──────────────────┼──────────┼──────────┼──────────┤          │
│  │ Price            │ SGD 449 │ SGD 459 │ SGD 469 │          │
│  ├──────────────────┼──────────┼──────────┼──────────┤          │
│  │ Availability     │ ● SG     │ ● SG     │ ● SG     │          │
│  ├──────────────────┼──────────┼──────────┼──────────┤          │
│  │ Shipping         │ 2 days   │ 2 days   │ 3-5 days │          │
│  ├──────────────────┼──────────┼──────────┼──────────┤          │
│  │ Rating           │ ★★★★☆   │ ★★★★☆   │ ★★★★★   │          │
│  ├──────────────────┼──────────┼──────────┼──────────┤          │
│  │ Condition        │ New      │ New      │ New      │          │
│  ├──────────────────┼──────────┼──────────┼──────────┤          │
│  │ Affiliate Status │ Active   │ Active   │ Pending  │          │
│  └──────────────────┴──────────┴──────────┴──────────┘          │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  PRICE HISTORY (per product)                                     │
│  ┌─────────────────────────────────────────────────────────┐    │
│  │ [Shopee ▼] [Lazada ▼] [Amazon ▼]  (toggle views)       │    │
│  │                                                          │    │
│  │  500 ─┬──────────────────────────────────────           │    │
│  │       │                    ╭──────╮                    │    │
│  │  450 ─┼────────╭──────────╱        ╰──────╮             │    │
│  │       │        ╲                        │                │    │
│  │  400 ─┴────────╰────────────────────────╯             │    │
│  │       Mar 1    Mar 8    Mar 15   Mar 22   Mar 29       │    │
│  └─────────────────────────────────────────────────────────┘    │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  SHARE / EMBED                                                 │
│  [Copy Link]  [Embed Code ▼]  [Export CSV]                      │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

3. Component Specifications

3.1 Page Header

Elements:

Logo (links to home)
Navigation: Compare (active), Search
Search bar (collapsed on mobile, expandable)
Theme toggle (light/dark)
API Docs link
Login/account

States:

Sticky on scroll
Compact mode on scroll (reduces height, hides secondary nav)

3.2 Page Title Bar

Layout:

┌────────────────────────────────────────────────────────────────┐
│  "Comparing: [Product Name]" as H1                            │
│  "[N] products from [N] merchants" as subtitle                  │
│  [Edit Comparison] button (secondary)                          │
│  [Remove All] button (ghost, right-aligned)                   │
└────────────────────────────────────────────────────────────────┘

3.3 Product Card (Comparison Selector)

Purpose: Compact card for adding/removing products from comparison

┌─────────────────────────────────────────┐
│  [x]                                      │  ← Remove button
│  ┌───────────────────────────────────┐  │
│  │                                   │  │
│  │           Product Image          │  │
│  │            (1:1 ratio)           │  │
│  │                                   │  │
│  └───────────────────────────────────┘  │
│                                          │
│  Shopee SG                              │  ← Source badge
│  Sony WH-1000XM5 Wireless Headphones   │  ← Product name
│  ★★★★☆ (1,234 reviews)                 │  ← Rating
│                                          │
│  SGD $449.00                            │  ← Price (prominent)
│  Free shipping                           │  ← Shipping
│                                          │
│  ● In Stock                             │  ← Availability
│                                          │
│  [View Deal →]                          │  ← CTA
└─────────────────────────────────────────┘

Visual Specs:

Card width: 280px (desktop), 260px (tablet), fluid (mobile)
Card border: 1px solid var(--border)
Card border-radius: 8px
Card padding: 16px
Image aspect ratio: 1:1 (object-fit: cover)
Image border-radius: 6px
Remove button: absolute top-right, 24px circle, × icon
Source badge: 10px font, uppercase, var(--text-secondary)
Price: 18px, bold, var(--text-primary)
CTA: full-width button, primary style

States:

Default: neutral border
Hover: border-color var(--accent), slight shadow elevation
Selected (in comparison): left border 3px var(--accent)
Loading: skeleton placeholder
Out of stock: reduced opacity, "Out of Stock" overlay badge

3.4 Comparison Table

Layout:

Horizontal scroll on mobile (sticky first column if possible)
Fixed header row
Zebra striping optional

Columns:

Column	Width	Content
Attribute	140px	Row label
Product 1	flex	Comparison value
Product 2	flex	Comparison value
Product N	flex	Comparison value

Attributes Row Specs:

Attribute	Display
Price	Large bold price, currency
Availability	Badge with region flags
Shipping	Delivery time estimate
Condition	"New", "Used - Like New", etc.
Rating	Stars + numeric (e.g., "4.5 (1.2k)")
Merchant	Name + verified badge
Returns	Return policy text
Affiliate	Active/Pending badge

Cell Specs:

Padding: 12px 16px
Text alignment: left (labels), center (values)
Price highlight: green for lowest, bold

Mobile Adaptation:

Horizontal scroll with shadow indicators
Sticky attribute column on left
Pinch-to-zoom on table

3.5 Price History Chart

Chart Specs:

Type: Line chart
Time range: 30 days (default), 7d/90d/1y toggles
Y-axis: Price with currency
X-axis: Date labels
Multiple lines: one per selected merchant

Visual Specs:

Line colors: match brand palette (or auto-assigned)
Line width: 2px
Point markers: 4px circles on hover
Grid lines: subtle, 1px var(--border)
Tooltip on hover: shows date + exact price

Interactivity:

Toggle products on/off via legend
Zoom via drag (desktop)
Pan via drag (mobile)

Chart Library Recommendation: Chart.js or Recharts (both have good React support)

3.6 Region Availability Badges

Badge Types:

● SG — Available in Singapore
● US — Available in United States  
● SEA — Available in Southeast Asia (broad)

Badge Specs:

Badge: small pill, 20px height
Dot indicator: 6px circle, left side
Text: 11px, uppercase, letter-spacing 0.5px
Colors:
- In Stock: green dot + green text
- Limited Stock: amber dot + amber text
- Out of Stock: red dot + gray text
- Pre-order: blue dot + blue text

3.7 Share / Embed Panel

Share Options:

┌────────────────────────────────────────────────────────────┐
│  Share this comparison                                      │
│                                                            │
│  [Copy Link]  [Twitter]  [Facebook]  [LinkedIn]           │
│                                                            │
│  ──────────────────────────────────────────────────────   │
│                                                            │
│  Embed this comparison                                      │
│                                                            │
│  [Inline Embed ▼]  [Widget Embed ▼]                       │
│                                                            │
│  ┌────────────────────────────────────────────────────┐   │
│  │ <iframe src="buywhere.ai/compare/xyz" ...></iframe> │   │
│  └────────────────────────────────────────────────────┘   │
│  [Copy Code]                                               │
│                                                            │
│  ──────────────────────────────────────────────────────   │
│                                                            │
│  [Export CSV]  [Export JSON]                              │
└────────────────────────────────────────────────────────┘

Embed Variants:

Inline Embed: Clean iframe showing just the comparison table
Widget Embed: Compact card with "Compare on BuyWhere" CTA

4. Mobile-First Responsive Design

4.1 Breakpoints

Breakpoint	Width	Layout Adaptation
Mobile	< 640px	Single column, horizontal scroll cards, stacked layout
Tablet	640-1024px	2-column card grid, collapsible sections
Desktop	> 1024px	Full side-by-side layout, all sections visible

4.2 Mobile Layout (Default)

┌───────────────────────┐
│  Header (compact)      │
├───────────────────────┤
│  Page Title            │
│  "Comparing: Sony..."  │
│  [Edit] [Remove All]   │
├───────────────────────┤
│  Product Selector      │
│  (horizontal scroll)   │
│  ┌─────┐ ┌─────┐ ┌───┐│
│  │ P1  │ │ P2  │ │ P3││
│  └─────┘ └─────┘ └───┘│
├───────────────────────┤
│  Comparison Table      │
│  (horizontal scroll)   │
│  ┌───────────────────┐│
│  │ Price │ $449│ $459││
│  │ Avail │ SG  │ SG  ││
│  │ Ship  │ 2d  │ 2d  ││
│  └───────────────────┘│
├───────────────────────┤
│  Price History         │
│  (tab selector)        │
│  [Chart area]          │
├───────────────────────┤
│  Share/Embed           │
└───────────────────────┘

4.3 Touch Interactions

Horizontal swipe for card/table scrolling
Pull-to-refresh for price updates
Long-press on product card for quick actions menu
Pinch-to-zoom on charts

5. Structured Data for AI Agents

5.1 JSON-LD Markup

The comparison page includes structured data for AI consumption:

{
  "@context": "https://schema.org",
  "@type": "ProductCollection",
  "name": "Sony WH-1000XM5 Wireless Headphones Comparison",
  "url": "https://buywhere.ai/compare/abc123",
  "datePublished": "2026-04-16",
  "items": [
    {
      "@type": "IndividualProduct",
      "position": 1,
      "product": {
        "@type": "Product",
        "name": "Sony WH-1000XM5 Wireless Headphones",
        "sku": "SONY-WH1000XM5-BLK",
        "brand": {
          "@type": "Brand",
          "name": "Sony"
        },
        "image": "https://cdn.buywhere.ai/products/sony-wh1000xm5.jpg",
        "offers": {
          "@type": "Offer",
          "price": "449.00",
          "priceCurrency": "SGD",
          "availability": "https://schema.org/InStock",
          "seller": {
            "@type": "Organization",
            "name": "Shopee SG"
          },
          "shippingDestination": {
            "@type": "Country",
            "name": "Singapore"
          }
        }
      },
      "priceHistory": [
        {"date": "2026-03-16", "price": "479.00"},
        {"date": "2026-03-23", "price": "469.00"},
        {"date": "2026-03-30", "price": "449.00"}
      ],
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "reviewCount": "1234"
      }
    }
  ],
  "comparisonAttributes": [
    {"name": "Price", "unit": "SGD"},
    {"name": "Shipping Time", "unit": "days"},
    {"name": "Rating", "unit": "stars"}
  ]
}

5.2 OpenAPI Parameters for Comparison Endpoint

GET /v2/compare

Parameters:
  - product_ids[] (required): Array of 2-10 product IDs
  - attributes[] (optional): Specific attributes to compare
  - include_history (optional, default=true): Include price history
  - region (optional, default=SG): SG, US, MY, ID, TH, PH

Response: ComparisonCollection schema

5.3 Agent Optimization Notes

All prices include currency for explicit conversion
Shipping times in standard units (days)
Rating counts included for trust signals
Historical prices enable trend detection
Clean semantic markup for easy parsing

6. Accessibility

6.1 Requirements

WCAG 2.1 AA compliance
Table accessible via screen reader with proper headers
Chart data available as text table alternative
All interactive elements keyboard accessible
Focus indicators visible
Color contrast 4.5:1 minimum

6.2 Screen Reader Support

Proper <table> with <th scope> and aria-describedby
Chart alt text: "Price history line chart for [Product]. Lowest: $X on [Date]. Highest: $Y on [Date]."
Comparison summary announced: "Comparing 3 products: Shopee at $449, Lazada at $459, Amazon at $469."

7. Performance Targets

Metric	Target
Page Load (LCP)	< 2.5s
First Contentful Paint	< 1.5s
Time to Interactive	< 3.5s
Chart Render	< 500ms
Scroll FPS	60fps

8. Implementation Notes

8.1 Tech Stack Recommendation

Framework: Next.js or Nuxt.js for SSR/SEO
Styling: Tailwind CSS
Charts: Chart.js or Recharts
State: React Query for server state
Tables: TanStack Table for flexible comparison table

8.2 Page URL Structure

/compare?ids=123,456,789
/compare/sony-wh1000xm5?ids=123,456,789

8.3 Caching Strategy

Comparison results: cache 5 minutes
Price history: cache 1 hour
Product data: cache with CDN edge

Design specification for BUY-2075. For implementation, create subtasks for: page template, comparison table component, price history chart, structured data markup, share/embed functionality, and responsive layout.