← Wszystkie realizacje Mukka Senso · Strona internetowa + panel klienta · 2026

Mukka Senso: witryna i panel klienta dla studia drewnianych placów zabaw

Od WordPressa do własnej aplikacji: portfolio w roli głównej, mapa realizacji i edycja treści wprost na stronie.

Zobacz stronę na żywo
Strona główna mukkasenso.pl na ekranie laptopa z hasłem Tworzymy przestrzenie, które inspiruje natura
Klient
Mukka Senso, studio drewnianych przestrzeni zabawy
Branża
place zabaw, małpie gaje, strefy sensoryczne (B2B: przedszkola, HoReCa, bawialnie)
Zakres
badania i strategia, UX/UI, treści, wdrożenie, panel klienta, analityka, migracja i go-live
Technologia
Laravel 13, PHP 8.4, Tailwind CSS 4, Vite 8
Czas
6 tygodni od pierwszego commita do przepięcia domeny (lipiec - wrzesień 2026)
23realizacje z galeriami w CMS
281zdjęć, każde w trzech rozmiarach
67testów automatycznych
6tygodni do startu

Producent drewnianych małpich gajów, domków tematycznych i stref sensorycznych miał świetny produkt, setki realizacji i przestarzałą stronę na WordPressie, na której nie było tego widać. Zbudowaliśmy witrynę, w której portfolio jest bohaterem, a klient sam edytuje teksty i zdjęcia bezpośrednio na stronie.

Punkt wyjścia

Mukka Senso projektuje i buduje we własnej stolarni drewniane małpie gaje, domki tematyczne i strefy sensoryczne: dla przedszkoli i żłobków, hoteli i restauracji, bawialni i galerii. Ponad 320 zrealizowanych stref w 50 miastach Polski i Europy. Tego dorobku na starej stronie nie było widać: WordPress z katalogiem produktów, kilka zdjęć bez historii, formularz kontaktowy i tyle.

Zadanie brzmiało prosto: strona, która sprzedaje. W praktyce oznaczało to trzy rzeczy naraz: pokazać skalę realizacji, mówić językiem czterech różnych grup klientów i zostawić właścicielom pełną kontrolę nad treścią bez dzwonienia do agencji.

Strategia przed pikselami

Zaczęliśmy od nocnego audytu rynku: konkurencja w Polsce i premium na świecie, normy, dofinansowania, cztery persony zakupowe. Wniosek był jednoznaczny.

Cały polski segment sensoryczno-zabawowy jest kliniczny i pozbawiony portfolio. Producenci drewnianych gajów mają dobry produkt, ale galerie bez historii.

Luka do zajęcia: ciepła narracja, własna historia materiału, filtrowane realizacje i zaufanie oparte na normie EN 1176.

  • Portfolio jako bohater. Każda realizacja to osobna historia z metryką: rodzaj, miasto, rok, materiał, galeria z sesji fotograficznej.
  • Dwa głosy, jedna strona. Zwrot z inwestycji dla HoReCa i centrów, rozwój i bezpieczeństwo dla przedszkoli i rodzin. Sekcja „Dla kogo” prowadzi każdą grupę do jej argumentów.
  • Zaufanie wcześnie. Pasek norm i atestów powtarzany na kluczowych stronach, sekcja o dofinansowaniu (Aktywny Maluch, fundusze UE), której nie eksponuje nikt z konkurencji.
  • Wycena zamiast koszyka. Produkt jest na wymiar, więc zamiast sklepu jest dwustopniowy brief, a gotowe zestawy prowadzą do osobnego sklepu marki.

Co zbudowaliśmy

Witrynę i panel w jednej aplikacji na Laravelu. Strona główna otwiera się wideo z realizacji, pod nim pasek zaufania, marka w liczbach, trzy filary oferty, slider realizacji i mapa. Dalej: nazwany, numerowany proces w sześciu krokach, argumenty „dlaczego my”, opinie i wezwanie do wyceny.

  • Realizacje z filtrami po segmencie (bawialnie, kawiarnie, przedszkola) i osobną kartą każdego projektu.
  • Interaktywna mapa realizacji z Polską i Europą: najazd na nazwę miejsca pokazuje kartę, tapnięcie na telefonie dolatuje do punktu, a pod mapą jest lista miejsc bez galerii, żeby pokazać cały zasięg.
  • Galerie z sesji fotografki, każde zdjęcie w trzech rozmiarach (srcset), więc telefon nie ściąga wersji dla desktopu.
  • Formularz wyceny z briefem, który trafia do handlowca jako czytelny mail w identyfikacji marki, z potwierdzeniem dla klienta i odpowiedzią „Reply-To” na adres pytającego.
  • Strony prawne napisane pod stan faktyczny, ze spisem treści, oraz baner zgód cookies zgodny z tym, co strona naprawdę robi.
