92 lines
3.8 KiB
Markdown
92 lines
3.8 KiB
Markdown
# 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.
|