science Research Deliverable

Product Card & PDP
UX Best Practices

What should PetalsWings show on shop listing cards and product detail pages — based on competitor analysis, iris-shopper behavior, and 700+ SKU catalog realities.

calendar_month March 29, 2026
person For Jaime — Design Reference
storefront 4 Competitors Analyzed

bolt 5 Key Takeaways

  • 1
    Photo + Name + Price + Type Badge + Add to Cart — these five elements are non-negotiable on every product card. Everything else is secondary.
  • 2
    Height & Bloom Season on the card — these are the #1 things gardeners check when browsing 700+ varieties. Clicking into a PDP for this data = friction.
  • 3
    PDP = Farm + PlantFlow blend — Farm Template's clean simplicity (photo + name + short desc + price + buy) above the fold, iris-specific growing data tucked into tabs below. Don't overwhelm.
  • 4
    "Pairs Well With" is the killer feature — no competitor does complementary iris curation well. Bonnie's expertise here is a genuine differentiator and a cross-sell driver.
  • 5
    Availability status is urgent — with 231 OOS products, customers need to see In Stock / Pre-Order / Sold Out instantly, both on card AND at the top of the PDP.
grid_view

Section 1 — Shop Listing & Product Cards

What goes on each card to maximize scannability and drive add-to-cart across a 700+ variety catalog

psychology

The core challenge: PetalsWings shoppers are browsing a LOT of products — iris collectors compare dozens at a time. Cards must give them enough context to decide instantly without clicking. The reference sites below solve this in different ways.

compare Competitor Card Analysis

PlantFlow Template Jaime's Reference
  • Large square product image
  • Quick-view eye icon on hover
  • Product name (links to PDP)
  • Price
  • Sale / offer badge
  • Quantity selector inline
  • Very minimal — clean aesthetic
Longfield Gardens Best-in-Class
  • Product image
  • Product name + price
  • "Ships Now" / seasonal tag
  • Hardiness zone indicator
  • Add to Cart visible on card
  • Wishlist heart icon
  • "Starting at" for collections
DutchGrown Good
  • Product image + name + price
  • Trustpilot rating badge
  • Sale badges
  • Wishlist (Swym integration)
  • Standard e-commerce layout
  • No growing info on card
Floret Flowers Gold Standard
  • Beautiful editorial photography
  • Product name + price
  • "Sold Out" / availability status
  • Collection / category grouping
  • Clean, minimal — no clutter
  • Visual storytelling via photo

table_chart Feature Comparison by Competitor

Card Element PlantFlow Longfield DutchGrown Floret PetalsWings Need?
Product photo ✓ ✓ ✓ ✓ ✓ Required
Product name ✓ ✓ ✓ ✓ ✓ Required
Price ✓ ✓ ✓ ✓ ✓ Required
Add to Cart button ~ inline qty ✓ ✗ ✗ ✓ Always visible
Availability status ✗ ✓ Ships Now ✗ ✓ Sold Out ✓ Critical (231 OOS)
Wishlist heart ✗ ✓ ✓ ✗ ✓ On hover
Category / type badge ✗ ~ ✗ ✓ collections ✓ TB/SDB/JI etc.
Height + bloom time ✗ ✗ ✗ ✗ ✓ PetalsWings-first!
Attribute tags (Award, Rebloom) ✗ ✗ ✗ ✗ ✓ Max 2 per card
Rating / reviews ✗ ✗ ✓ Trustpilot ✗ Later phase
Description text ✗ ✗ ✗ ✗ ✗ PDP only
emoji_objects

The PetalsWings differentiator: Height + Bloom Season on the card is something no competitor does. For an iris collector comparing 50 TB varieties, this is the most-needed data point. It's the most impactful thing we can do that's unique to PetalsWings.

check_circle Recommended PetalsWings Product Card

crop_square Card Wireframe — "Immortality" (TB Iris)
❤
TB
★ Award
🔄 Rebloom
Immortality
28" · Mid-Spring
$12.99
Add to Cart
In Stock

↑ Visual representation only — final design will use brand typography and spacing tokens

  1. 1
    Photo dominates — iris color IS the photo; no color swatches needed on card
  2. 2
    Type badge always visible — TB, SDB, JI, BB, IB; collectors filter by this
  3. 3
    Max 2 attribute tags — prevents visual noise across 700 cards in grid view
  4. 4
    Height + Bloom on card — the #1 browse data point after aesthetics
  5. 5
    Always-visible Add to Cart — don't hide behind hover; mobile users can't hover
  6. 6
    Availability dot — 231 OOS products; customers need this at a glance
  7. 7
    Wishlist on hover — saves space on desktop; always visible on mobile
  8. 8
    Price prominent + bold — not buried below fold or in muted color
  9. 9
    No description text — that's the PDP's job; keep cards scannable

