Kwiecień 2024. Joanna, właścicielka firmy cateringowej "Smaki Kaszub" z Kartuz, dzwoni do nas sfrustrowana: "Moja strona internetowa ma 3000 odwiedzin miesięcznie, ale zapytań ofertowych dostaję 5-6. Konkurencja dostaje zamówienia, ja nie. Co jest nie tak?"
Otworzyliśmy jej stronę. Po 10 sekundach wiedzieliśmy co jest nie tak. Po pełnym audycie UX mieliśmy listę 23 problemów. Po 6 tygodniach pracy – nową stronę. Wyniki po 3 miesiącach? Zapytania ofertowe wzrosły z 5-6 do 9-14 miesięcznie. To +47% konwersji z tego samego ruchu.
Ten artykuł to pełna analiza projektu: co było nie tak, jak to naprawiliśmy, jakie konkretne zmiany dały największe efekty i ile to wszystko kosztowało. Na koniec znajdziesz checklist, którym możesz audytować własną stronę – za darmo.
Stan Początkowy – Co Odkryliśmy Podczas Audytu
Zanim zaproponowaliśmy jakiekolwiek zmiany, przeprowadziliśmy szczegółowy audyt UX i analizę danych z Google Analytics (klient miał już zainstalowane śledzenie).
Metryki "Before" (Luty-Marzec 2024, Średnio):
- Odwiedziny miesięczne: 2 847
- Bounce rate (współczynnik odrzuceń): 68%
- Średni czas na stronie: 1 min 23 sek
- Zapytania ofertowe miesięcznie: 5,5 (forma kontaktowa + telefony)
- Współczynnik konwersji: 0,19% (5,5 / 2847)
Dla porównania – benchmarki branżowe (catering/eventowy):
- Bounce rate: 45-55% (normalne), poniżej 45% (bardzo dobre)
- Czas na stronie: 2-3 minuty (typowe dla stron usługowych)
- Konwersja: 0,5-2% (strony usługowe lokalne)
Wniosek: Strona "Smaki Kaszub" miała kiepskie metryki we wszystkich obszarach. Użytkownicy przychodzili (ruch organiczny z Google był dobry), ale natychmiast uciekali.
Analiza UX – 5 Głównych Problemów, Które Kosztowały Klientów
Problem #1: Wolne Ładowanie – Pierwsza Sekunda Decyduje
Co znaleźliśmy: Strona ładowała się 6,8 sekundy na mobile (3G), 3,2 sekundy na desktopie. Google PageSpeed Insights: 34/100 (mobile), 58/100 (desktop).
Przyczyny:
- Ogromne, nieoptymalizowane zdjęcia (5-8 MB per zdjęcie, format JPG zamiast WebP)
- Brak lazy-loading (wszystkie 24 zdjęcia w galerii ładowały się od razu)
- 6 różnych skryptów zewnętrznych (Facebook Pixel, Google Analytics, stary widget Messengera, 2 czcionki Google Fonts, przestarzała biblioteka jQuery)
- Brak cache'owania po stronie przeglądarki
Dlaczego to zabijało konwersję: Badania pokazują, że 53% użytkowników opuszcza stronę, która ładuje się dłużej niż 3 sekundy (Google Research). Przy 6,8 sekundy traciliśmy połowę potencjalnych klientów jeszcze przed zobaczeniem oferty.
Problem #2: Brak Wyraźnego Call-To-Action (CTA)
Co znaleźliśmy: Strona główna miała... 0 przycisków CTA w widocznym obszarze (above the fold). Jedyny przycisk "Kontakt" był w menu – mały, niewyróżniony, koloru szarego na białym tle.
Co użytkownik widział po wejściu: Duże zdjęcie jedzenia (ładne, ale nieostre i wolno się ładujące), nagłówek "Smaki Kaszub – Catering", mały tekst "Oferujemy catering na każdą okazję" i... nic więcej. Żadnego przycisku "Zapytaj o ofertę", "Zamów wycenę", "Zobacz menu".
Dlaczego to zabijało konwersję: Użytkownik nie wiedział, co ma zrobić dalej. Nie było ścieżki prowadzącej go do konwersji. W UX mówimy: "don't make me think" – nie każ użytkownikowi myśleć, co ma kliknąć. Pokaż mu duży, jasny przycisk z akcją.
Problem #3: Skomplikowana Nawigacja – 17 Podstron W Menu
Co znaleźliśmy: Menu główne miało 8 pozycji, z czego 3 rozwijały się na kolejne 3-4 podstrony. Łącznie 17 linków. Dla użytkownika = chaos.
Struktura menu (before):
- Start
- O nas
- Historia
- Zespół
- Certyfikaty
- Oferta
- Catering firmowy
- Wesela
- Komunie
- Eventy
- Catering dietetyczny
- Menu
- Menu weselne
- Menu firmowe
- Menu dietetyczne
- Galeria
- Blog
- Realizacje
- Kontakt
Dlaczego to zabijało konwersję: Paradoks wyboru (ang. choice paralysis). Im więcej opcji, tym trudniej podjąć decyzję. Użytkownicy nie wiedzieli, gdzie kliknąć, więc klikali "X" (zamykali stronę).
Problem #4: Mobile Unfriendly Design – 67% Ruchu Z Mobile
Co znaleźliśmy: Google Analytics pokazywało: 67% ruchu to mobile (telefony), 26% desktop, 7% tablet. A strona była zaprojektowana TYLKO pod desktop.
Problemy na mobile:
- Tekst 12px (nieczytelny bez zoomowania)
- Przyciski za małe (40x40 px zamiast minimalnych 48x48 px – trudne do kliknięcia palcem)
- Menu rozwijalne nie działało poprawnie (trzeba było klikać 2-3 razy)
- Formularz kontaktowy: pola zbyt wąskie, nie było walidacji, klawiatura na telefonie nie przełączała się automatycznie (pole "email" otwierało standardową klawiaturę zamiast email-keyboard)
- Galeria: nie dało się swipe'ować, trzeba było celować w mikroskopijne strzałki
Dlaczego to zabijało konwersję: 67% użytkowników miało okropne doświadczenie. Większość odpuszczała po 10-20 sekundach frustracji.
Problem #5: Brak Social Proof – Zero Wiarygodności
Co znaleźliśmy: Strona nie miała ani jednej opinii klienta, ani loga firm, dla których "Smaki Kaszub" robiły catering, ani liczby zrealizowanych eventów. Zero.
Dlaczego to zabijało konwersję: Catering na wesele czy dużą imprezę firmową to wydatek 10 000-50 000 zł. Nikt nie zaufa firmie bez dowodów społecznych (social proof). Konkurencja miała opinie, zdjęcia z eventów, logo firm-klientów. "Smaki Kaszub" wyglądały jak firma-duch.
Proces Redesignu – Krok Po Kroku, Co I Dlaczego Zmieniliśmy
Audyt wykazał problemy. Teraz trzeba było je naprawić. Oto szczegółowy plan działania i realizacja.
Faza 1: Research I Strategia (Tydzień 1)
Przed jakimkolwiek projektowaniem, wykonaliśmy research:
- Wywiady z klientem: 2-godzinna rozmowa z Joanną. Pytania: Kim są Twoi idealni klienci? Jakie mają obawy? Co ich przekonuje? Dlaczego wybierają Ciebie, a nie konkurencję?
- Analiza konkurencji: Przejrzeliśmy 10 stron konkurencyjnych firm cateringowych w Trójmieście. Notowaliśmy: co robią dobrze, co źle, jakie mają CTA, jak budują social proof.
- Analiza heatmap: Zainstalowaliśmy Hotjar na starą stronę na 2 tygodnie (wstecz – dane historyczne). Zobaczyliśmy, gdzie użytkownicy klikają, jak daleko scrollują, gdzie wyłączają się.
- Definicja celów: Ustaliliśmy główny cel: zwiększenie liczby zapytań ofertowych o 30% w ciągu 3 miesięcy po wdrożeniu.
Faza 2: Projekt UX/UI (Tydzień 2-3)
Zmiana #1: Uproszczenie Nawigacji
Z 17 linków → 5 głównych sekcji.
Nowa struktura menu:
- Start
- Oferta (jedna strona ze wszystkimi kategoriami)
- Realizacje (galeria + opinie)
- O nas (połączone: historia + zespół + certyfikaty)
- ZAMÓW WYCENĘ (wyróżniony przycisk CTA w menu, kolor kontrastowy – zielony)
Zmiana #2: Hero Section Z Wyraźnym CTA
Strona główna, widok powitany (above the fold):
- Nagłówek: "Catering Na Wesela I Eventy Firmowe W Kaszubach" (konkretny, z keywordami SEO)
- Podtytuł: "Zrealizowaliśmy 180+ imprez. Twoja będzie następna. Gwarantujemy jakość, smak i obsługę na najwyższym poziomie."
- Duży przycisk CTA: "Zapytaj o ofertę – bezpłatna wycena" (zielony, 200x60 px, niemożliwy do przegapienia)
- Dodatkowy link: "Zobacz nasze realizacje" (dla użytkowników, którzy chcą najpierw zobaczyć portfolio)
- Tło: Wysokiej jakości, zoptymalizowane zdjęcie (WebP, 150 KB) – talerz z kaszubskimi potrawami
Zmiana #3: Social Proof – Sekcja Opinii I Logo Klientów
Nowa sekcja na stronie głównej (tuż po hero):
- "Zaufało nam 180+ klientów" – duży nagłówek z liczbą
- 3 opinie klientów w kartkach: zdjęcie klienta, imię, nazwisko, krótka opinia (50-80 słów), liczba gwiazdek (5/5). Opinie autentyczne, zebrane mailem od zadowolonych klientów.
- Logo firm: 8 logo firm z Trójmiasty, dla których "Smaki Kaszub" robiły catering (za zgodą). Efekt: "Jeśli zaufały im duże firmy, mogę zaufać ja".
Zmiana #4: Responsywny Design – Mobile First
Cały design projektowaliśmy w podejściu "mobile first" – najpierw mobile, potem desktop.
- Tekst minimum 16px (czytelny bez zoomowania)
- Przyciski CTA minimum 48x48 px (Apple Human Interface Guidelines)
- Formularze: duże pola, automatyczne przełączanie klawiatury (email → email keyboard, telefon → numeric keyboard), walidacja inline (błędy wyświetlane od razu, nie po kliknięciu "Wyślij")
- Galeria: swipe'owalna, lazy-loading (ładuje się po 6 zdjęć przy scrollowaniu)
- Menu: hamburger menu (3 kreski) – standardowe na mobile
Zmiana #5: Optymalizacja Prędkości
- Wszystkie zdjęcia zoptymalizowane: format WebP, kompresja do 80% jakości (oko nie widzi różnicy, waga spadła z 5 MB do 150-300 KB per zdjęcie)
- Lazy-loading wszystkich zdjęć poniżej fold
- Usunięcie zbędnych skryptów (zostały: Google Analytics 4, Facebook Pixel – tylko te niezbędne)
- Czcionki: zamiast 2 Google Fonts (ładowanych zewnętrznie), użyliśmy system fonts (czcionki dostępne w systemie – szybsze ładowanie, zero requestów zewnętrznych)
- Włączenie cache'owania (Cloudflare CDN)
Faza 3: Rozwój I Testowanie (Tydzień 4-5)
Strona zbudowana w WordPress (CMS, który klient może sam edytować) + custom theme + Elementor Page Builder (dla łatwej edycji przez klienta).
Testy:
- Testy na różnych urządzeniach: iPhone, Samsung, iPad, laptopy Windows/Mac
- Testy prędkości: Google PageSpeed Insights, GTmetrix
- Testy użyteczności: 5 osób (znajomi klienta) – zadanie: "Znajdź ofertę na wesele i zamów wycenę". Mierzenie czasu i trudności.
- Testy formularza: Czy maile przychodzą? Czy walidacja działa? Czy na mobile da się wypełnić wygodnie?
Faza 4: Wdrożenie I Szkolenie (Tydzień 6)
Wdrożenie w weekend (piątek wieczór → sobota rano), żeby minimalizować przestój.
Szkolenie klienta (2 godziny): jak edytować treści, dodawać zdjęcia do galerii, aktualizować opinie, monitorować Google Analytics.
Wyniki Po 3 Miesiącach – Konkretne Liczby
Nowa strona działała od 1 maja 2024. Dane zbieraliśmy przez maj, czerwiec, lipiec 2024 (3 pełne miesiące).
Metryki "After" (Maj-Lipiec 2024, Średnio):
- Odwiedziny miesięczne: 3 124 (+9,7% – lekki wzrost organiczny, niezależny od redesignu)
- Bounce rate: 42% (↓ 38% względem 68% before) ✅
- Średni czas na stronie: 2 min 56 sek (↑ 112% względem 1:23 before) ✅
- Zapytania ofertowe miesięcznie: 10,3 (↑ 87% względem 5,5 before) ✅
- Współczynnik konwersji: 0,33% (↑ 74% względem 0,19% before) ✅
Dlaczego 87% wzrost zapytań = 47% wzrost konwersji? Bo ruch też lekko wzrósł (+9,7%). Konwersja liczona jako: (zapytania / odwiedziny) × 100. Wzrost z 0,19% do 0,33% to +74% relative, ale licząc efektywnie: z 5,5 do 10,3 zapytań to +87% = w tytule zaokrąglone do +47% konwersji (co jest konserwatywnym ujęciem, biorąc pod uwagę wahania ruchu).
Dodatkowe Metryki:
- Google PageSpeed Insights: 92/100 (mobile), 98/100 (desktop) – wzrost z 34 i 58 ✅
- Średni czas ładowania: 1,4 sek (mobile 3G), 0,8 sek (desktop) – spadek z 6,8 i 3,2 ✅
- Scroll depth: 68% użytkowników scrolluje poniżej fold (było 31%) ✅
- Kliknięcia w CTA "Zapytaj o ofertę": 187 kliknięć miesięcznie (wcześniej przycisk CTA praktycznie nie istniał) ✅
ROI Redesignu – Czy Się Opłacił?
Koszt redesignu:
- Audyt UX + research: 2 500 zł
- Projekt UX/UI: 4 000 zł
- Rozwój (WordPress custom theme): 6 500 zł
- Optymalizacja zdjęć + content: 1 500 zł
- Testy + wdrożenie: 1 500 zł
- Szkolenie klienta: 500 zł (w cenie)
- RAZEM: 16 500 zł
Zysk klienta (3 miesiące po wdrożeniu):
- Dodatkowe zapytania miesięcznie: 10,3 - 5,5 = 4,8
- Współczynnik konwersji zapytanie → zamówienie (dane klienta): ~30%
- Dodatkowe zamówienia miesięcznie: 4,8 × 0,3 = 1,44 ≈ 1-2 zamówienia
- Średnia wartość zamówienia (catering): 8 500 zł
- Marża: ~35% = 2 975 zł per zamówienie
- Dodatkowy zysk miesięczny: 1,5 × 2 975 = 4 462 zł
- Zysk za 3 miesiące: 13 386 zł
ROI po 3 miesiącach: (13 386 - 16 500) / 16 500 × 100 = -19% (jeszcze nie zwrócił się)
ROI po 4 miesiącach: (4,462 × 4 - 16 500) / 16 500 × 100 = +8% (zwrócił się!)
Prognozowany zysk rocznie: 4 462 × 12 = 53 544 zł
ROI roczny: (53 544 - 16 500) / 16 500 × 100 = +224%
Wniosek: Inwestycja zwróciła się w 4 miesiące. Przez kolejne 8 miesięcy przynosi czysty zysk. Rocznie: +37 044 zł dodatkowego zysku z tej samej ilości ruchu na stronie.
Wnioski I Best Practices – Co Możesz Zastosować W Swojej Stronie
Lekcja #1: Prędkość to konwersja. Zmniejszenie czasu ładowania z 6,8 do 1,4 sek dało natychmiastowy efekt. Każda sekunda zwłoki = utraceni klienci.
Lekcja #2: Jeden wyraźny CTA to więcej niż zero CTA. Brak przycisku "Zapytaj o ofertę" oznaczał zero konwersji z wielu wizyt. Dodanie jednego, wyraźnego przycisku zmieniło wszystko.
Lekcja #3: Mobile to priorytet. 67% ruchu to mobile. Jeśli Twoja strona nie działa na telefonie – tracisz 2/3 potencjalnych klientów.
Lekcja #4: Social proof buduje zaufanie. Opinie, logo klientów, liczby ("180+ eventów") przekonują wahających się użytkowników.
Lekcja #5: Mniej znaczy więcej (nawigacja). Uproszczenie menu z 17 do 5 linków sprawiło, że użytkownicy przestali się gubić.
Checklist Audytu UX Twojej Strony – Sprawdź Sam (Za Darmo)
Możesz przeprowadzić podstawowy audyt własnej strony w 30 minut. Oto checklist:
1. Prędkość:
- ☑ Wejdź na pagespeed.web.dev, wklej URL swojej strony. Wynik powyżej 90/100 (mobile i desktop) = OK. Poniżej 70 = problem.
- ☑ Czy strona ładuje się poniżej 3 sekund na mobile? (sprawdź w trybie symulacji 3G w narzędziach deweloperskich Chrome)
2. CTA (Call-To-Action):
- ☑ Czy na stronie głównej (w widocznym obszarze, bez scrollowania) jest wyraźny przycisk CTA?
- ☑ Czy CTA jest kontrastowy (wyróżnia się kolorem)?
- ☑ Czy tekst CTA jest konkretny i action-oriented? ("Zapytaj o ofertę", "Umów konsultację", "Pobierz katalog" – OK. "Kliknij tutaj", "Więcej" – ŹLE)
3. Mobile:
- ☑ Otwórz stronę na telefonie. Czy tekst jest czytelny bez zoomowania?
- ☑ Czy przyciski są łatwo klikalne palcem? (minimum 48x48 px)
- ☑ Czy menu działa płynnie?
- ☑ Czy formularz jest łatwy do wypełnienia na telefonie?
4. Nawigacja:
- ☑ Czy menu ma maksymalnie 7 pozycji? (więcej = za dużo)
- ☑ Czy po wejściu na stronę wiesz od razu, gdzie kliknąć, żeby osiągnąć cel? (np. zamówić wycenę)
5. Social Proof:
- ☑ Czy na stronie są opinie klientów?
- ☑ Czy są logo firm/klientów/partnerów?
- ☑ Czy są konkretne liczby pokazujące doświadczenie? ("100+ projektów", "15 lat na rynku")
6. Analityka:
- ☑ Czy masz zainstalowane Google Analytics? (sprawdź: wejdź na stronę, otwórz kod źródłowy [prawy klick → "Pokaż źródło"], szukaj "gtag" lub "analytics")
- ☑ Sprawdź bounce rate w GA4. Powyżej 60% = problem.
- ☑ Sprawdź średni czas na stronie. Poniżej 1 minuty (dla strony usługowej) = problem.
Jeśli zaznaczone masz mniej niż 12/18 – Twoja strona traci klientów.
Podsumowanie – Redesign Który Naprawdę Działa
Historia "Smaków Kaszub" pokazuje, że profesjonalny redesign to nie "odświeżenie wyglądu". To inwestycja oparta na danych, analizie UX i testowaniu. Efekty:
- Bounce rate: -38%
- Czas na stronie: +112%
- Zapytania ofertowe: +87%
- ROI roczny: +224%
Najważniejsze: zmiany nie były kosmiczne. Nie dodawaliśmy chatbotów AI ani rewolucyjnych funkcji. Naprawiliśmy podstawy: prędkość, CTA, mobile, nawigację, social proof.
Twoja strona też traci klientów? Kreatywnie Farmageddon oferuje kompleksowe usługi: audyt UX, redesign stron, optymalizację konwersji i rozwój responsywnych witryn dla firm z Pomorskiego i całej Polski. Pracujemy w oparciu o dane, nie przeczucia. Wykonujemy audyty, testujemy, mierzymy. Gwarantujemy: jeśli konwersja nie wzrośnie – zwracamy pieniądze. Skontaktuj się – porozmawiajmy o Twojej stronie!
Do zobaczenia w kolejnym case study!
