WooNooW/PRODUCT_PAGE_ANALYSIS_REPORT.md

Product Page Analysis Report

Learning from Tokopedia & Shopify

Date: November 26, 2025
Sources: Tokopedia (Marketplace), Shopify (E-commerce), Baymard Institute, Nielsen Norman Group
Purpose: Validate real-world patterns against UX research

---

📸 Screenshot Analysis

Tokopedia (Screenshots 1, 2, 5)

Type: Marketplace (Multi-vendor platform)
Product: Nike Dunk Low Panda Black White

Shopify (Screenshots 3, 4, 6)

Type: E-commerce (Single brand store)
Product: Modular furniture/shoes

---

🔍 Pattern Analysis & Research Validation

1. IMAGE GALLERY PATTERNS

📱 What We Observed:

Tokopedia Mobile (Screenshot 1):

• ❌ NO thumbnails visible
• ✅ Dot indicators at bottom
• ✅ Swipe gesture for navigation
• ✅ Image counter (e.g., "1/5")

Tokopedia Desktop (Screenshot 2):

• ✅ Thumbnails displayed (5 small images)
• ✅ Horizontal thumbnail strip
• ✅ Active thumbnail highlighted

Shopify Mobile (Screenshot 4):

• ❌ NO thumbnails visible
• ✅ Dot indicators
• ✅ Minimal navigation

Shopify Desktop (Screenshot 3):

• ✅ Small thumbnails on left side
• ✅ Vertical thumbnail column
• ✅ Minimal design

---

🔬 Research Validation:

Source: Baymard Institute - "Always Use Thumbnails to Represent Additional Product Images"

Key Finding:

"76% of mobile sites don't use thumbnails, but they should"

Research Says:

❌ DOT INDICATORS ARE PROBLEMATIC:

1. Hit Area Issues: "Indicator dots are so small that hit area issues nearly always arise"
2. No Information Scent: "Users are unable to preview different image types"
3. Accidental Taps: "Often resulted in accidental taps during testing"
4. Endless Swiping: "Users often attempt to swipe past the final image, circling endlessly"

✅ THUMBNAILS ARE SUPERIOR:

1. Lower Error Rate: "Lowest incidence of unintentional taps"
2. Visual Preview: "Users can quickly decide which images they'd like to see"
3. Larger Hit Area: "Much easier for users to accurately target"
4. Information Scent: "Users can preview different image types (In Scale, Accessories, etc.)"

Quote:

"Using thumbnails to represent additional product images resulted in the lowest incidence of unintentional taps and errors compared with other gallery indicators."

---

🎯 VERDICT: Tokopedia & Shopify Are WRONG on Mobile

Why they do it: Save screen real estate
Why it's wrong: Sacrifices usability for aesthetics
What we should do: Use thumbnails even on mobile

Exception: Shopify's fullscreen lightbox (Screenshot 6) is GOOD

• Provides better image inspection
• Solves the "need to see details" problem
• Should be implemented alongside thumbnails

---

2. TYPOGRAPHY HIERARCHY

📱 What We Observed:

Tokopedia (Screenshot 2):

Product Title: ~24px, bold, black
Price: ~36px, VERY bold, black
"Pilih ukuran sepatu": ~14px, gray (variation label)

Shopify (Screenshot 3):

Product Title: ~32px, serif, elegant
Price: ~20px, regular weight, with strikethrough
Star rating: Prominent, above price

---

🔬 Research Validation:

Source: Multiple UX sources on typographic hierarchy

Key Principles:

1. Title is Primary: Product name establishes context
2. Price is Secondary: But must be easily scannable
3. Visual Hierarchy ≠ Size Alone: Weight, color, spacing matter

Analysis:

Tokopedia Approach:

• ✅ Title is clear and prominent
• ⚠️ Price is LARGER than title (unusual but works for marketplace)
• ✅ Clear visual separation

Shopify Approach:

• ✅ Title is largest element (traditional hierarchy)
• ✅ Price is clear but not overwhelming
• ✅ Rating adds social proof at top

---

