To jest projekt koncepcyjny. Piec 900 nie istnieje - firma, jej lokale, liczby i klienci są fikcyjne. Zbudowaliśmy go w całości u siebie, żeby pokazać sposób myślenia i wykonanie na przykładzie, którego nie ogranicza NDA. Nie ma tu żadnych wyników sprzedażowych, bo nie miałyby pokrycia. Wszystkie liczby opisujące efekt pochodzą z modelu, a nie z wdrożenia.

// Wyzwanie

Podatek od lojalności

Weźmy pizzerię, która robi 4,7 mln zł przychodu i ma świetny produkt: 4,8 gwiazdki przy 1 240 opiniach. Trzy zmienne opisują jej problem cyfrowy:

• 31% przychodu idzie z dostawy i odbioru,
• 74% tego wolumenu przechodzi przez Pyszne.pl, Glovo i Uber Eats,
• średnia prowizja to 29%.

To jest 313 tysięcy złotych rocznie oddane pośrednikom. I teraz rzecz najważniejsza: to nie jest koszt pozyskania klienta. Klient, który zamawia po raz dziesiąty, wciąż kosztuje 29%. To jest podatek od lojalności.

Dlaczego ten klient nie zamawia bezpośrednio? Nie z lojalności wobec agregatora. Z wygody. Agregator ma zapisany adres, zapisaną kartę, historię zamówień i realny czas dostawy. Strona restauracji ma PDF z menu. Własny kanał nie przegrywa - on po prostu nie istnieje jako realna alternatywa.

Objaw widać w danych: 61% wejść na podstronę menu kończy się pobraniem pliku PDF i wyjściem z witryny. Strona nie sprzedaje, tylko rozdaje załączniki.

Do tego dochodzi segment całkowicie niewidoczny: catering firmowy. Najwyższa marża, największa przewidywalność, sześć zapytań miesięcznie - wszystkie z polecenia, bo osoba zamawiająca w firmie nie znajduje na stronie ani ceny na osobę, ani terminu, ani informacji o fakturze. Więc wybiera dostawcę, który to publikuje.

// Diagnoza

Problemem nie jest to, jak strona wygląda

Warto zapisać wprost, czym problem nie jest, bo inaczej buduje się rozwiązanie na fałszywej diagnozie:

• Nie jest nim jakość produktu - oceny są znakomite.
• Nie jest nim rozpoznawalność marki w mieście.
• Nie jest nim budżet reklamowy. Zwiększenie wydatków na Google Ads przy takiej stronie podniosłoby wyłącznie liczbę pobrań PDF-a.
• Nie jest nim wygląd strony. Stara strona wygląda przyzwoicie i to właśnie najbardziej utrudniało postawienie diagnozy.

Problemem jest brak kanału, w którym da się złożyć zamówienie równie wygodnie jak w aplikacji pośrednika. To jest problem architektury i ścieżek, a nie grafiki.

// Rozwiązanie

Trzy osoby, trzy drogi, jedna strona główna

Zaprojektowaliśmy stronę wokół trzech osób z trzema różnymi zadaniami, o różnych porach doby. Wszystko poza nimi jest świadomie poza zakresem.

Kamil zamawia w piątek o 18:40

Dwoje dzieci, telefon w jednej ręce, zamawiał już kilkanaście razy - zawsze przez aplikację. Jego zadanie: złożyć zamówienie w mniej niż trzy minuty i wiedzieć, o której przyjedzie. Wybiera przewidywalność, nie cenę.

Co dostaje: koszyk działający bez zakładania konta, płatność jednym kliknięciem, realny czas dostawy widoczny zanim zacznie zamawiać, zapamiętany adres przy kolejnej wizycie. Drugie zamówienie ma trwać kilkanaście sekund, nie trzy minuty.

Ola planuje we wtorek kolację na sobotę

Jej zadanie: ocenić, czy to jest miejsce na ten wieczór, i zarezerwować bez dzwonienia. Jej obiekcje są konkretne: "nie chcę dzwonić", "nie wiem, czy o 20:00 będzie wolne", "zdjęcia w internecie zawsze kłamią".

Co dostaje: dostępność stolików z podziałem na lokale, zdjęcia wnętrz z podpisem który to lokal, menu z alergenami i opcjami roślinnymi jako treść na stronie, nie plik do pobrania.

Beata organizuje lunch dla zarządu

Office manager, dziewięć dni do terminu, trzy inne zadania tego dnia. Chce zebrać dwie oferty, wybrać jedną i mieć spokój. Potrzebuje ceny na osobę, pewności terminu i faktury z odroczonym terminem.

Co dostaje: trzy gotowe pakiety z jawnymi widełkami cenowymi, minimalne wyprzedzenie zamówienia, informację o fakturze - wszystko na stronie, więc decyzję podejmuje w pięć minut zamiast w trzy maile.

Zasada nadrzędna architektury: z każdej podstrony widać drogę do zamówienia albo do rezerwacji, maksymalnie dwa kliknięcia od dowolnego miejsca.

