Cobi Clean Landing Pages

An iterative journey building high-converting landing pages for Cobi Laundry Buds, targeting moms who prioritize family safety.

The Iteration Process

This project demonstrates how landing pages evolve through feedback and refinement. Each version addressed specific issues and incorporated learnings to improve conversion potential and brand alignment.

Version History

v1

Laundry Buds Lander (Initial)

First attempt at a landing page for Cobi Laundry Buds with 30% first-order discount and volume pricing.

Used emojis despite guidelines No brand colors from site Didn't use provided assets Generic layout
View Page
v2

Laundry Buds Lander v2

Addressed v1 feedback by following the brief generator process, using provided assets, and removing emojis.

Removed emojis, added SVG icons Used provided images and videos Generated proper brief first Better brand feel
View Page
v3

Moms Audience Lander

Pivoted to target moms specifically with safety-first messaging. Used "landing-page-system 2" workflow with 7-step process.

Moms-focused messaging Safety before sustainability angle Mom-specific testimonials 7-step workflow (READ > INVENTORY > MAP > COPY > BRIEF > APPROVE > BUILD) Image paths needed URL encoding
View Page
v4 - Current

Moms Audience Lander v4

Final iteration using "landing-page-system_5" with brand scraping. Colors and fonts extracted directly from cobiclean.com. Added prominent volume pricing table to incentivize bundling.

Brand scraped from cobiclean.com Actual brand colors (#13294b, #FFCE2E) Figtree font matching site Volume pricing table (save up to $34) Video comparison section Sticky mobile CTA Proper URL encoding for assets
View Page

Key Learnings

  • No emojis: Use SVG icons from visual-elements.html for a professional look
  • Scrape the brand: Extract actual colors and fonts from the client's website instead of guessing
  • Use provided assets: Always inventory and map assets to sections before building
  • Brief before build: Generate and save a structured JSON brief, get approval, then build
  • URL encode paths: Spaces in folder names need %20 encoding for GitHub Pages
  • Message match: Tailor copy to the specific audience (moms = safety first, eco second)
  • Incentivize bundles: Show clear savings to encourage larger orders
HTML/CSS SVG Icons Figtree Font Mobile Responsive GitHub Pages Claude Code