Strona dla eksportera z animacją WebGL i konfiguratorem współpracy - case study STEPTRADE

Łukasz Mrozek sprzedaje eksport. Nie wiedzę o eksporcie, tylko jego wykonanie: pozyskiwanie importerów żywności w Wielkiej Brytanii i całej Unii, negocjacje w imieniu producenta i rozwój sprzedaży po pierwszym zamówieniu. Problem był taki, że jego strona internetowa musiała to udowodnić w pierwszych trzech sekundach, zanim brytyjski buyer w ogóle przeczyta pierwszy akapit. Zbudowałem dla STEPTRADE autorską stronę z animacją WebGL w tle i konfiguratorem współpracy, który kwalifikuje leada jeszcze przed pierwszą rozmową.

To druga po Ustawnik.pl realizacja, którą mogę pokazać publicznie z nazwą klienta. Poniżej opisuję, co dokładnie zbudowałem, dlaczego autorski kod zamiast WordPressa i gdzie taka strona ma sens, a gdzie to przerost formy.

TL;DR

Klient: Łukasz Mrozek, STEPTRADE. Ekspert strategii sprzedaży międzynarodowej i eksportu FMCG. Czternaście lat w eksporcie polskiej żywności, z doświadczeniem po stronie kupującego, u polskiego dystrybutora działającego na rynku brytyjskim.

Cel: strona, która sprzedaje wykonanie usługi eksportowej, tłumaczy złożony proces bez przytłoczenia i odsiewa zapytania, zanim trafią na telefon.

Rozwiązanie: autorska strona firmowa z animacją WebGL (sieć 28 rynków europejskich), konfiguratorem współpracy na dwanaście pytań i procesem rozbitym na siedem etapów. Dwujęzyczna, PL i EN, bo połowa odbiorców siedzi w Wielkiej Brytanii.

Technologia: autorski kod, nie CMS. Cienka warstwa PHP, WebGL na cząsteczkach, wszystko własnoręcznie zoptymalizowane pod wydajność i dostępność.

Efekt: działająca strona, która robi premium pierwsze wrażenie i kwalifikuje leada jeszcze przed pierwszą rozmową. Realizacja jest publiczna pod adresem steptrade.pl, a klient zostawił opinię 5/5 w Google.

Klient: sprzedawca, nie konsultant

STEPTRADE to jednoosobowa marka Łukasza Mrozka. Łukasz od czternastu lat wprowadza polskie produkty rolno-spożywcze na rynki zagraniczne, a najważniejsze doświadczenie zdobył po drugiej stronie stołu, pracując u polskiego dystrybutora działającego na rynku brytyjskim. Dzięki temu rozumie jednocześnie polskiego producenta i brytyjskiego kupującego: wie, kto naprawdę decyduje o zamówieniu, na co patrzy buyer i dlaczego dobre produkty przepadają na półce.

Jego usługa nie jest kursem ani doradztwem na godziny. Łukasz działa jak zewnętrzny dział eksportu producenta: outsourcing działu eksportu w pełnym zakresie. Bierze na siebie całą sprzedaż na danym rynku: znajduje importerów i dystrybutorów, którzy realnie mogą kupić, prowadzi rozmowy w imieniu producenta i po pierwszym zamówieniu rozwija sprzedaż dalej. Obsługuje dwadzieścia osiem rynków, od Wielkiej Brytanii przez Niemcy po Maltę i Cypr, a także drugi kierunek: zagranicznych producentów, którzy chcą wejść na rynek polski.

To jest trudne do sprzedania stroną internetową. Klient Łukasza to producent żywności albo właściciel hurtowni, który podejmuje decyzję na kilkadziesiąt albo kilkaset tysięcy złotych obrotu. Taki klient nie kupi z generycznej wizytówki z darmowego szablonu. Pierwsze wrażenie musi mówić: to jest ktoś, kto pracuje na poziomie, na którym ja chcę działać.

Wyzwanie: trzy rzeczy naraz

Zwykła strona firmowa robi jedną z tych rzeczy. Ta musiała zrobić trzy jednocześnie.

Zbudować zaufanie premium w trzy sekundy. Buyer, który wchodzi z LinkedIna albo z polecenia, ocenia wiarygodność zanim cokolwiek przeczyta. Strona nie może wyglądać jak broszura. Musi wyglądać jak ktoś, kto zna się na rzeczy i ma kontakty, których nie da się kupić.

