Strona dla mobilnej pracowni warsztatów

Problem

ART AKCJA prowadzi warsztaty plastyczne, kulinarne, animacje i stanowiska na eventach. Dojeżdża do klienta, więc nie ma lokalu, który ktoś mógłby minąć na ulicy. Klienci trafiali do niej przez Facebooka.

Facebook dobrze pokazuje zdjęcia z zajęć, ale słabo odpowiada na pytania, które zadaje organizator. Dyrektorka przedszkola chce wiedzieć, ile kosztuje warsztat dla grupy, czy materiały są w cenie i jak daleko pracownia dojeżdża. Rodzic planujący urodziny chce wiedzieć, co się wydarzy przez dwie godziny. Odpowiedź „zapraszamy na priv” oznacza, że każda z tych osób musi napisać i poczekać, a część po prostu nie pisze.

Do tego cztery grupy klientów mają różne potrzeby. Instytucja potrzebuje faktury i raportu. Firma potrzebuje kilku stanowisk naraz. Rodzic potrzebuje kogoś, kto posprząta.

Rozwiązanie

Strona główna prowadzi organizatora w takiej kolejności, w jakiej podejmuje decyzję.

1. Pierwszy ekran mówi, co to jest i gdzie działa, z dwoma wezwaniami: sprawdź termin albo zobacz ofertę i ceny.
2. Pasek konkretów: przyjeżdżamy ze sprzętem, grupy od 8 osób, scenariusz pod wiek, faktura VAT z numerem NIP.
3. Cztery rodzaje zajęć: plastyczne, kulinarne, animacje i gry, eventy i pikniki.
4. Dla kogo pracujemy: przedszkola i szkoły, urodziny, firmy, instytucje. Każdy kafel ma własny opis, cenę od i link do pakietu.
5. Jak to wygląda od strony organizatora w trzech krokach: piszesz, dostajesz scenariusz i wycenę, przyjeżdżamy.
6. Galeria, opinie i najczęstsze pytania: dojazd, materiały, wielkość grupy, wyprzedzenie rezerwacji.
7. Formularz zapytania z rodzajem wydarzenia, datą i miejscem na wiek i liczbę dzieci.

Podstrona /oferta zbiera to w trzy pakiety: pojedynczy warsztat, urodziny i event. Pakiet urodzinowy jest wyróżniony, a pod pakietami stoi lista tematów z wiekiem i czasem trwania.

Kolory z logo i strona, która jest czytelna

Klient miał logo tylko jako JPG na białym tle. Tło wycięliśmy wypełnianiem od krawędzi, żeby biel wewnątrz znaku, czyli twarz i koszulka pajacyka, została nietknięta, a krawędzie wygładziliśmy przezroczystością. Z tego samego pliku powstał kwadratowy znak do favicony.

Paleta pochodzi z logo: magenta, cyjan, limonka, żółty i prawie czarny. Kolory z logo są jasne i nasycone, więc nie nadają się na tekst. Odcienie użyte do przycisków i napisów przyciemniliśmy tak, żeby miały kontrast co najmniej 4,5:1. Czysta magenta z logo została na dekoracje, a przyciski mają ciemniejszą, na której biały napis czyta się dobrze.

Plamy farby z logo wróciły na stronę jako tło pierwszego ekranu. Kilka dużych plam powoli dryfuje, drobne kropki stoją w miejscu. Przy najechaniu na przycisk wokół niego pojawia się rozprysk w czterech kolorach, a zdjęcia w galerii wskakują przy przewijaniu. Kto ma w systemie włączone ograniczenie ruchu, dostaje stronę bez animacji.

Nagłówki są złożone krojem Baloo 2, tekst krojem Work Sans. Oba fonty serwujemy z własnego serwera, więc przeglądarka nie łączy się z Google.

Pod docelowym adresem, ale za hasłem

Strona od początku działa pod artakcja.pl, a nie pod tymczasowym adresem. Klient ogląda dokładnie to, co zobaczą jego klienci, i nie trzeba niczego przenosić przy starcie.

Dopóki treść nie jest gotowa, przed plikami strony stoi mały worker na Cloudflare, który wpuszcza dopiero po zalogowaniu. Hasło porównuje w stałym czasie, a każdą odpowiedź oznacza nagłówkiem noindex, żeby wersja robocza nie trafiła do Google. Przekierowanie z www na adres główny działa przed bramką, więc nie wymaga logowania i nie tworzy duplikatu strony.

Każde miejsce, w którym brakuje danych od klienta, ma na stronie widoczny placeholder w nawiasie: [CENA], [X] km, [24] h, puste cytaty opinii. Klient widzi listę braków w kontekście, a nie w osobnym dokumencie, i wie, co jeszcze trzeba dosłać. Zdjęcia na stronie pochodzą z banku zdjęć i są opisane w repozytorium jako zastępcze. Podmiana polega na wrzuceniu własnego pliku pod tą samą nazwą.

Jak to jest zbudowane

Strona jest generowana statycznie w Astro. Treści takie jak pakiety, kafle i pytania są zebrane w danych na górze każdej podstrony, więc zmiana ceny to jedna linijka. Zdjęcia przechodzą przez wbudowaną optymalizację Astro: dostają kilka rozmiarów i format WebP.

Hosting to Cloudflare Workers ze statycznymi plikami, z wdrożeniem z GitHuba przy każdym pushu. Własna strona 404 obsługuje nieistniejące adresy, a adresy podstron działają bez ukośnika na końcu.

Dane strukturalne LocalBusiness podają nazwę, telefon, e-mail, miasto, obszar działania i NIP, żeby wyszukiwarka mogła połączyć stronę z wizytówką firmy. Strona ma mapę witryny, robots.txt i znaczniki Open Graph do podglądu linku na Facebooku.

Układ projektowaliśmy od telefonu, bo tam otwiera się link z Facebooka. Działa od 320 px szerokości, pola formularza mają 16 px, żeby iPhone nie powiększał strony przy wpisywaniu, a menu mobilne zamyka się dotknięciem poza nim, klawiszem Escape i po przejściu na szeroki układ.

Przed kodem powstała statyczna makieta w HTML i plan wdrożenia z etapami, listą rzeczy potrzebnych od klienta i kosztami utrzymania. Stały koszt to domena, bo hosting, certyfikat i formularz mieszczą się w darmowych planach.

Co to zmienia

Organizator, który dziś trafia na ART AKCJA, dostanie odpowiedzi na swoje pytania bez pisania wiadomości: co pracownia robi, dla kogo, w jakim zakresie i jak wygląda współpraca od zapytania do sprzątnięcia sali. Ceny są ułożone tak, żeby po uzupełnieniu dało się je porównać na jednym ekranie.

Klient ma przed sobą działającą stronę pod własnym adresem i listę braków wpisaną w samą stronę. Kolejne kroki to ceny, własne zdjęcia z warsztatów, prawdziwe opinie, podpięcie formularza i zdjęcie bramki hasłowej. W planie są też osobne podstrony dla przedszkoli, urodzin, firm i instytucji, pod frazy, które ludzie faktycznie wpisują w wyszukiwarkę.