tune Grid Controls — Filter + Sort Bar

The filter bar sits above the product grid and lets customers narrow 700+ varieties instantly. Chip-style filters are lighter than a sidebar drawer — better for a catalog of this size.

Type:
done All
TB
SDB
JI
BB
IB
Tags:
Reblooming
Award Winner
Fragrant
New 2026
Sort:
Bloom Season ▾
Sort options: Price, Name A–Z, Newest, Most Popular, Bloom Season Grid / List view toggle in top-right corner Active filter chips show a clear × to remove
web

Section 2 — Product Detail Page (PDP)

Structure, content hierarchy, and UX patterns for individual iris variety pages

format_quote

Jaime's design direction: "I value simplicity — not overwhelming the user. The Farm template doesn't throw everything above the fold. Clean: photo, name, short desc, price, buy. Details in tabs." This brief shapes the entire PDP recommendation below.

compare PDP Competitor Analysis

PlantFlow Template Jaime's Reference
  • Large image + 4 thumbnail gallery
  • Product name + price
  • Description paragraph
  • Quantity selector + Buy Now button
  • Share links (FB, Insta, Twitter)
  • Description / Additional Info tabs
  • Long description in tab content
  • "Related Products" (3 cards, bottom)
Farm Template Jaime's Reference
  • 1 large hero + 3 thumb row below
  • Category badge with icon
  • Product name (large heading)
  • Short description (2 sentences only)
  • Price (with strikethrough for sale)
  • Quantity selector + Buy Now button
  • 3-tab system: Description / Info / Shipping
  • "Why Farm?" trust icon cards (4)
  • Related Products (3 cards) at bottom
Longfield Gardens Best-in-Class
  • Multi-angle image gallery
  • Name + price + hardiness zone
  • ZIP code zone lookup!
  • Qty + "Ships Now" shipping note
  • Growing details: height, spacing, bloom, zones
  • Long description
  • "You May Also Like" recommendations
  • Growing guides linked
  • Reviews section