Strona główna nie próbuje opowiedzieć wszystkiego naraz - rozdziela ruch na trzy ścieżki w pierwszym ekranie po hero, każda z własnym kolorem, własnym językiem korzyści i własnym przyciskiem.

Zamówienie: trzy kroki i widoczny czas dostawy

Wybór lokalu i sposobu odbioru, koszyk, dane i płatność - trzy kroki widoczne od razu jako numerowana ścieżka, bez zakładania konta. Czas dostawy jest podany zanim użytkownik cokolwiek doda, bo to jego główne pytanie i główna przewaga agregatora. Podsumowanie po prawej stronie liczy się na bieżąco, łącznie z rabatem z kodu na opakowaniu.

Menu jako treść, nie załącznik

To jest ta zmiana, która zamyka wyciek 61% ruchu. Menu jest przeglądalne, filtrowalne po opcjach wegetariańskich, bezglutenowych i ostrych, ma alergeny przy pozycjach i pozwala dodać do koszyka bez opuszczania strony. Przy okazji staje się treścią, którą widzi Google i którą mogą zacytować asystenci AI - czego PDF nie daje w żadnym stopniu.

Catering z jawnymi cenami

Trzy pakiety, cena na osobę przy każdym, minimalne wyprzedzenie i informacja o fakturze - wszystko bez wysyłania zapytania w ciemno. Publikacja cen zawęża lejek, ale zapytania, które przychodzą, są kwalifikowane, a to jest cała różnica dla kogoś, kto ma sześć zapytań miesięcznie i trzy inne zadania tego dnia.

// Wykonanie

System projektowy, nie zestaw ekranów

Strona stoi na własnym systemie projektowym: paleta, skala typograficzna, odstępy, promienie, cienie i krzywe animacji są tokenami CSS, a komponenty sięgają po tokeny zamiast po wartości wpisane na sztywno. Dzięki temu zmiana jednej decyzji wizualnej przechodzi przez całą witrynę, a nie przez trzydzieści miejsc.

Kilka decyzji, które warto wyciągnąć na wierzch:

Kolor jako nośnik funkcji. Czerwień, złoto i atrament kodują trzy ścieżki użytkownika. Złoto jest zarezerwowane wyłącznie dla akcji głównej - w sekcji hero nie ma drugiego złotego elementu. Podobnie twardy, przesunięty cień: nosi go tylko przycisk. Kiedy dekoracje dostały ten sam cień i tę samą barwę, zaczęły wyglądać na klikalne i odbierały uwagę przyciskom. Zabranie im tego języka było ważniejsze niż jakiekolwiek przesuwanie elementów.

Panorama jako osobny problem projektowy. Treść jest ograniczona do 1280 px, więc na monitorze 2560 px strona czytała się jak wąska kolumna w pustce. Wypełniliśmy boczne marginesy warstwą satelitów - zdjęć, medalionów i naklejek ułożonych na dwóch przerywanych orbitach zbieżnych ze środkiem hero, żeby dodana masa prowadziła wzrok do środka, a nie go rozpraszała. Warstwa włącza się progami (1600, 1900 i 2300 px), więc każdy element pojawia się dopiero wtedy, gdy jest na niego miejsce, i znika w całości na węższych ekranach.

Detal interakcji. Satelity da się złapać myszą - ciągną się jak na gumce, zatrzymują na krawędzi kadru i wracają na miejsce z jednym miękkim przestrzeleniem. To jest ozdoba, nie funkcja, więc na dotyku nie przechwytuje gestu, a przy prefers-reduced-motion nie rusza się wcale.

Weryfikacja zamiast deklaracji. Każdą z tych rzeczy sprawdzaliśmy pomiarem na żywej stronie, a nie na oko: przeczołgane 11 podstron i 13 linków wewnętrznych, zero zepsutych; brak przewijania poziomego w całym zakresie od 390 do 2560 px; CLS równy zero; trafienie kursorem w środek przycisku CTA kończące się na przycisku, a nie na warstwie dekoracyjnej.

// Wniosek

Co z tego wynika dla Twojej firmy

Jeśli prowadzisz lokal i wolumen dostaw idzie przez agregatory, policz jedną liczbę: ile płacisz prowizji od klientów, którzy zamawiają u Ciebie po raz kolejny. To jest górna granica tego, co możesz odzyskać, i jedyna sensowna podstawa do oceny budżetu na stronę. Cena strony porównana z ceną szablonu nie mówi nic.

Drugi wniosek jest ogólniejszy i dotyczy nie tylko gastronomii. Jeśli wydajesz na reklamy, a wyniki stoją, sprawdź najpierw, co użytkownik zastaje po kliknięciu, zanim zoptymalizujesz kampanię po raz piąty. Ruch, który trafia na stronę odpowiadającą na inne pytanie niż zadane, jest ruchem opłaconym i zmarnowanym.

Nie zamykamy przy tym kanału pośredników - one dobrze pozyskują nowych klientów. Rzecz w tym, żeby przestać im płacić za tych, których już się ma.