CN Wszystkie projekty

SensoBaza

Wróciłem do własnego projektu, zanim zrobił to rachunek.

Redesign centrum terapii dziecięcej, który zdejmuje z klientki koszt niepotrzebnej platformy i buduje wiarygodność prawdziwym miejscem zamiast stockowego zdjęcia.

Nowy pierwszy ekran SensoBazy: tekst po lewej, po prawej mozaika pięciu zdjęć centrum, z czego dwa powstały z pomocą AI
Nowy pierwszy ekran: mozaika pięciu zdjęć centrum, z czego dwa powstały z pomocą AI.
Czas
3 dni
Zakres
Strategia, UX/UI, front-end, wdrożenie
Migracja
Webflow → Astro 7
Ograniczenie
7 publicznych tras bez zmiany
Status
Działa na sensobaza-opole.pl

Punkt wyjścia

Pierwsza wersja działała, ale miała swoje wady.

SensoBaza powstała pro bono, równolegle z moimi studiami. Dała nowemu centrum obecność online i wyznaczyła język marki. Kierunek przygotowałem w Figma Slides, a po akceptacji klientki zbudowałem stronę w Webflow.

Kiedy wróciłem do niej po roku, nie chciałem projektować od nowa tylko dlatego, że potrafię już zrobić coś bardziej efektownego. Musiałem rozdzielić to, co naprawdę wymagało zmiany, od tego, co zdążyło zbudować wartość: adresów URL, tonu komunikacji, danych kontaktowych i rozpoznawalnej zieleni.

Diagnoza

Problemem nie był Webflow. Była nim zależność bez uzasadnienia.

Bezpośrednim impulsem był zbliżający się termin odnowienia platformy. Serwis był w praktyce statyczny, nie korzystał z CMS-a i poza formularzem nie używał niczego, za co klientka co roku płaciła. Pytanie o rachunek odsłoniło jednak drugi, mniej widoczny koszt.

Koszt dosłowny

Płatna platforma dla strony, która jej nie używała

Plan Basic za 14 $ miesięcznie, rozliczany rocznie: 168 $ co roku za możliwości, których statyczny serwis nigdy nie wykorzystał.

Koszt ukryty

Hierarchia, która nie odpowiadała na niepewność rodzica

Treści były na miejscu, ale kolejność nie prowadziła do decyzji.

Nowa zasada: technologia ma uzasadniać swój koszt, a hierarchia ma odpowiadać na pytanie, które rodzic zadaje sobie pierwsze.

Przed i po

Ta sama marka. Inny rodzaj wiarygodności.

Zachowałem komunikat, logo, zieleń i główną drogę kontaktu. Nie udawałem, że marka potrzebuje rewolucji. Zmieniłem sposób, w jaki strona dowodzi, że za adresem stoi realne miejsce i realni ludzie.

Pięć par zrzutów całych stron, zrobionych 22.09.2026 przy szerokości 1440 px. Wybierz podstronę i przewiń kadr: obie wersje przechodzisz od nagłówka do stopki, w tej samej skali.

Poprzednia strona główna SensoBazy, zrzut całej strony
Przed: Webflow Ogólna emocja

Trzy nakładające się fotografie stockowe budowały skojarzenie z opieką, ale nie pokazywały tego miejsca.

Otwórz zrzut w nowej karcie
Nowa strona główna SensoBazy, zrzut całej strony
Po: Astro 7 Konkretny dowód

Wejście, przestrzeń, terapeutki i zajęcia tworzą jeden system zamiast trzech osobnych dekoracji.

Otwórz zrzut w nowej karcie

Marka została ta sama. Zmieniło się to, czym strona dowodzi, że za adresem stoi realne miejsce.

Poprzednia strona oferty SensoBazy, zrzut całej strony
Przed: Webflow Nastrój zamiast oferty

Zdjęcie stockowe na pełnym kadrze, nagłówek położony na obrazie i jedno ogólne wezwanie: skontaktuj się.

Otwórz zrzut w nowej karcie
Nowa strona oferty SensoBazy, zrzut całej strony
Po: Astro 7 Oferta, którą da się policzyć

Pięć form terapii nazwanych w leadzie, telefon i cennik jako osobne wyjścia, adres i skład zespołu nad zgięciem.

Otwórz zrzut w nowej karcie

Rodzic nie pyta, czy jest miło. Pyta, czy jest to, czego potrzebuje, ile to kosztuje i jak się umówić. Stara oferta jest też o połowę dłuższa od nowej — 10 743 px wobec 8 441 px — przy mniejszej liczbie konkretów.