Wytłumaczyć złożoną usługę bez ściany tekstu. Sześć różnych sytuacji klienta, siedem etapów procesu, dwadzieścia osiem rynków, dwa kierunki współpracy. Wrzucenie tego w formie listy odstrasza. Trzeba było poprowadzić odwiedzającego przez tę złożoność tak, żeby w każdym momencie wiedział, gdzie jest i co z tego dla niego wynika.

Kwalifikować leada przed rozmową. Łukasz pracuje sam. Jego czas to jego towar. Strona, która generuje dużo zapytań w stylu „ile to kosztuje?", robi mu krzywdę, bo każde takie zapytanie to trzydzieści minut rozmowy bez wyniku. Potrzebne było narzędzie, które sprawi, że lead trafi na telefon już z określonym modelem współpracy.

Do tego dochodził warunek brzegowy: dwa języki. Połowa rozmów Łukasza to Wielka Brytania, więc angielski nie mógł być tłumaczeniem doklejonym na siłę, tylko pełnoprawną wersją.

Rozwiązanie: co zbudowałem

Hero z animacją WebGL, która coś znaczy

Pierwszy ekran to animacja WebGL na cząsteczkach: sieć punktów układająca się w kształt globu, z zieloną plamą Europy w centrum i rozchodzącymi się połączeniami. To nie jest dekoracja dla samej dekoracji. Cała propozycja wartości Łukasza brzmi „kontakty i relacje, których nie da się kupić", a animowana sieć połączeń jest dokładnie tej myśli wizualnym odpowiednikiem. Odwiedzający czuje sens, zanim przeczyta hasło.

Technicznie to system cząsteczek renderowany w przeglądarce, bez wtyczek i bez filmu w tle, który ważyłby kilka megabajtów. Animacja liczy się na bieżąco i dopasowuje do ekranu.

Konfigurator współpracy: lead kwalifikuje się sam

Serce strony to interaktywny konfigurator. Kilka pytań, około dwie minuty, wynik od razu na ekranie. Odwiedzający odpowiada, w jakiej jest sytuacji (polski producent, producent zagraniczny, szukający wykonawcy pod własną markę, sklep albo hurtownia), a konfigurator dopasowuje jeden z trzech modeli współpracy (Market Entry, Sales Development, Market Representation) i pokazuje, od którego etapu procesu zaczęłaby się robota u niego.

To przenosi ciężar kwalifikacji z Łukasza na stronę. Zamiast dzwonić z pytaniem „czym się właściwie zajmujesz?", klient przychodzi już z odpowiedzią „jestem w modelu Market Entry, interesuje mnie wejście na rynek brytyjski". Rozmowa zaczyna się od konkretu, a nie od tłumaczenia podstaw.

Proces rozbity na siedem etapów, z których każdy coś daje

Usługę eksportową łatwo sprzedać jako mgłę: „zajmę się wszystkim". Zrobiliśmy odwrotnie. Proces jest rozpisany na siedem etapów, a przy każdym widać, co konkretnie klient dostaje na wyjściu: po etapie pierwszym jasno określony cel i rynek, po analizie ocenę szans i rekomendację, po etapie z kontaktami wyselekcjonowaną listę klientów, aż po pierwsze zamówienie i dalszy rozwój sprzedaży. Odwiedzający widzi, że płaci za wykonanie kolejnych kroków, a nie za przekazany kontakt i życzenie powodzenia.

Siatka 28 rynków i sekcja o człowieku

Dwadzieścia osiem krajów Unii plus Wielka Brytania jest pokazane jako siatka, po której widać zasięg bez czytania wyliczanki. Osobna sekcja przedstawia samego Łukasza: dwadzieścia dwa lata w sprzedaży, czternaście w eksporcie, doświadczenie po stronie kupującego w Wielkiej Brytanii i po stronie produkcji. W usłudze, w której kupuje się zaufanie do konkretnej osoby, twarz i historia są częścią oferty, nie dodatkiem.

Dwa języki od podstaw

Strona jest w pełni dwujęzyczna, PL i EN, z przełącznikiem w nawigacji. Angielski nie jest maszynowym tłumaczeniem, tylko osobną, dopracowaną wersją pod brytyjskiego odbiorcę.

Decyzja techniczna: dlaczego autorski kod, a nie WordPress