Floret + Schreiner's Gold Standard
  • Editorial hero image
  • Name + price + availability
  • Story-driven description (personal voice)
  • Year introduced + hybridizer (Schreiner's)
  • Awards list (Schreiner's)
  • Bloom season, height, color desc.
  • Growing instructions
  • Related varieties

table_chart PDP Feature Comparison

PDP Element PlantFlow Farm Longfield Floret / Schreiner's PetalsWings?
Image gallery + thumbnails ✓ 1+4 ✓ 1+3 ✓ multi ✓ ✓ 1 large + 4 thumbs
Breadcrumb navigation ✗ ~ category badge ✓ ~ ✓ Critical for 700+ catalog
Short description above fold ✓ ✓ 2 sentences ✗ ✓ ✓ 2–3 sentences (Bonnie's voice)
Tab-based content organization ✓ 2 tabs ✓ 3 tabs ✗ scrolled ✗ ✓ 3 tabs (Farm pattern)
Quick-spec bar (icon row) ✗ ✗ ~ listed ~ ✓ Scannable icon row above fold
Qty selector + Add to Cart ✓ ✓ + Buy Now ✓ ✓ ✓ Qty + Cart + Buy Now
Shipping estimate ✗ ✓ bullet points ✓ Ships Now ✗ ✓ "Ships week of April 14"
"Pairs Well With" curation ✗ ✗ ✗ ✗ ✓ Unique differentiator
Trust strip ✗ ✓ 4 icon cards ✓ ✗ ✓ Adapt Farm's pattern
Related products ✓ 3 cards ✓ 3 cards ✓ ✓ ✓ 3 sections below fold
Reviews with zone info ✗ ✗ ✓ ✗ ✓ Zone = social proof for gardeners

check_circle Recommended PetalsWings PDP Structure

lightbulb

Design blend: Farm Template's above-the-fold restraint + PlantFlow's polished gallery layout + iris-specific growing data tucked into tabs below. Simple first. Rich on demand.

web PDP Wireframe — "Immortality" — Above the Fold
Main Iris Photo

1 large + 4 thumbnails (horizontal row)
Click to swap main image

Shop › Tall Bearded › Immortality
Immortality
$12.99
★ Award Winner 🔄 Reblooming Fragrant
"A classic white rebloomer with ruffled falls and a sweet honey scent — Immortality returns reliably every fall and has won the prestigious Dykes Medal."
🌱 TypeTall Bearded
📏 Height28"
🌸 BloomMid-Spring
☀️ SunFull Sun
🌡️ Zones3–9
🦌 DeerResistant
1
Add to Cart
Buy Now
local_shipping Ships week of April 14 · Free shipping over $75
In Stock — 18 remaining
Description
Growing Guide
Reviews
Story + hybridizer info, year introduced, awards list, color detail (standards, falls, beard). Bonnie's personal voice. Full backstory on the variety.

↑ Tabs: Description · Growing Guide · Reviews

Tab Content Breakdown

Tab 1 — Description Above fold default
  • Full story in Bonnie's voice
  • Hybridizer + year introduced
  • Awards list (Dykes Medal, etc.)
  • Color detail: standards, falls, beard
  • Any notable history or pedigree
Tab 2 — Growing Guide Adapted from Farm
  • Planting depth + spacing
  • Soil + water requirements
  • Fertilizer schedule
  • Dividing schedule
  • Link to full growing guide page
Tab 3 — Reviews Trust builder
  • Customer reviews with star ratings
  • Zone info displayed with each review — "Zone 6, Ohio" = social proof for gardeners
  • Customer photo uploads (Phase 2)
  • "These came back beautifully!" — zone context makes reviews credible

view_carousel Below the Fold — Recommendation Sections

favorite

Pairs Well With

3–4 varieties that complement — same bloom time, contrasting colors. No competitor does this. Bonnie's expertise as a differentiator + cross-sell driver.

category

More Tall Bearded Iris

4 related products from the same type/category. Keeps the customer browsing within their interest area.

history

Recently Viewed

4 items from the user's session history. Standard e-commerce pattern that supports comparison browsing.

verified Trust Strip — Adapted from Farm Template

Farm Template uses 4 icon trust cards below the PDP. PetalsWings adapts this pattern with iris-specific trust signals:

local_shipping

Free Shipping $75+

No surprises at checkout

health_and_safety

Healthy Rhizome Guarantee

Or we replace it, no questions

support_agent

Expert Growing Support

Bonnie answers personally

agriculture

Family Farm Since 2001

Every variety we sell, we grow

format_list_bulleted PDP Design Principles

  • Farm + PlantFlow blend — Farm's above-fold simplicity, PlantFlow's gallery polish, iris-specific data in tabs
  • Quick-spec bar is critical — gardeners need growing specs at a glance without scrolling into tabs; the icon row delivers this without visual clutter
  • Tabs keep it clean — Farm proved that the buy decision can happen with just photo + name + short desc + price; don't dump 800 words above the fold
  • "Pairs Well With" is the killer feature — no competitor curates complementary iris pairings; Bonnie's expertise makes this authentic, not algorithmic
  • Shipping estimate = trust + urgency — "Ships week of April 14" tells customers it's real and seasonal, not a vague promise
  • Reviews with zone info — "Zone 6, Ohio — These came back beautifully!" turns reviews into gardening proof, not just star ratings
  • Breadcrumb is essential — with 700+ products across type categories, customers need to know where they are at all times
  • One product = one page — irises are individual varieties, not sizes or colors; no variant selector needed (clean UX win vs. apparel sites)
  • Availability at the top — "In Stock / X Remaining / Pre-Order / Sold Out" right next to Add to Cart, never buried
arrow_forward Next Steps

Design (Jaime)

  • radio_button_unchecked Design product card component using PlantFlow aesthetic + these spec recommendations
  • radio_button_unchecked Prototype the PDP above-fold (2-column: gallery left, info right) in Figma or Webflow
  • radio_button_unchecked Design the 3-tab content system — test on mobile (tabs often need to become accordions)
  • radio_button_unchecked Design the quick-spec icon bar — confirm icon set with Bonnie's terminology
  • radio_button_unchecked Adapt Farm Template's trust strip for PetalsWings trust signals

Content + Dev

  • radio_button_unchecked Confirm which iris types use which badges: TB, SDB, JI, BB, IB — get full list from Bonnie
  • radio_button_unchecked Determine max attribute tags per card (2 recommended) — priority order for tags
  • radio_button_unchecked Plan "Pairs Well With" data structure — how does Bonnie curate complementary varieties?
  • radio_button_unchecked Confirm shipping estimate logic — dynamic date or static seasonal window?
  • radio_button_unchecked Review filter chip categories — finalize type/attribute filters with Bonnie's taxonomy

PetalsWings Product UX Research · Prepared by AspireDigital.dev · March 2026