Poprzednia strona zespołu SensoBazy, zrzut całej strony
Przed: Webflow Ozdoba przed treścią

Nagłówek, pusty pas, potem karta z ikoną serca. Do pierwszego akapitu o ludziach trzeba się przewinąć.

Otwórz zrzut w nowej karcie
Nowa strona zespołu SensoBazy, zrzut całej strony
Po: Astro 7 Ludzie od razu

Bez karty i bez ikony. Trzy akapity i zdjęcie z gabinetu mieszczą się w pierwszym kadrze.

Otwórz zrzut w nowej karcie

Tekst jest ten sam. Zniknęła rama, która spychała go poniżej zgięcia.

Poprzednia strona o nas SensoBazy, zrzut całej strony
Przed: Webflow Deklaracja

Zdjęcie na pełnym kadrze i zdanie o bezpiecznej przestrzeni. Poza nim w pierwszym kadrze nie ma żadnej informacji.

Otwórz zrzut w nowej karcie
Nowa strona o nas SensoBazy, zrzut całej strony
Po: Astro 7 Deklaracja z pokryciem

Opis sposobu pracy zamiast obietnicy, adres, telefon, skład zespołu i godziny otwarcia, a niżej sześć podpisanych zdjęć gabinetów i sal, w których dziecko faktycznie będzie.

Otwórz zrzut w nowej karcie

„Bezpieczna przestrzeń” to zdanie, które napisze każdy. Godziny otwarcia i skład zespołu to coś, co rodzic może sprawdzić.

Poprzednia strona kontaktu SensoBazy, zrzut całej strony
Przed: Webflow E-mail na pierwszym miejscu

Karta kontaktu otwiera się adresem e-mail, numery telefonu stoją pod nim jako kolejna pozycja listy.

Otwórz zrzut w nowej karcie
Nowa strona kontaktu SensoBazy, zrzut całej strony
Po: Astro 7 Telefon jako pierwsza droga

Numer wybity osobno i przycisk Zadzwoń, a karta obok porządkuje telefon, e-mail i adres placówki.

Otwórz zrzut w nowej karcie

Rodzic, który się niepokoi, dzwoni, a nie pisze. Kolejność dróg kontaktu miała to odzwierciedlać.

  • 01

    Autentyczność. Stock ustąpił zdjęciom dostarczonym przez klientkę.

  • 02

    Język kompozycji. Zaokrąglone karty z cieniem ustąpiły płaskiej, nieruchomej mozaice.

  • Rdzeń marki. Zieleń #5D7F45 i lawenda #F3F0F7 zostały nietknięte. To barwy klientki, nie moje.

Architektura informacji

Strona odpowiada na trzy pytania, zanim poprosi o kontakt.

Rodzic szukający wsparcia dla dziecka nie przegląda katalogu usług. Może nie znać nazw terapii i może działać pod presją. Dlatego kolejność sekcji układa się wokół jego pytań, nie naszej oferty.

  1. 01

    Czy to miejsce rozumie sytuację mojego dziecka?

    Najpierw jasny zakres wsparcia i język bez klinicznego dystansu.

  2. 02

    Kto będzie z nim pracować?

    Zespół i autentyczne fotografie pojawiają się przed formularzem, nie po nim.

  3. 03

    Jak mogę zrobić następny krok?

    Telefon, e-mail, ceny i formularz pozostają równorzędnymi drogami. Kontakt nie jest zamknięty za formularzem.

Rodzic, który tu trafia, ma realny problem swojego dziecka do rozwiązania, nie czas na podziwianie interfejsu. Dlatego treść ma tu być królem: żadnej animacji, która nie pomaga mu szybciej znaleźć odpowiedź.

System, nie stylizacja

System wizualny: trzy zasady, które trzymają layout w ryzach.

SensoBaza miała wyglądać ciepło, ale nie infantylnie; profesjonalnie, ale nie klinicznie. Tę granicę trudno utrzymać w głowie przez dwa dni pracy, więc spisałem ją jako nazwane reguły. Dzięki temu decyzje były zrozumiałe także dla narzędzi, które pracowały na kodzie.

01

Warm Canvas

Ciepłe tło niesie całą stronę. Czysta biel ma konkretną rolę, nie jest ustawieniem domyślnym.

02

Modular Scale

Rozmiary tekstu i odstępy wynikają ze skali, a nie z pojedynczych poprawek „na oko”.

03

Section Rhythm