Najczęstsze pytanie przy takiej stronie brzmi: po co pisać od zera, skoro jest WordPress i tysiąc szablonów. Odpowiedź ma trzy warstwy.

Wydajność. Strona z ciężką animacją WebGL i tak obciąża przeglądarkę. Dokładanie do tego WordPressa z motywem, page builderem i kilkunastoma wtyczkami oznaczałoby, że zanim jeszcze ruszy animacja, przeglądarka przemieli kilkaset kilobajtów kodu, którego nikt nie użyje. Autorski kod to tylko to, co faktycznie jest na stronie.

Kontrola nad animacją. WebGL zintegrowany z cyklem renderowania strony wymaga pełnej kontroli nad tym, kiedy i jak animacja się uruchamia, zatrzymuje przy ukrytej karcie i zwalnia pamięć. W autorskim kodzie to ustawiam dokładnie tak, jak trzeba. W cudzym motywie walczyłbym z jego założeniami.

Brak balastu na lata. WordPress to zobowiązanie: aktualizacje rdzenia, wtyczek, łatanie podatności. Strona wizerunkowa jednoosobowej firmy nie potrzebuje comiesięcznej obsługi CMS-a. Autorska strona na cienkiej warstwie PHP po prostu działa, a Łukasz nie dostaje co chwilę maila „dostępna aktualizacja, zaktualizuj albo ryzykujesz włamanie".

To nie jest stanowisko „WordPress jest zły". Przy Ustawnik.pl wybrałem WooCommerce, bo tam był sklep B2B z katalogiem sześciu marek i rolą kontrahenta, i budowanie tego od zera byłoby marnotrawstwem. Narzędzie dobiera się do zadania. Tutaj zadaniem była szybka, wizerunkowa strona z mocnym efektem wizualnym i jednym interaktywnym narzędziem. Do tego autorski kod jest lepszy.

Stack

• Frontend: autorski HTML i CSS, bez frameworka, WebGL na cząsteczkach, waniliowy JavaScript dla konfiguratora i interakcji
• Backend: cienka warstwa PHP dla obsługi formularza i wersji językowych
• Hosting: własna domena klienta, steptrade.pl
• Języki: pełne PL i EN

Kod jest po stronie klienta. Bez vendor lock-in, bez abonamentu za utrzymanie, bez revenue share. Jednorazowe wdrożenie, a strona zostaje z Łukaszem.

Efekt: co ta strona realnie zmienia

Wartość tej strony widać w tym, co realnie zmienia w pozyskiwaniu klienta.

To, co mogę pokazać, to trzy rzeczy.

Po pierwsze, realizacja jest publiczna i da się ją kliknąć: steptrade.pl działa, animacja chodzi, konfigurator liczy wynik na żywo. To jest weryfikowalne, nie opis w folderze.

Po drugie, zmienił się punkt startu rozmowy. Dzięki konfiguratorowi pierwszy kontakt zaczyna się od określonego modelu współpracy, a nie od tłumaczenia, czym w ogóle jest usługa. Dla kogoś, kto pracuje sam, to oszczędność najcenniejszego zasobu, czyli czasu.

Po trzecie, pierwsza reakcja klienta. Łukasz zostawił publiczną opinię w Google:

Polecam fachowość i zaangażowanie na 10. Strona wygląda świetnie, a do tego stały kontakt i pomoc ze strony Dominika.

Łukasz Mrozek, właściciel STEPTRADE

To wszystko można dziś sprawdzić samemu: kliknąć stronę, przejść konfigurator, przeczytać opinię z imienia i nazwiska. Taki fundament pracuje na sprzedaż Łukasza na dwudziestu ośmiu rynkach.

Kiedy taka strona ma sens, a kiedy nie

Autorska strona z WebGL i interaktywnym narzędziem to nie jest odpowiedź na każdą potrzebę. Warto, kiedy:

• sprzedajesz usługę premium albo produkt, w którym pierwsze wrażenie decyduje o tym, czy klient w ogóle zacznie rozmowę
• masz złożoną ofertę, którą trzeba komuś wytłumaczyć krok po kroku, zamiast wrzucić w cennik
• zależy Ci na tym, żeby strona odsiewała zapytania, a nie tylko je zbierała
• chcesz coś, co wyróżni Cię wizualnie w branży, w której konkurencja ma szablony

