campaign_id: null created_at: ‘2026-03-12T23:06:34.259974+00:00’ dashboard_url: https://dashboard.kismetpets.com/context/front_end_design/2/ experiment_id: 4 id: 2 product_id: null skill: front_end_design title: Kismet Website Conversion — Front-End Design Specs & Wireframes updated_at: ‘2026-03-12T23:06:34.259990+00:00’
Kismet Website Conversion — Front-End Design Specs & Wireframes
front_end_design · 2026-03-12
Kismet Website Conversion — Front-End Design Specs
Page-by-Page Layout Changes
1. HOMEPAGE — PROPOSED LAYOUT
Above the Fold (First Viewport — ~900px)
┌─────────────────────────────────────────────────┐
│ ANNOUNCEMENT BAR (coral bg, white text) │
│ Subscribe & Save 30% → Free Ship $50+ → MBG │
├─────────────────────────────────────────────────┤
│ LOGO NAV Shop About Ingredients Tails 🛒 │
├──────────────────────┬──────────────────────────┤
│ │ │
│ HERO IMAGE │ ★★★★★ 194+ reviews │
│ (lifestyle shot │ │
│ dog + product │ Most dog health │
│ in-context) │ problems start │
│ │ in the gut. │
│ │ │
│ │ Kismet is clinically │
│ │ proven to fix it. │
│ │ │
│ │ [Take the 30-Sec Quiz] │
│ │ [Shop Now] │
│ │ │
│ │ From $31.49/mo with │
│ │ Subscribe & Save │
├──────────────────────┴──────────────────────────┤
│ SOCIAL PROOF BAR (teal bg) │
│ ★4.9/5 from 194 parents │ PRESS LOGOS │ MBG │
├─────────────────────────────────────────────────┤
│ VALUE PROPS (3-col, yellow bg) │
│ 🔬 Clinically │ 🥩 Real │ 📦 No Fridge│
│ Proven │ Ingredients │ Required │
└─────────────────────────────────────────────────┘
Key changes from current:
- Static hero (no carousel)
- Star rating + review count in hero
- Price anchor visible
- Social proof bar immediately below hero (moved from section 9)
- Value props strip (new — replaces first marquee)
Below the Fold — Section Order
┌─────────────────────────────────────────────────┐
│ SECTION 4: "CLINICALLY PROVEN" (education) │
│ Teal tile bg, ingredient bowl photo │
│ "All the benefits of fresh food, without a │
│ fridge." + benefit callouts │
│ CTA: Shop Food │
├─────────────────────────────────────────────────┤
│ SECTION 5: CORE PRODUCTS (2 food SKUs) │
│ ┌──────────┐ ┌──────────┐ │
│ │ Chicken │ │ Salmon │ │
│ │ & Barley │ │ & Brown │ │
│ │ $31.49/mo│ │ Rice │ │
│ │ [Shop] │ │ $34.99/mo│ │
│ └──────────┘ │ [Shop] │ │
│ └──────────┘ │
│ "Not sure? Take the quiz →" │
├─────────────────────────────────────────────────┤
│ SECTION 6: PRODUCT EDUCATION │
│ Kibble + Nugs + Treats breakdown │
│ (current "Adding Extra" section, compressed) │
├─────────────────────────────────────────────────┤
│ SECTION 7: CUSTOMER REVIEWS │
│ 3-4 reviews with photos + verified badges │
│ Focus on: picky eater wins, digestive results │
│ CTA: "Read all 194 reviews →" │
├─────────────────────────────────────────────────┤
│ SECTION 8: QUIZ CTA (teal bg) │
│ "Not sure which recipe? We'll match you in │
│ 30 seconds." │
│ [Take the Quiz] │
├─────────────────────────────────────────────────┤
│ SECTION 9: TELLING TAILS (blog/video) │
│ Keep current layout but compress │
├─────────────────────────────────────────────────┤
│ SECTION 10: ABOUT (brand story) │
│ Keep current but compress to 1 paragraph │
├─────────────────────────────────────────────────┤
│ SECTION 11: SOCIAL + FOOTER │
└─────────────────────────────────────────────────┘
Marquees reduced from 7 to 2:
- Keep “CLINICALLY PROVEN” (strongest message)
- Keep one brand-voice marquee (e.g., “ADDING EXTRA TO THE ORDINARY”)
- Remove: BOWL GOALS, FEATURED REVIEWS, ABOUT US, STRAIGHT FROM THE PACK
2. PDP — RESTRUCTURED RIGHT PANEL
Current Layout (Problem)
Title → Stars → Description (2 long paragraphs) →
Subscribe offer ladder → Charity copy →
Flavor selector → Size selector →
Subscribe/One-time toggle → ATC
Proposed Layout
┌──────────────────────────────────────┐
│ FOOD │
│ Chicken & Barley Recipe With │
│ Nutritious Freeze-Dried Nugs │
│ ★★★★★ (194) │
│ │
│ Real chicken, superfoods, and gut- │
│ loving pre + probiotics — topped │
│ with freeze-dried Nugs. │
│ │
│ ✓ Clinically Proven · ✓ Vet Dev'd │
│ ✓ Made in U.S.A. │
│ │
│ ─── Choose Flavor ──────────── │
│ [Chicken] [Salmon] │
│ │
│ ─── Choose Size ────────────── │
│ [4 lb] [9 lb] [19 lb] │
│ │
│ ─── Purchase Type ──────────── │
│ ● Subscribe & Save 30% off │
│ $15.39 ~~$21.99~~ │
│ Free ship · Skip/cancel anytime │
│ ○ One-Time Purchase $21.99 │
│ │
│ [════ ADD TO CART ════] │
│ │
│ ▸ Why Pet Parents Love It │
│ ▸ What's Inside │
│ ▸ Subscribe & Save Details │
│ ▸ Giving Back │
└──────────────────────────────────────┘
Key changes:
- One-liner replaces two long paragraphs above ATC
- Trust badges inline (visual, not text)
- All buy controls above the fold
- Detailed description moves to expandable accordion below ATC
- Review quotes in expandable section (social proof near purchase)
Mobile PDP — Sticky Bottom Bar
┌──────────────────────────────────────┐
│ $15.39/mo · Subscribe & Save 30% │
│ [═══════ ADD TO CART ═══════] │
└──────────────────────────────────────┘
Fixed to bottom of viewport on mobile. Appears after user scrolls past first ATC button.
3. QUIZ FLOW — RESTRUCTURED
Current Flow
Step 1: YOUR INFO (name, email) ← FRICTION
Step 2: YOUR DOG
Step 3: TRAITS AND GOALS
Proposed Flow
Step 1: YOUR DOG
"What's your dog's name?" → [text field]
Step 2: ABOUT [DOG NAME]
Breed → Age → Weight (visual selectors, not text)
Step 3: [DOG NAME]'S GOALS
"What would you love to improve?" (multi-select)
□ Gut health & digestion
□ Picky eating
□ Coat & skin
□ Energy & vitality
□ Weight management
□ Overall wellness
Step 4: [DOG NAME]'S RECOMMENDATION ← EMAIL GATE
"We've built [Dog Name]'s perfect bowl!"
[Preview of recommendation — blurred or partial]
"Enter your email to see [Dog Name]'s plan
and get 10% off your first order."
[Email field] [See My Plan]
Step 5: RESULTS
Recommended recipe + size + frequency
Subscribe price with savings shown
[Add to Cart — Subscribe & Save]
Design notes:
- Progress bar shows dog paw icons instead of text steps
- Each step is a single question (reduces cognitive load)
- Dog’s name used throughout after Step 1 (personalization)
- Results page shows product image, price comparison, and “X pet parents chose this recipe” social proof
4. EMAIL POPUP — TIMING & DESIGN
Current
- Fires immediately on page load
- Yellow bg, “For the Love of Dog” headline
- Dog eating photo
- Email field + “Join the Pack” CTA
- Dismiss: “No thanks, I’m not a dog person”
Proposed Changes
- Timing: 10-second delay OR exit-intent (whichever comes first)
- Dismiss copy: “Maybe later” (the current “I’m not a dog person” is fun but may create negative sentiment for undecided visitors)
- Offer: Keep 10% off first order
- A/B test: Current immediate popup vs. delayed. Track email capture rate AND bounce rate.
5. COMPONENT SPECS
Social Proof Strip (New Component)
- Height: 48px desktop, 40px mobile
- Background: Brand teal (#00A89D or closest brand color)
- Content: Flex row, space-between
- Left: Star icons (yellow) + “4.9/5 from 194+ pet parents” (white text)
- Center: Press logos (white/monochrome, 24px height)
- Right: Shield icon + “100% Money-Back Guarantee” (white text)
- Mobile: Stacks to 2 rows or becomes scrolling ticker
Value Props Strip (New Component)
- Layout: 3-column grid, equal width
- Background: Brand yellow
- Each column: Icon (40px) + Bold title + 1-line description
- Mobile: Stacks to vertical
Sticky Mobile ATC Bar (New Component)
- Position: Fixed bottom
- Height: 60px
- Background: White with top shadow
- Content: Price (left) + ATC button (right, coral bg)
- Trigger: Appears when original ATC scrolls out of viewport
- Z-index: Above all content, below cart drawer
Trust Badge Row (PDP Component)
- Layout: Inline flex, gap 12px
- Each badge: Checkmark icon + label
- Badges: Clinically Proven, Vet-Developed, Made in U.S.A.
- Style: Small text, muted color, confidence markers (not shouty)
Mentions
- Single static hero beats rotating carousel (supports)
- Quiz email-gate-first as a major friction point (supports)