🎯 VERDICT: Both Are Valid, Context Matters

Marketplace (Tokopedia): Price-focused (comparison shopping)
Brand Store (Shopify): Product-focused (brand storytelling)

What we should do:

• Title: 28-32px (largest text element)
• Price: 24-28px (prominent but not overwhelming)
• Use weight & color for emphasis, not just size
• Our current 48-60px price is TOO BIG ❌

---

3. VARIATION SELECTORS

📱 What We Observed:

Tokopedia (Screenshot 2):

• ✅ Pills/Buttons for size selection
• ✅ All options visible at once
• ✅ Active state clearly indicated (green border)
• ✅ No dropdown needed
• ✅ Quick visual scanning

Shopify (Screenshot 6):

• ✅ Pills for color (visual swatches)
• ✅ Buttons for size (text labels)
• ✅ All visible, no dropdown
• ✅ Clear active states

---

🔬 Research Validation:

Source: Nielsen Norman Group - "Design Guidelines for Selling Products with Multiple Variants"

Key Finding:

"Variations for single products should be easily discoverable"

Research Says:

✅ VISUAL SELECTORS (Pills/Swatches) ARE BETTER:

1. Discoverability: "Users are accustomed to this approach"
2. No Hidden Options: All choices visible at once
3. Faster Selection: No need to open dropdown
4. Better for Mobile: Larger touch targets

❌ DROPDOWNS HIDE INFORMATION:

1. Extra Click Required: Must open to see options
2. Poor Mobile UX: Small hit areas
3. Cognitive Load: Must remember what's in dropdown

Quote:

"The standard approach for showing color options is to show a swatch for each available color rather than an indicator that more colors exist."

---

🎯 VERDICT: Pills/Buttons > Dropdowns

Why Tokopedia/Shopify use pills:

• Faster selection
• Better mobile UX
• All options visible
• Larger touch targets

What we should do:

• Replace dropdowns with pill buttons
• Use color swatches for color variations
• Use text buttons for size/other attributes
• Keep active state clearly indicated

---

4. VARIATION IMAGE AUTO-FOCUS

📱 What We Observed:

Tokopedia (Screenshot 2):

• ✅ Variation images in main slider
• ✅ When size selected, image auto-focuses
• ✅ Thumbnail shows which image is active
• ✅ Seamless experience

Shopify (Screenshot 6):

• ✅ Color swatches show mini preview
• ✅ Clicking swatch changes main image
• ✅ Immediate visual feedback

---

🔬 Research Validation:

Source: Nielsen Norman Group - "UX Guidelines for Ecommerce Product Pages"

Key Finding:

"Shoppers considering options expected the same information to be available for all variations"

Research Says:

✅ AUTO-SWITCHING IS EXPECTED:

1. User Expectation: Users expect image to change with variation
2. Reduces Confusion: Clear which variation they're viewing
3. Better Decision Making: See exactly what they're buying

Implementation:

1. Variation images must be in the main gallery queue
2. Auto-scroll/focus to variation image when selected
3. Highlight corresponding thumbnail
4. Smooth transition (not jarring)

---

🎯 VERDICT: We Already Do This (Good!)

What we have: ✅ Auto-switch on variation select
What we need: ✅ Ensure variation image is in gallery queue
What we need: ✅ Highlight active thumbnail

---

5. PRODUCT DESCRIPTION PATTERNS

📱 What We Observed:

Tokopedia Mobile (Screenshot 5 - Drawer):

• ✅ Folded description with "Lihat Selengkapnya" (Show More)
• ✅ Expands inline (not accordion)
• ✅ Full text revealed on click
• ⚠️ Uses horizontal tabs for grouping (Deskripsi, Panduan Ukuran, Informasi penting)
• ✅ BUT tabs merge into single drawer on mobile

Tokopedia Desktop (Screenshot 2):

• ✅ Description visible immediately
• ✅ "Lihat Selengkapnya" for long text
• ✅ Tabs for grouping related info

Shopify Desktop (Screenshot 3):

• ✅ Full description visible immediately
• ✅ No fold, no accordion
• ✅ Clean, readable layout
• ✅ Generous whitespace

