Landing Page Kampanii Google Ads

Tło projektu

Digital Growth Agency to agencja marketingowa specjalizująca się w kampaniach Google Ads dla firm B2B. Zespół prowadził kampanie dla klienta z branży SaaS (oprogramowanie HR), ale konwersja na landing page wynosiła zaledwie 1.2%.

Head of Performance, Katarzyna Wiśniewska, zleciła mi przeprojektowanie landing page:

• Poprawa UX i czytelności value proposition
• Zwiększenie współczynnika konwersji do minimum 5%
• Obniżenie kosztu pozyskania leada (CPL)
• Zachowanie PageSpeed Score powyżej 90/100

Problem do rozwiązania

Analiza istniejącego landing page ujawniła:

1. Niejasny przekaz: Nagłówek hero nie komunikował wartości produktu. Użytkownicy nie rozumieli, co zyskują w ciągu pierwszych 3 sekund.
2. Zbyt długi formularz: 12 pól w formularzu (imię, nazwisko, email, telefon, firma, stanowisko, branża, liczba pracowników, budżet, termin, dodatkowe uwagi, zgody). Bounce rate na formularzu = 78%.
3. Brak social proof: Zero testimoniali, case studies czy logotypów klientów. Brak zaufania do nowego produktu.
4. Słabe CTA: Przycisk "Wyślij formularz" zamiast benefit-driven CTA. Jeden CTA tylko na dole strony.
5. Techniczne problemy: PageSpeed Score 62/100 (mobile). Obrazy nie były zoptymalizowane, brak lazy loading, ciężki JavaScript bundle.

Dane z heatmap (Hotjar):

• 89% użytkowników nie scrollowało poniżej hero
• Dead clicks na nieaktywne elementy (FAQ bez rozwijania)
• Rage clicks na przycisku submit formularza (walidacja nie działała)

Proponowane rozwiązanie

Strategia UX/UI

Przeprojektowałem landing page w oparciu o framework PAS (Problem - Agitate - Solve):

• Problem: Sekcja hero pokazuje pain point (trudność w zarządzaniu HR)
• Agitate: Sekcje rozwijają konsekwencje problemu (koszty, czas, frustracja)
• Solve: Produkt jako rozwiązanie + proof (case study, testimoniale)

Architektura sekcji (nowa)

1. Hero: Nagłówek benefit-driven + podtytuł z konkretną wartością + CTA above fold
2. Social Proof Bar: Logotypy 8 klientów + licznik "500+ firm używa"
3. Problem: 3 najczęstsze bóle HR managerów (dane z wywiadów)
4. Solution: Jak produkt rozwiązuje każdy z 3 problemów (features → benefits)
5. How It Works: 3 kroki od rejestracji do wartości (ilustracje)
6. Case Study: Mini case study z metrykami (ROI, oszczędność czasu)
7. Testimonials: 3 opinie z prawdziwych klientów (zdjęcia, stanowiska, firmy)
8. FAQ: 5 najczęstszych pytań (expandable accordion)
9. Final CTA: Powtórzenie głównego CTA z additional urgency (ograniczona liczba miejsc)

Formularz multi-step

Zastąpiłem długi formularz 12-polowy 3-krokowym wizardem:

• Krok 1: Email (pojedyncze pole, niski próg wejścia)
• Krok 2: Imię + Firma (2 pola, budowanie kontekstu)
• Krok 3: Telefon + zgoda RODO (finalizacja, opcjonalnie dodaj "Preferowany termin rozmowy")

Progress bar pokazuje "Krok 2 z 3" → zwiększa commitment (efekt Zeigarnik). Automatyczny scoring leadów w HubSpot na podstawie domeny emailowej (firmowy vs. gmail).

Tech Stack

Proces wdrożenia

1. Research & Audyt (3 dni):
   • Analiza Google Analytics (gdzie odpada ruch)
   • Hotjar heatmapy, session recordings, surveys
   • Wywiad z 5 klientami produktu (pain points, motivacje)
   • Konkurencja: analiza 10 landing pages z branży SaaS HR