Makiety

Projekt z bliska

Lista realizacji Mukka Senso na laptopie: Nasze światy zabawy z filtrami i liczbami
Portfolio w roli głównej: liczby nad listą, filtry po segmencie i osobna karta każdej realizacji.
Sekcja procesu na mukkasenso.pl: Od rozmowy do gotowej strefy, pierwszy krok
Sześć nazwanych kroków: klient wie, co się wydarzy i kiedy, zanim zapyta o cenę.
Widoki mukkasenso.pl na telefonach: proces, mapa realizacji, formularz wyceny i sekcja o marce
Ten sam serwis na telefonie: proces, mapa realizacji, formularz wyceny i historia marki.

Panel klienta: edycja wprost na stronie

Najważniejsza decyzja projektu. Zamiast klasycznego panelu z formularzami zrobiliśmy edytor na żywo: właściciel loguje się, wchodzi na dowolną stronę i klika w tekst albo zdjęcie, które chce zmienić. Galerie, backstage, wideo w hero, plakat, zdjęcia realizacji: wszystko edytowalne w miejscu, z zapisem do tej samej karty. Do tego link zapraszający, którym można dać dostęp do edycji osobie bez konta, i możliwość cofnięcia zmiany.

Efekt: nowe realizacje i zdjęcia z sesji trafiają na stronę tego samego dnia, bez pośredników.

Technologia i wydajność

  • Laravel 13 na PHP 8.4, Tailwind CSS 4 i Vite 8. Lekka baza SQLite z codzienną, szyfrowaną migawką na Google Drive.
  • Wideo w hero przekodowane z oryginału w dwóch wariantach (H.264 i HEVC) i dwóch rozmiarach, z plakatem na start.
  • Fonty self-hosted (Instrument Sans, Inter, Geist Mono), CSS z tokenami marki: krem, taupe, espresso i teal z logo.
  • Nagłówki bezpieczeństwa i Content Security Policy z listą dozwolonych źródeł, także dla narzędzi reklamowych.
  • 67 testów automatycznych: treści, edytor, przekierowania, realizacje, retencja leadów i formularze.

Migracja bez utraty ruchu

Stara strona stała na WordPressie z Contact Form 7 i konwersjami Google Ads spiętymi przez GTM. Przy przepięciu domeny 9 września 2026 nie ruszyliśmy konfiguracji GTM ani kampanii: nowy formularz wysyła to samo zdarzenie, na które nasłuchiwał stary, więc konwersje liczyły się dalej od pierwszej minuty. Wszystkie stare adresy dostały przekierowania 301, a strony błędów własny wygląd.

Do tego weryfikacja Search Console, sitemap i robots, Microsoft Clarity ładowany wyłącznie po zgodzie na statystyki, z maskowaniem formularzy, oraz skrypty go-live: przepięcie, cofnięcie i kopia dzienna w jednym repozytorium.

Efekt

Strona, która w końcu wygląda jak produkt: 23 realizacje z pełnymi galeriami, mapa zasięgu, proces, który uspokaja klienta B2B, i formularz, który przynosi handlowcowi gotowy brief. Wszystko to właściciele utrzymują sami, bez agencji w pętli. Od pierwszego commita do startu minęło sześć tygodni.

Szczegóły techniczne
Zaplecze
  • Laravel 13
  • PHP 8.4
  • SQLite
Front
  • Tailwind CSS 4
  • Vite 8
  • Fonty self-hosted
  • Galerie z srcset
  • Wideo w hero (H.264 + HEVC)
Funkcje
  • Edytor treści na żywo
  • Interaktywna mapa realizacji
  • Formularz wyceny z briefem
  • Maile w identyfikacji marki
Analityka i zgody
  • Google Tag Manager + konwersje Ads
  • Microsoft Clarity
  • Zgody cookies
Bezpieczeństwo i wdrożenie
  • CSP i nagłówki bezpieczeństwa
  • Przekierowania 301 z WordPressa
  • Wdrożenia z gita
  • Kopia dzienna na Google Drive
Wycena

Chcesz taką stronę dla swojej firmy?

Napisz, co ma się zmienić. Odpowiadamy w ciągu 24 h w dni robocze, a po rozmowie dostajesz propozycję z zakresem i wyceną.

Czego potrzebujesz?