Shopify Mobile (Screenshot 4):

• ✅ Description in accordion
• ✅ Auto-expanded on first load
• ✅ Can collapse if needed
• ✅ Other sections (Fit & Sizing, Shipping) collapsed

---

🔬 Research Validation:

Source: Multiple sources on accordion UX

Key Findings:

Show More vs Accordion:

✅ SHOW MORE (Tokopedia):

• Pro: Simpler interaction (one click)
• Pro: Content stays in flow
• Pro: Good for single long text
• Con: Page becomes very long

✅ ACCORDION (Shopify):

• Pro: Organized sections
• Pro: User controls what to see
• Pro: Saves space
• Con: Can hide important content

Best Practice:

"Auto-expand the most important section (description) on first load"

---

🎯 VERDICT: Hybrid Approach is Best

For Description:

• ✅ Auto-expanded accordion (Shopify approach)
• ✅ Or "Show More" for very long text (Tokopedia approach)
• ❌ NOT collapsed by default

For Other Sections:

• ✅ Collapsed accordions (Specifications, Shipping, Reviews)
• ✅ Clear labels
• ✅ Easy to expand

About Tabs:

• ⚠️ Tokopedia uses tabs but merges to drawer on mobile (smart!)
• ✅ Tabs can work for GROUPING (not primary content)
• ✅ Must be responsive (drawer on mobile)

What we should do:

• Keep vertical accordions
• Auto-expand description on load
• Keep other sections collapsed
• Consider tabs for grouping (if needed later)

---

🎓 Additional Lessons (Not Explicitly Mentioned)

6. SOCIAL PROOF PLACEMENT

Tokopedia (Screenshot 2):

• ✅ Rating at top (5.0, 5.0/5.0, 5 ratings)
• ✅ Seller info with rating (5.0/5.0, 2.3k followers)
• ✅ "99% pembeli merasa puas" (99% buyers satisfied)
• ✅ Customer photos section

Shopify (Screenshot 6):

• ✅ 5-star rating at top
• ✅ "5-star reviews" section at bottom
• ✅ Review carousel with quotes

Lesson:

• Social proof should be near the top (not just bottom)
• Multiple touchpoints (top, middle, bottom)
• Visual elements (stars, photos) > text

---

7. TRUST BADGES & SHIPPING INFO

Tokopedia (Screenshot 2):

• ✅ Shipping info very prominent (Ongkir Rp22.000, Estimasi 29 Nov)
• ✅ Seller location (Kota Surabaya)
• ✅ Return policy mentioned

Shopify (Screenshot 6):

• ✅ "Find Your Shoe Size" tool (value-add)
• ✅ Size guide link
• ✅ Fit & Sizing accordion
• ✅ Shipping & Returns accordion

Lesson:

• Shipping info should be prominent (not hidden)
• Estimated delivery date > generic "free shipping"
• Size guides are important for apparel
• Returns policy should be easy to find

---

8. MOBILE-FIRST DESIGN

Tokopedia Mobile (Screenshot 1):

• ✅ Sticky bottom bar with price + "Beli Langsung" (Buy Now)
• ✅ Floating action always visible
• ✅ Quantity selector in sticky bar
• ✅ One-tap purchase

Shopify Mobile (Screenshot 4):

• ✅ Large touch targets for all buttons
• ✅ Generous spacing between elements
• ✅ Readable text sizes
• ✅ Collapsible sections save space

Lesson:

• Consider sticky bottom bar for mobile
• Large, thumb-friendly buttons
• Reduce friction (fewer taps to purchase)
• Progressive disclosure (accordions)

---

9. BREADCRUMB & NAVIGATION

Tokopedia (Screenshot 2):

• ✅ Full breadcrumb (Sepatu Wanita > Sneakers Wanita > Nike Dunk Low)
• ✅ Category context clear
• ✅ Easy to navigate back

Shopify (Screenshot 3):

• ✅ Minimal breadcrumb (just back arrow)
• ✅ Clean, uncluttered
• ✅ Brand-focused (less category emphasis)

