# WooNooW Product Page Architecture & UX Guide

**Version:** 2.0.0  
**Status:** Production Ready

This document serves as the master guide for the WooNooW Customer SPA Product Page. It consolidates our design decision framework, standard operating procedures (SOP), and implementation phases.

---

## 📋 Table of Contents

1. [Design Decision Framework](#design-decision-framework)
2. [Layout & Structure SOP](#layout--structure-sop)
3. [Implementation Phases](#implementation-phases)

---

## 1. Design Decision Framework

When building the WooNooW SPA, we constantly face the dilemma: **Should we follow E-commerce Convention (e.g. Tokopedia, Shopify) or UX Research (e.g. Baymard Institute)?**

**Our Approach: Context-Driven Hybrid Decisions**

| Pattern | Convention | Research | Our Decision | Rationale |
|---|---|---|---|---|
| **Image Thumbnails** | Dots (Mobile) | Visible Thumbs | **Hybrid** | Small thumbnails + dots underneath. Retains swipeability but adds information scent. |
| **Variation Selector** | Pills | Pills | **Pills** | Clear winner. Dropdowns add unnecessary friction. |
| **Typography** | Varies | Title > Price | **Title > Price** | We optimize for Brand Stores (product focus) rather than Marketplaces (price focus). |
| **Description** | Varies | Visible | **Auto-Expand** | Primary content must be visible. Secondary tabs (Reviews/Specs) can be categorized. |
| **Sticky Bottom Bar** | Common | Good | **Yes** | Essential for long-scrolling mobile experiences. |

**The Meta-Lesson:** 
- Follow Convention for strongly learned behaviors (e.g., swiping).
- Follow Research when convention is weak or when research points to a clear, frictionless improvement.
- Always optimize for OUR context: We are building a high-conversion, brand-focused store SPA, not a massive chaotic marketplace.

---

## 2. Layout & Structure SOP

### 2.1 Hero Section (Above the Fold)
The visual hierarchy must prioritize the core purchasing loop:
1. **Product Images** (Left on Desktop, Top on Mobile)
2. **Title & Price** (Right on Desktop, Below Image on Mobile)
3. **Rating & Review Count**
4. **Variation Selectors** (Pills)
5. **Quantity & Add to Cart CTA**
6. **Trust Badges**

### 2.2 Image Gallery Requirements
- **Main Image:** High-res, zoomable/lightbox enabled.
- **Thumbnail Slider:** Horizontal scrolling, 4-6 visible thumbnails. Active thumbnail highlighted.
- **Variation Auto-Switch:** Selecting a color pill MUST instantly switch the main gallery image to the corresponding photo.

### 2.3 Product Information (Below the Fold)
**AVOID HORIZONTAL TABS.** Research indicates 27% of users overlook them.
Instead, use **Vertical Collapsed Sections (Accordions)**:
- Description (Auto-expanded)
- Specifications Table
- Shipping / Returns Policy
- Reviews
- Related Products

### 2.4 Mobile Optimization
- Image gallery must be native-feel swipeable.
- Sticky Add-to-Cart bottom bar on scroll.
- Touch targets minimum 44x44px.

---

## 3. Implementation Phases

If extending or modifying the product page, follow this feature prioritization:

### Phase 1: Core E-Commerce Loop (MVP)
- Horizontal thumbnail slider with arrow navigation on desktop.
- Variation selector with automatic image switching and price updating.
- Add to Cart functionality with stock validation (disable button if no variation chosen).
- Vertical accordion layout for Description and Info.

### Phase 2: Trust & Conversion Optimization
- Inject WooCommerce native Reviews.
- Inject Trust elements (Secure checkout, Payment methods).
- Auto-calculate and display Free Shipping thresholds.
- Related products carousel.

### Phase 3: Advanced Media & Personalization (Future)
- Wishlist / Save for later.
- Social Proof badges ("20 people viewing this").
- 360° product views and Video embeds.
- Auto-apply coupons and bulk tier discounts.