O kliencie
Agnieszka Bożejewicz, właścicielka PPHU BAGA, to lifestyle manager z ponad dwudziestoletnim doświadczeniem w administracji, zarządzaniu oraz prowadzeniu skomplikowanych projektów operacyjnych — zarówno w kraju, jak i za granicą. Jej codzienna praca obejmuje obszary wymagające najwyższej dyskrecji: dokumenty prawne i finansowe, zarządzanie nieruchomościami, obsługę flot samochodowych, nadzór nad budżetami oraz koordynację wielowątkowych zadań dla osób decyzyjnych — CEO, właścicieli firm oraz przedstawicieli kadry menedżerskiej.
BAGA nie jest kolejną firmą usługową, którą można zbudować w oparciu o standardowy landing page z formularzem kontaktowym. To marka premium, której klient docelowy ceni trzy rzeczy: spokój, bezpieczeństwo i kontrolę. Projekt digital wymagał więc redefinicji samego pojęcia „strony internetowej” — tak, aby stała się ona nie tyle kanałem sprzedaży, co filtrem oddzielającym właściwego klienta od ciekawskich.
Wyzwanie
Klientka postawiła przed nami zadanie wykraczające daleko poza standardowe wdrożenie strony internetowej. Postawiła je w formie jednego, bardzo precyzyjnego zdania, które stało się kompasem całego projektu:
„Twoja strona ma sprawić, że biedny klient nie napisze, ciekawski zamknie kartę, a właściwy pomyśli: Ona jest dokładnie tym, czego potrzebuję.”
To zdanie jest ekstremalnie wymagające z perspektywy projektanta i deweloperów. Odwraca ono klasyczny paradygmat e-marketingu, w którym celem strony jest maksymalizacja konwersji. W przypadku BAGA celem było coś odwrotnego: minimalizacja liczby niewłaściwych zapytań i maksymalizacja jakości tych, które już do klientki dotrą. Marka musiała komunikować standard operacyjny, a nie zachęcać do kliknięcia.
Drugie pełne wyzwanie to rebranding z istniejącego sklepu PrestaShop (który w komunikacji dominował nad usługami i mylił target) na rozwiązanie, w którym to landing usługowy jest bohaterem, a sklep — dodatkiem. Trzeba było przeprowadzić pełną migrację adresów URL, ustawić redirecty 301, zmienić nomenklaturę („Sklep” → „Atelier BAGA”) i jednocześnie zachować pozycję w indeksie Google.
Stary sklep PrestaShop — produkty dominują
Brak landing page dla usług lifestyle management
Komunikacja zorientowana na produkt, nie na usługę
Brak filtrowania klientów na etapie strony
Standardowa nomenklatura e-commerce („Sklep”, „Koszyk”)
Brak dyskretnej ochrony panelu administracyjnego
Struktura treści nieadekwatna do CEO jako targetu
Landing page premium — usługi jako bohater
Sklep ukryty za dyskretnym linkiem „Atelier”
Komunikacja manifestowa, cicha, operacyjna
Strona jako filtr klientów — premium filtering
Minimalizm, jedno CTA, zero scrolla w hero
Hardening bezpieczeństwa, /bagadm z token auth
Treść dopasowana do decydenta — bez „jak samodzielnie”
Filozofia projektu
Klientka sformułowała swoją filozofię w zdaniu, które powtarzaliśmy przy każdej decyzji projektowej: „Porządek nie jest estetyką ani hobby. Jest decyzją operacyjną”. To przekonanie przełożyliśmy bezpośrednio na siedem zasad designu, które stały się stałym referencyjnym filtrem dla każdej sekcji, każdej ikony, każdego słowa:
-
Cisza wizualna
Brak bodźców konkurujących o uwagę. Każdy element ma powód istnienia, niepotrzebne zostaje usunięte -
Minimalizm operacyjny
Projekt działa jak dobry operator — niewidoczny, ale nieomylny. Whitespace zamiast ozdobników -
Zero stock photos z ludźmi
Brak twarzy, brak uśmiechów z Getty. Tylko detale, przedmioty, faktury — dowody standardu -
Jedno CTA na ekran
W hero — jeden przycisk. Żadnych zachęt, bannerów, pop-upów. Decyzja musi być czysta -
Dyskrecja strukturalna
Brak adresu biura, telefon udostępniany dopiero po rozmowie, LinkedIn zamiast social mediów -
Zero bloga poradnikowego
Brak artykułów „jak samodzielnie” — klient premium nie robi samodzielnie, tylko deleguje -
Brak opinii gwiazdkowych
Dyskrecja klientów jest aksjomatem. Dowodem jest pozycja marki i publikacje medialne, nie recenzje
Proces — cztery iteracje projektu
Projekt BAGA nie powstał w jednej iteracji. Zrealizowany został w modelu czterech wersji (v1.0 → v4.0), rozłożonych w czasie między 8 stycznia a ~15 lutego 2026 roku. Każda z wersji rozwiązywała inny problem — od pierwszego uchwycenia estetyki, przez kompletny redesign po warsztatach strategicznych, aż po hardening bezpieczeństwa i migrację z PrestaShop.
v1.0 — Pierwsza wersja (8 stycznia 2026)
Wersja startowa z ciemnym motywem, w której sklep pełnił rolę hero. Po prezentacji klientka oceniła, że komunikacja jest zbyt bliska standardowemu e-commerce i nie koresponduje z pozycjonowaniem marki. Decyzja: pełny redesign.
v2.0 — Kompletny redesign (27 stycznia 2026)
Przejście na jasny, minimalistyczny design premium. Landing usługowy staje się głównym bohaterem, sklep otrzymuje nową nazwę „Atelier BAGA” i zostaje ukryty za dyskretnym linkiem w stopce. Pełna rewizja palety, typografii i architektury informacji.
v3.0 — Rozbudowa treści i podstron
Dodanie kluczowych sekcji — O mnie, Dom & Biuro, Narzędzia, Media. Formularz aplikacyjny podzielony na cztery kroki (obszar, sytuacja, model współpracy, dane). Zbudowanie sekcji FAQ z dziesięcioma pytaniami sterowanymi z repeatera ACF.
v4.0 — Bezpieczeństwo i migracja (5 lutego 2026)
Hardening produkcyjny: hardening .htaccess, MU-Plugin /bagadm z autoryzacją tokenową rotowaną dobowo przez AUTH_SALT, pełen zestaw redirectów 301 z PrestaShop do WooCommerce, ukrycie /wp-login.php, rebranding ekranu logowania. Wdrożenie produkcyjne.
Zakres prac
1. Architektura informacji i strategia contentu
Zanim powstała pierwsza linia kodu, przeprowadziliśmy pełne warsztaty strategiczne z klientką. Celem było zdefiniowanie nie tyle struktury strony, co profilu klienta docelowego i jego oczekiwań. Wynikiem jest architektura kilkunastu podstron, w której każda pełni odrębną rolę w procesie kwalifikacji leada.
| Podstrona | Rola w strukturze |
|---|---|
| Strona główna | Landing dla usług — hero fullscreen bez scrolla, jedno CTA |
| /wspolpraca | Model abonamentowy z trzema poziomami (Podstawowa, Rozszerzona, Zarządzanie Prywatne) |
| /wspolpraca/aplikuj | Formularz 4-krokowy — obszar, sytuacja, model, dane kontaktowe |
| /baga | Filozofia marki, manifest operacyjny |
| /o-mnie | Bio Agnieszki — kompetencje, doświadczenie, styl pracy |
| /dom-biuro | Specjalizacja — zakres operacyjny dla rezydencji i biur |
| /narzedzia | SOP, systemy, metodologie wykorzystywane w pracy |
| /media | Publikacje prasowe i telewizyjne — social proof w wersji premium |
| /atelier | Dyskretny sklep WooCommerce z produktami BAGA |
| /kontakt | Email + LinkedIn, brak telefonu publicznie |
| Strony prawne | Polityka prywatności, regulamin, RODO, cookies |
2. Design system v2.0 — cisza wizualna w 6 kolorach
Design system BAGA został zbudowany wokół minimalizmu operacyjnego. Paleta ma sześć kolorów, typografia — jeden font w trzech wariantach, a komponenty są projektowane tak, aby milczały dopóki nie są potrzebne. Akcent złota został zredukowany do jednego bronze’owego tonu (#C4A676), pojawiającego się jedynie w subtelnych detalach — podkreśleniach, liniach dekoracyjnych i efektach hover.
Tło: złamana biel #F8F7F4
Tekst główny: czerń #1A1A1A
Ciepła szarość: #8B8985
Szary jasny: #A39E93
Akcent Gold (bronze): #C4A676
Hover: #2A2A2A, focus: złoty ring
Rodzina: Rubik (400, 500, 600)
Headings: Rubik 500–600
Body: Rubik 400
Akcenty: Rubik uppercase, letter-spacing 0.2em
Skala: text-xs (12px) → text-6xl (64px)
Breakpoints: sm/md/lg/xl/2xl (640–1536px)
3. Hero bez scrolla — decyzja projektowa wysokiego ryzyka
Jedną z odważniejszych decyzji projektowych było stworzenie hero zajmującego 100% viewportu bez koniecznego scrolla do CTA. W e-commerce uchodzi to za „grzech śmiertelny” — konwencja mówi o przekroczeniu fold’a. W przypadku BAGA konwencja była jednak nie naszym sprzymierzeńcem, ale wrogiem. Pełnoekranowy hero ze stonowanym H1, leadem w roli manifestu i jednym czarnym przyciskiem CTA to świadomy akt oddzielenia marki od standardowego landing playbooka.
-
H1 jako definicja operacyjna
„Zarządzanie porządkiem operacyjnym domów i firm osób decyzyjnych” — zero marketingu, zero przymiotników -
Lead jako obietnica stanu
„Dokumenty, przestrzeń, rzeczy i sprawy funkcjonują w sposób, który nie wymaga stałej uwagi właściciela” -
Jedno CTA — „Napisz do mnie prywatnie”
Słowo „prywatnie” pełni funkcję filtra — sygnalizuje ton relacji i poziom dyskrecji -
Brak bannerów, pasków promocji, wyskakujących newsletterów
Pusty, niezakłócony ekran — decyzja musi być czysta, bez bodźców sprzedażowych
4. Dedykowany motyw WordPress „baga-premium”
Zamiast wykorzystać gotowy motyw komercyjny, stworzyliśmy od podstaw dedykowany motyw WordPress — baga-premium. Decyzja była podyktowana dwoma czynnikami: potrzebą pełnej kontroli nad każdym pikselem oraz wymaganiami wydajnościowymi (gotowe motywy ładują zazwyczaj 300–500 kB nieużywanego CSS). Motyw zbudowany jest na Tailwind CSS 3.4 z własnym build pipeline’em w PostCSS i Autoprefixer.
Tailwind CSS 3.4 z pełnym build pipeline
PostCSS + Autoprefixer, purge nieużywanych klas, minifikacja produkcyjna. Zero Bootstrapa, zero frameworka UI — każdy komponent zaprojektowany od zera
Alpine.js 3.x dla interaktywności
Menu mobilne, dropdowny, walidacja formularzy, akordeony FAQ — wszystko na Alpine zamiast ciężkiego React/Vue. Lekkie i deklaratywne
GSAP 3.12 + ScrollTrigger
Animacje fade-in, subtelny parallax, scroll-based reveals — użyte oszczędnie, nigdy jako dekoracja. Animacja potwierdza, nie zwraca uwagi
Advanced Custom Fields PRO — 16 grup, 200+ pól
Pełna parametryzacja contentu — klientka może edytować każdą sekcję, FAQ, cytaty, sekcje kafli, bez dotykania kodu
Custom Post Types — Atelier Zestawy
Dedykowany CPT dla zestawów produktowych w Atelier, z repeaterami ACF do kompozycji wielu produktów w jeden „zestaw”
20+ custom hooków GTM/GA4
Własne eventy dataLayer — od click na CTA po form submit, scroll depth, shop enter, add to cart. Pełna widoczność w Google Analytics 4
5. Struktura treści strony głównej
Treść strony głównej zorganizowana jest w pięciu sekwencyjnych sekcjach, każdej z ściśle określonym zadaniem retorycznym. Ciche przejścia, subtelne linie dekoracyjne w kolorze gold i hierarchia typograficzna prowadzą czytelnika przez manifest, doświadczenie, filozofię, produkty i FAQ — w tym porządku, bez nadmiaru przerywników.
-
Hero — jedno pełnoekranowe zdanie
H1 definiujący usługę, lead z obietnicą stanu, jedno CTA — żadnych kafelków, żadnych obrazków tła -
Sekcja Doświadczenie — dwukolumnowa
Etykieta „Standard i doświadczenie”, tytuł o 25 latach pracy w administracji, bez listy referencji -
Sekcja Filozofia — manifest w cytacie
Cicha sekcja premium z kluczowym cytatem-manifestem, linie dekoracyjne w kolorze gold -
Sekcja BAGA — dyskretny link do Atelier
Produkty jako dowód standardu, nie jako oferta. Link wprowadza do sklepu w sposób nienachalny -
Trzy kafle — Dom / Biuro / Procesy
Trzy obszary specjalizacji w minimalistycznych kartach, ikony w kwadratach 16×16, p-8 lg:p-12 -
FAQ — 10 pytań z akordeonem
Repeater ACF, Alpine.js dla rozwijania. Pytania adresują realne zastrzeżenia klienta premium
6. Formularz aplikacyjny 4-krokowy
Formularz kontaktowy pod adresem /wspolpraca/aplikuj jest elementem strategii premium filtering. Zamiast jednego pola „Treść wiadomości”, prowadzi potencjalnego klienta przez cztery kroki, z których każdy wymaga przemyślenia: obszar współpracy, sytuacja operacyjna, preferowany model abonamentowy oraz dane kontaktowe. Krok po kroku formularz odsiewa osoby, które szukają „taniej pomocy przy domu” i przepuszcza tych, którzy realnie opisują swoją sytuację.
Krok 1 — Obszar
Wybór obszaru wsparcia: dom prywatny, biuro firmy, nieruchomości pod zarządzaniem, projekt incydentalny
Krok 2 — Sytuacja
Opis obecnej sytuacji operacyjnej — pole tekstowe, które wymaga sformułowania problemu, a nie tylko kliknięcia
Krok 3 — Model współpracy
Wybór jednego z trzech poziomów: Podstawowa, Rozszerzona, Zarządzanie Prywatne. Każdy poziom ma jasno zdefiniowany zakres
Krok 4 — Dane kontaktowe
Imię i nazwisko, email, preferowana forma pierwszego kontaktu. Telefon jest opcjonalny — klientka udostępnia swój po rozmowie
7. Atelier BAGA — sklep ukryty za subtelnym linkiem
Sklep, dotychczas główny element marki na PrestaShop, został przekształcony w Atelier BAGA — WooCommerce pod adresem /atelier, dostępny wyłącznie przez subtelny link w stopce i w jednej sekcji strony głównej. Zmiana nomenklatury ze „sklepu” na „atelier” jest świadomą decyzją pozycjonującą — „atelier” konotuje pracownię, warsztat, dyskretne miejsce, a nie masową sprzedaż.
-
WooCommerce 8.x na dedykowanym motywie
Pełna integracja wizualna z landing page — ten sam design system, te same komponenty -
Katalog produktów — responsywny grid
Ponad 40 SKU produktów (torby, organizery, akcesoria), 6 kategorii głównych -
Karta produktu — galeria i opis
Galeria zdjęć produktowych, opis, cena, warianty — wszystko bez natarczywych cross-sellingów -
Personalizacja haftem
Opcja dodania haftu na produkcie — automatyczne doliczenie +100 zł do ceny, bez konieczności negocjacji -
Atelier Zestawy — Custom Post Type
Dedykowane zestawy produktowe jako osobny CPT z repeaterami ACF, grupujące produkty w kompozycje -
Płatności Przelewy24
Pełna integracja — BLIK, przelew online, karty Visa/Mastercard, szybki checkout -
Dostawa InPost, DPD, Poczta
Trzy operatorzy, integracja z paczkomatami, automatyczne etykiety nadawcze
8. Bezpieczeństwo v4.0 — hardening produkcyjny
Wersja 4.0 była wersją produkcyjną z pełnym hardeningiem bezpieczeństwa. Premium klient oczekuje, że strona obsługująca jego dane (nawet jeżeli są to wyłącznie dane formularza) jest zabezpieczona na poziomie wyższym niż standardowy WordPress. Wdrożyliśmy zestaw zabezpieczeń obejmujący warstwę sieciową, aplikacyjną i operacyjną — od ochrony przed botami po dyskretne ukrycie panelu administracyjnego.
HTTPS 301 enforcement — wymuszanie szyfrowania
Content Security Policy (CSP) — ochrona XSS
X-Frame-Options: DENY — anty-clickjacking
HSTS — wymuszanie TLS na poziomie przeglądarki
Blokowanie 50+ user-agentów botów SEO/spam
Ochrona /uploads — zakaz wykonania PHP
MU-Plugin /bagadm — dyskretna ścieżka logowania
Token-based auth rotowany dobowo z AUTH_SALT
Blokada bezpośredniego /wp-login.php (302 redirect)
Rebranding ekranu logowania — logo BAGA
Stopka logowania — kredyt KamikStudio
Zero publicznej informacji o stacku (ukryte nagłówki)
9. Migracja z PrestaShop — redirecty 301
Migracja ze starego sklepu PrestaShop na nową strukturę WooCommerce wymagała pełnej mapy redirectów 301, aby nie utracić pozycji w Google. Stary sklep miał lata historii w indeksie, a każdy link utracony = utracony autorytet. Przygotowaliśmy zestaw reguł .htaccess mapujących wszystkie znaczące adresy starego sklepu na nowe.
| Adres PrestaShop (stary) | Adres WooCommerce (nowy) |
|---|---|
/sklep/ |
/atelier/ |
/shop/ |
/atelier/ |
/pl/KATEGORIA/ID-NAZWA.html |
/atelier/ (mapowanie regex) |
| Stare adresy stron statycznych | Nowe odpowiedniki landing (301) |
10. Tracking, analityka i SEO lokalne
Pomimo premium pozycjonowania, projekt BAGA wymaga pełnej widoczności analitycznej. Klientka musi wiedzieć, skąd pochodzi ruch, które sekcje konwertują i jak zachowują się odwiedzający. Zintegrowaliśmy Google Analytics 4 (ID: G-8W2B9QEJBH), Google Tag Manager oraz CookieYes/Cookiebot w modelu RODO-compliant, z 20+ custom eventami.
-
GTM Events — CTA, email, telefon
Każde kliknięcie głównego CTA w hero i w każdej sekcji raportowane oddzielnie — mapa intencji -
Scroll depth 25% / 50% / 75%
Pomiar głębokości scrolla — weryfikacja, czy odbiorca dociera do sekcji filozofii i FAQ -
Form submit, shop enter, add to cart
Pełny funnel e-commerce w Atelier + zdarzenia aplikacji na wspolprace -
Schema.org JSON-LD
Organization, LocalBusiness, Product, BreadcrumbList — pełny zestaw markupu strukturalnego -
Local SEO Warszawa
Google Business Profile, NAP consistency, frazy: „lifestyle manager dla CEO Warszawa”, „zarządzanie porządkiem operacyjnym Warszawa” -
Meta tagi, Open Graph, sitemap.xml
Kompletny zestaw metadanych dla każdej z 15+ podstron, osobne OG image dla Facebook/LinkedIn
11. Wydajność — Core Web Vitals w standardzie premium
Premium nie zwalnia od wydajności — wręcz przeciwnie. Klient decyzyjny nie toleruje ładowania trwającego dłużej niż 2 sekundy. Projekt BAGA został zoptymalizowany pod Core Web Vitals i Lighthouse 90+ na wszystkich trzech filarach: Performance, Accessibility, Best Practices, plus 100 w SEO.
Stack technologiczny
Projekt BAGA Premium to pełny stack nowoczesnego WordPressa premium — od warstwy serwera i CDN, przez build pipeline frontendu, po narzędzia trackingu i bezpieczeństwa. Każdy z komponentów został wybrany świadomie i ma konkretne uzasadnienie w architekturze projektu.
WooCommerce 8.x
PHP 8.x
MySQL
Tailwind CSS 3.4
PostCSS
Autoprefixer
Alpine.js 3.x
GSAP 3.12
ScrollTrigger
ACF PRO
Custom Post Types
Dedykowany motyw baga-premium
MU-Plugin /bagadm
Przelewy24
InPost / DPD / Poczta
Google Analytics 4
Google Tag Manager
CookieYes / Cookiebot
Schema.org JSON-LD
Google Business Profile
Cloudflare CDN
SSL / HTTPS / HSTS
Content Security Policy
Font Rubik
Unikalne rozwiązania projektowe
Projekt BAGA odchodzi od konwencji w kilku miejscach, z których każde zostało przedyskutowane z klientką i zweryfikowane przez jej doświadczenie z docelową grupą CEO. Oto sześć decyzji projektowych, które odróżniają ten projekt od typowego wdrożenia WordPress.
-
Hero bez scrolla i bez drugiego CTA
Łamie konwencję e-commerce, ale wzmacnia pozycję marki. Jeden ekran, jedna decyzja -
Sklep jako „Atelier”, ukryty za dyskretnym linkiem
Produkty pełnią rolę dowodu standardu, a nie głównego kanału sprzedaży -
Formularz 4-krokowy jako premium filter
Kroki wymagają przemyślenia — odsiewają klientów „szukających taniej pomocy” -
Brak adresu biura i publicznego telefonu
Dyskrecja strukturalna — numer udostępniany dopiero po kwalifikacji leada -
MU-Plugin /bagadm z tokenami rotowanymi dobowo
Warstwa bezpieczeństwa niespotykana w typowym WordPressie — token regenerowany codziennie z AUTH_SALT -
Zero opinii, zero bloga „jak samodzielnie”
Reguła marki — premium klient nie czyta poradników, tylko deleguje. Dowodem są publikacje medialne
Rezultaty
BAGA Premium to projekt, w którym strona internetowa została potraktowana nie jako kanał sprzedaży, lecz jako filtr klienta. Zrealizowany w czterech iteracjach (v1.0 → v4.0) w ciągu czterech–pięciu tygodni, obejmuje dedykowany motyw WordPress baga-premium zbudowany na Tailwind CSS 3.4, Alpine.js 3.x i GSAP 3.12 — z 16 grupami ACF PRO i ponad 200 polami, 15+ podstronami landing usługowego dla CEO, ukrytym za dyskretnym linkiem sklepem „Atelier BAGA” na WooCommerce z 40+ SKU, pełną migracją z PrestaShop poprzez redirecty 301, MU-Pluginem /bagadm z autoryzacją tokenową rotowaną dobowo, hardeningiem .htaccess (CSP, HSTS, blokada 50+ botów), pełną integracją GA4 + GTM z 20+ custom eventami, Schema.org JSON-LD, Local SEO dla Warszawy oraz wynikami Lighthouse 90+ na wszystkich filarach i 100/100 SEO. Projekt dostarcza klientowi docelowemu — osobom decyzyjnym — trzy rzeczy, których oczekują: spokój, bezpieczeństwo, kontrolę.