3.8 KiB
3.8 KiB
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
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:
- Product Images (Left on Desktop, Top on Mobile)
- Title & Price (Right on Desktop, Below Image on Mobile)
- Rating & Review Count
- Variation Selectors (Pills)
- Quantity & Add to Cart CTA
- 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.