Ten sam format sekcji nie może powtórzyć się trzy razy z rzędu. Zmienia się rytm, nie system.

Iteracja

Co poprawiłem w trakcie pracy i dlaczego.

Redesign nie powstał za jednym podejściem. Najbardziej wartościowe poprawki nie były efektowne. Wynikały z ponownej oceny gotowego interfejsu.

Zdjęcia Mozaika przetrwała zmianę zdjęć

Pierwsza wersja mozaiki korzystała ze zdjęć zastępczych. Kiedy klientka dostarczyła autentyczne fotografie centrum, wymieniłem materiał bez przebudowy kompozycji. To potwierdziło, że układ nie zależał od jednego idealnego obrazu.

Informacja Godziny otwarcia dostały własną etykietę

Początkowo zostawiłem je przy adresie, żeby kolejny nagłówek nie konkurował z hierarchią stopki. Miałem na to logiczne uzasadnienie. Po ponownym obejrzeniu strony zobaczyłem, że informacja się gubi, więc dodałem osobny, czytelny panel.

Stan Naprawiłem stan aktywnego linku wszędzie, nie w jednym miejscu

Stan aktywnej strony rozjeżdżał się między nawigacją desktopową, menu mobilnym i rozwijaną listą usług. Zamiast poprawiać każdy przypadek osobno, ujednoliciłem aria-current i stan wizualny we wszystkich trzech wariantach.

Wdrożenie jest częścią UX

Jak zbudowałem nową SensoBazę.

Nowy serwis opiera się na statycznym HTML. Treść czyta się bez JavaScriptu, a skrypty obsługują wyłącznie te elementy, które naprawdę ich potrzebują. Szybkość, stabilność i ryzyko utraty pozycji w Google wpływają na doświadczenie rodzica tak samo jak układ pierwszego ekranu.

  1. Punkt wyjścia Webflow statyczna treść na płatnej platformie
  2. Nowy rdzeń Astro 7 8 stron statycznych, HTML first
  3. Hosting Cloudflare Pages 7 publicznych tras zachowanych
  • 01Obsługa klawiatury i zamykanie Escape
  • 02Widoczny fokus i spójne aria-current
  • 03Ruch respektujący prefers-reduced-motion
  • 04Canonicale, dane strukturalne i sitemapa

Rezultat

Co powstało i czego jeszcze nie mogę potwierdzić liczbami.

Czas realizacji
3 dni
Zbudowane strony
8
Zachowane trasy
7
Kolejny rok Webflow
168 → 0 $
Plan Basic, 14 $ miesięcznie rozliczane rocznie. Odnowienie 26.10.2026 zamienione na plan darmowy.

Od rodziców naszych pacjentów bardzo często słyszę, że strona internetowa idealnie oddaje klimat SensoBazy. Rodzice są pod wrażeniem intuicyjności oraz realnego odzwierciedlenia miejsca, sal terapeutycznych, ale także przedstawienia terapeutów.

Jeśli chodzi o zmiany, to na pewno rodzice korzystają z mapki i nie pytają, jak nas znaleźć, tylko automatycznie wyznaczają sobie trasę przez stronę. Pojawia się mniej pytań na Messengerze czy w mailach odnośnie cennika, oferty i dostępności, bo wszystko jest czytelne na stronie.

Aleksandra Ziober, dyrektorka centrum SensoBaza
Granica danych

Nowa SensoBaza działa pod adresem klientki od 25.09.2026, sensobaza-opole.pl. Stare adresy podstron prowadzą do nowych stron, a płatny plan Webflow nie zostanie odnowiony.

Słowa dyrektorki to obserwacja z codziennej pracy centrum, nie pomiar. Na liczby jest jeszcze za wcześnie, dlatego nie przedstawiam wzrostu konwersji ani pozycji w wyszukiwarce jako rezultatu. Po okresie obserwacji sprawdzę kliknięcia w telefon i e-mail, wysłania formularza, widoczność w Search Console oraz Core Web Vitals.

Wniosek

Czego nauczył mnie powrót do własnego projektu.

Nowa SensoBaza pokazuje nie tylko interfejs. Pokazuje rozwój procesu: od pierwszej strony zrobionej jeszcze na studiach do pracy, w której projekt, kod i odpowiedzialność za utrzymanie idą razem.

AI przyspieszyło wykonanie, ale nie wybrało problemu, nie rozmawiało z klientką i nie wzięło odpowiedzialności za migrację. Młot dostał precyzyjny projekt, zasady i kryteria oceny.