Lesson:

• Marketplace needs detailed breadcrumbs (comparison shopping)
• Brand stores can be minimal (focused experience)
• We should have clear breadcrumbs (we do ✅)

---

10. QUANTITY SELECTOR PLACEMENT

Tokopedia (Screenshot 2):

• ✅ Quantity in sticky bar (mobile)
• ✅ Next to size selector (desktop)
• ✅ Simple +/- buttons

Shopify (Screenshot 6):

• ✅ Quantity above Add to Cart
• ✅ Large +/- buttons
• ✅ Clear visual hierarchy

Lesson:

• Quantity should be near Add to Cart
• Large, easy-to-tap buttons
• Clear visual feedback
• We have this ✅

---

📊 Summary: What We Learned

✅ VALIDATED (We Should Keep/Add)

1. Thumbnails on Mobile - Research says dots are bad, thumbnails are better
2. Auto-Expand Description - Don't hide primary content
3. Variation Pills - Better than dropdowns for UX
4. Auto-Focus Variation Image - We already do this ✅
5. Social Proof at Top - Not just at bottom
6. Prominent Shipping Info - Near buy section
7. Sticky Bottom Bar (Mobile) - Consider for mobile
8. Fullscreen Lightbox - For better image inspection

---

❌ NEEDS CORRECTION (We Got Wrong)

1. Price Size - Our 48-60px is too big, should be 24-28px
2. Title Hierarchy - Title should be primary, not price
3. Dropdown Variations - Should be pills/buttons
4. Description Collapsed - Should be auto-expanded
5. No Thumbnails on Mobile - We need them (research-backed)

---

⚠️ CONTEXT-DEPENDENT (Depends on Use Case)

1. Horizontal Tabs - Can work for grouping (not primary content)
2. Price Prominence - Marketplace vs Brand Store
3. Breadcrumb Detail - Marketplace vs Brand Store

---

🎯 Action Items (Priority Order)

HIGH PRIORITY:

1. Add thumbnails to mobile gallery (research-backed)
2. Replace dropdown variations with pills/buttons (better UX)
3. Auto-expand description accordion (don't hide primary content)
4. Reduce price font size (24-28px, not 48-60px)
5. Add fullscreen lightbox for image zoom

MEDIUM PRIORITY:

6. Add social proof near top (rating, reviews count)
7. Make shipping info more prominent (estimated delivery)
8. Consider sticky bottom bar for mobile
9. Add size guide (if applicable)

LOW PRIORITY:

10. Review tabs vs accordions for grouping
11. Add customer photo gallery (if reviews exist)
12. Consider "Find Your Size" tool (for apparel)

---

📚 Research Sources

1. Baymard Institute - "Always Use Thumbnails to Represent Additional Product Images (76% of Mobile Sites Don't)"

   • URL: https://baymard.com/blog/always-use-thumbnails-additional-images
   • Key: Thumbnails > Dots for mobile

2. Nielsen Norman Group - "Design Guidelines for Selling Products with Multiple Variants"

   • URL: https://www.nngroup.com/articles/products-with-multiple-variants/
   • Key: Visual selectors > Dropdowns

3. Nielsen Norman Group - "UX Guidelines for Ecommerce Product Pages"

   • URL: https://www.nngroup.com/articles/ecommerce-product-pages/
   • Key: Answer questions, enable comparison, show reviews

---

🎓 Key Takeaway

Tokopedia and Shopify are NOT perfect.

They make trade-offs:

• Tokopedia: Saves space with dots (but research says it's wrong)
• Shopify: Minimal thumbnails (but research says more is better)

We should follow RESEARCH, not just copy big players.

The research is clear:

• ✅ Thumbnails > Dots (even on mobile)
• ✅ Pills > Dropdowns (for variations)
• ✅ Auto-expand > Collapsed (for description)
• ✅ Title > Price (in hierarchy)

Our goal: Build the BEST product page, not just copy others.

---

Status: ✅ Analysis Complete
Next Step: Implement validated patterns
Confidence: HIGH (research-backed)