2. Wireframes & Copy (4 dni):
   • Szkice sekcji w Figma (low-fi wireframes)
   • Copywriting benefit-driven (problem → solution → proof)
   • A/B testy nagłówków z zespołem (5 wariantów, wybór 2 finałowych)
3. Design (5 dni):
   • Hi-fi mockups w Figma (desktop + mobile)
   • Design system (kolory, typografia, spacing)
   • Interaktywny prototyp (klikalne transitions)
   • User testing z 3 osobami z target group
4. Development (2 tygodnie):
   • Sprint 1: Setup Next.js, podstawowe sekcje, responsive
   • Sprint 2: Formularz multi-step, integracja HubSpot API, animacje
   • Performance optimization: lazy loading images, WebP, code splitting
   • SEO: meta tags, schema.org, sitemap
5. Testing & Launch (3 dni):
   • QA: testy manualne na różnych urządzeniach i przeglądarkach
   • A/B test setup (2 warianty nagłówka hero)
   • Deployment na Vercel (CDN, auto-scaling)
   • Monitoring: Google Analytics events, Hotjar heatmaps
6. Optymalizacja (ongoing):
   • Tygodniowe review metryk (konwersja, bounce rate, time on page)
   • Iteracje na podstawie heatmap (zmiana kolejności sekcji, CTA copy)
   • A/B testy: kolory CTA, długość copy, obrazy vs. ilustracje

Czas realizacji: 4 tygodnie (od kick-off do produkcji)

Budżet: 8 500 PLN

Rezultaty i metryki

Szczegółowa analiza (po 30 dniach):

• Konwersja wzrosła 7x: Z 1.2% do 8.5% (średnia z 30 dni). Najlepszy dzień: 11.2%.
• Koszt leada spadł o 60%: Z 180 PLN do 72 PLN. Oszczędność na 100 leadów: 10 800 PLN.
• Jakość leadów wzrosła: Formularz multi-step filtruje spamerów. Lead-to-customer rate wzrósł z 8% do 18% (dane z CRM po 2 miesiącach).
• ROI kampanii Google Ads: Przed: ROAS 2.1. Po: ROAS 5.4 (ten sam budżet, więcej konwersji).
• User engagement: Avg. time on page wzrósł z 23s do 1m 48s. 68% użytkowników scrolluje do FAQ.

Wnioski i lekcje

Co zadziałało:

• Formularz multi-step: Zmniejszenie friction (1 pole na start zamiast 12) zwiększyło completion rate z 22% do 78%.
• Social proof above fold: Logo bar klientów + licznik "500+ firm" buduje trust w pierwszych 3 sekundach.
• Benefit-driven copy: Nagłówek zmieniony z "Platforma HR dla nowoczesnych firm" na "Zaoszczędź 20h miesięcznie na administracji HR" → 3x więcej scrollów.
• Performance optimization: PageSpeed 98/100 → lepszy Quality Score w Google Ads → niższy CPC (koszt kliknięcia).

Co testuję dalej:

• Video explainer w hero: Hipoteza: 60s video zwiększy czas na stronie i konwersję. Test planowany na Q1 2025.
• Exit-intent popup: Dla użytkowników, którzy nie wypełnili formularza → offer lead magnet (darmowy ebook).
• Personalizacja przez UTM: Różny copy dla różnych źródeł ruchu (LinkedIn vs. Google Ads vs. Facebook).

Techniczne highlights

• Performance: Next.js Image Optimization (WebP, auto-sizing), code splitting per route, lazy loading below fold. Initial load: 1.2s (mobile 4G).
• A/B testing: Google Optimize dla 2 wariantów nagłówka. Winner po 1000 sesji: "Zaoszczędź 20h miesięcznie" (9.2% CVR) vs. "Zautomatyzuj procesy HR" (7.1% CVR).
• Analytics: GA4 custom events: scroll depth (25%, 50%, 75%, 100%), CTA clicks, form step completion, video play. Lejek konwersji w Looker Studio.
• SEO: Schema.org SoftwareApplication + FAQPage markup. Meta tags dynamiczne (Open Graph dla social share). Sitemap + robots.txt.