Nie warto, kiedy:

• potrzebujesz zwykłej wizytówki z adresem i telefonem, bo wtedy WebGL to koszt bez zwrotu
• Twój klient szuka najniższej ceny, a nie jakości, bo wtedy efekt wizualny go nie przekona
• masz sklep z setkami produktów, bo to jest zadanie dla platformy e-commerce, nie dla strony wizerunkowej

Uczciwie: gdyby Łukasz sprzedawał masowo najtańszy produkt, odradziłbym mu tę stronę. Ale on sprzedaje wykonanie i zaufanie na wysokim poziomie, i tu forma pracuje na wynik.

Często zadawane pytania

Ile kosztuje taka strona z animacją WebGL?

Zależy od złożoności animacji i liczby interaktywnych elementów. Strona wizerunkowa z jedną animacją WebGL i jednym konfiguratorem to inny pułap niż zwykła wizytówka, ale znacznie mniej niż rozbudowany portal czy sklep. Wycenę podaję na piśmie przed startem, bez „od" bez sufitu. Napisz, co chcesz osiągnąć, a policzę konkret.

Czy animacja WebGL nie spowalnia strony?

Spowalnia, jeśli jest zrobiona źle: ciężki film w tle, nieoptymalizowany model, brak zatrzymywania przy ukrytej karcie. Zrobiona dobrze, jako lekki system cząsteczek liczony na bieżąco, kosztuje niewiele i zatrzymuje się, gdy nikt nie patrzy. Wydajność pilnuję od pierwszej linii, nie doklejam jej na końcu.

Dlaczego autorski kod zamiast WordPressa?

Przy stronie wizerunkowej z mocnym efektem wizualnym autorski kod jest szybszy, daje pełną kontrolę nad animacją i nie wymaga comiesięcznej obsługi CMS-a. WordPress ma sens tam, gdzie potrzeba sklepu albo rozbudowanego zaplecza treści. Narzędzie dobieram do zadania, nie odwrotnie.

Co to jest konfigurator współpracy i po co komu na stronie?

To interaktywne narzędzie, które na podstawie kilku odpowiedzi dopasowuje odwiedzającemu właściwy model współpracy i pokazuje wynik od razu. Na stronie usługowej robi dwie rzeczy: pomaga klientowi zrozumieć, gdzie pasuje, i kwalifikuje leada, żeby na rozmowę trafił ktoś z konkretną potrzebą, a nie z pytaniem „czym się zajmujecie?".

Czy dostanę kod strony na własność?

Tak. Kod trafia do klienta, bez vendor lock-in i bez abonamentu za utrzymanie. Możesz z nim pójść do kogokolwiek albo utrzymywać go samodzielnie. Nie trzymam klientów na uwięzi dostępów.

Robisz strony dwujęzyczne?

Tak. Przy STEPTRADE zbudowałem pełne wersje PL i EN, bo połowa odbiorców to Wielka Brytania. Druga wersja językowa to osobna, dopracowana treść, a nie tłumaczenie maszynowe doklejone przełącznikiem.

Jak długo trwa wdrożenie takiej strony?

Strona wizerunkowa z jedną animacją WebGL i konfiguratorem to kwestia kilkunastu dni roboczych, zależnie od tego, jak gotowe są treści i jak złożona ma być interakcja. Dokładny termin podaję razem z wyceną, na piśmie, przed startem.

Podobne realizacje i następne kroki

Jeśli budujesz obecność w sieci pod usługę premium albo produkt, w którym liczy się pierwsze wrażenie, zajrzyj do strony internetowej dla firmy. Jeśli myślisz o interaktywnym narzędziu, które pokazuje produkt w 3D, zobacz portal z konfiguratorem produktu 3D. A jeśli masz sprzedaż B2B z katalogiem i zapytaniami ofertowymi, to jest historia portalu B2B Ustawnik.pl, drugiej realizacji, którą pokazuję z nazwą.

Wszystkie opinie, które zbieram, są publiczne, z pełnym imieniem i nazwiskiem oraz linkiem do źródła. Zobacz rekomendacje na stronie o mnie.

Masz podobne wyzwanie? Napisz do mnie. Powiedz, co chcesz osiągnąć, a odpowiem uczciwie, czy dla Twojej firmy taka strona się kalkuluje, czy lepiej wydać te pieniądze inaczej.