Strona wypożyczalni wózków widłowych // Stochastic Company

Pierwszy ekran nowej strony na komputerze. Po lewej hasło „Wynajmujesz wózek. Resztę załatwiamy my.”, zdanie o serwisie, przeglądach i UDT w cenie wynajmu, duży numer +48 600 815 876 i przycisk „Uzyskaj wycenę”. Po prawej ciemny kafel „Przyjeżdżamy z częściami.” o serwisancie, który przyjeżdża z częściami. Numer telefonu powtarza się w prawym górnym rogu nagłówka.

Problem

MMHT zaczynało od handlu maszynami. Handel jest coraz mniej opłacalny, więc firma stawia na wynajem. Najlepszy klient to mała lub średnia firma produkcyjna albo magazynowa, która chce wynająć wózek na miesiące i nie zajmować się serwisem ani przeglądami.

Stara strona pokazywała raczej katalog sprzedażowy. Wejście przez https:// kończyło się pełnoekranowym ostrzeżeniem przeglądarki, bo serwer podawał certyfikat hostingodawcy zamiast certyfikatu dla mmht.pl. Strona nie miała robots.txt ani mapy witryny, cztery warianty adresu pokazywały tę samą treść, a większość podstron miała ten sam tytuł. W PageSpeed Insights na telefonie dostawała 69 punktów za wydajność, a największy element ładował się 11 sekund.

Stara strona mmht.pl otwarta przez HTTP. Pełnoekranowe zdjęcie pracownika z wózkiem paletowym, hasło „Wózki w pełni przygotowane do pracy z gwarancją bez limitu mth”, menu z wyborem języka i przycisk „Panel klienta”. Na pierwszym ekranie nie widać numeru telefonu ani słowa o wynajmie.

Drugi problem leżał po stronie klienta. Osoba, która pierwszy raz wynajmuje wózek, zwykle nie zna nazw maszyn ani ich parametrów. Jeśli formularz zmusza ją do wyboru, zgaduje i często zgaduje źle. Właściciel odpowiada na telefon w minutę, a odpisywanie na zgłoszenia zajmuje mu więcej czasu.

Rozwiązanie

Strona jest zbudowana od nowa i mówi przede wszystkim o wynajmie. Sprzedaż i serwis zostały jako osobne podstrony.

Pierwszy ekran mówi, co klient dostaje: wózek do pracy, a serwis, przeglądy i UDT w cenie wynajmu. Obok wyróżnik firmy: serwisant przyjeżdża z częściami, a nie tylko po to, żeby obejrzeć usterkę.
Wybór według zadania. Pięć rodzajów wózków opisanych tym, do czego służą: przewożenie palet, odkładanie na regały, kompletowanie zamówień. Szósty kafel prowadzi do przewodnika dla osób, które nie wiedzą, co wybrać.
Jak wygląda wynajem. Trzy kroki: rozmowa o pracy, ustalenie warunków, serwis po stronie MMHT.
Kontakt na czerwonym pasie na końcu każdej strony, z tym samym numerem i przyciskiem.

Na stronie nie ma zmyślonych liczb ani obietnic. Flota „ponad 100 wózków” pojawia się, bo potwierdził ją właściciel. Marki Linde i Still są wymienione jako sprzęt, który firma wynajmuje, z zastrzeżeniem, że MMHT nie jest ich oficjalnym dystrybutorem. Tam, gdzie brakuje zdjęć własnych maszyn i cennika, w kodzie stoją oznaczone braki, a nie zdjęcia ze stocka.

Strona „Najpierw zadanie. Potem wózek.” z trzema pierwszymi rodzajami wózków. Przy każdym czerwona ikona sylwetki maszyny, opis w kilku zdaniach, kolumna „Do jakiej pracy?” z przykładami zastosowań i link do wynajmu danego typu.

Przewodnik po rodzajach wózków odpowiada na zdanie właściciela, że ludzie nie mają pojęcia, co w ogóle istnieje. Każdy typ ma własną ikonę rysowaną w SVG na podstawie zdjęć referencyjnych, opis bez żargonu i przykłady prac. Te same nazwy wracają w pierwszym pytaniu formularza, więc klient, który przeczytał przewodnik, rozpoznaje je od razu.

Telefon najpierw, formularz dla tych, którzy nie zadzwonią

Numer +48 600 815 876 jest największym tekstem w nagłówku i nagłówek zostaje na górze ekranu przy przewijaniu. Na telefonie numer jest widoczny razem z hasłem i przyciskiem, zanim ktokolwiek przewinie stronę.

Pierwszy ekran strony na telefonie o szerokości 390 px. W nagłówku logo i numer +48 600 815 876, pod nim hasło „Wynajmujesz wózek. Resztę załatwiamy my.”, zdanie o serwisie w cenie wynajmu, duży numer telefonu, przycisk „Uzyskaj wycenę” i początek kafla o serwisie.

Formularz nazywa się „Uzyskaj wycenę” i od razu wyjaśnia: „Oddzwonimy, żeby ustalić szczegóły i cenę”. Nie pokazuje ceny ani przedziału, bo właściciel nie chce automatycznej wyceny, a parametry od klienta są tylko punktem wyjścia do rozmowy.

Formularz na stronie kontaktu, pytanie 4 z 7: „Jaki rozmiar wideł?”. Pięć odpowiedzi od europalety 1150 × 560 mm po długie widły, zaznaczona odpowiedź „nie wiem”, przyciski „Wstecz” i „Dalej”. Nad formularzem komunikat, że wysyłka jest wyłączona, i numer telefonu.

Jedno pytanie na ekran. Pasek postępu pokazuje, ile zostało, więc formularz nie wygląda na niekończący się.

Pytania zależą od wózka. Wózek czołowy dostaje pytania o udźwig i wysokość podnoszenia. Wózek paletowy pyta o rodzaj sterowania i rozmiar wideł. Wózek do kompletacji pyta najpierw, czy kompletacja jest niska czy wysoka, i dopiero potem o długość wideł albo wysokość. Kto wybierze „inne”, opisuje potrzebę własnymi słowami. Każda ścieżka kończy się tak samo: okres najmu, miejsce pracy i telefon.

„Nie wiem” przy każdym parametrze technicznym. To odpowiedź tańsza w obsłudze niż błędna, która udaje prawdziwą.

Telefon wymagany, e-mail opcjonalny. Odwrotnie niż zwykle, bo tak firma obsługuje klientów.

Wysyłka jest na razie świadomie wyłączona. Formularz da się przejść do końca, ale nic nie wysyła i nie zapisuje odpowiedzi, a punkt odbioru na serwerze zwraca odmowę. Mówi o tym komunikat nad pytaniami, obok numeru telefonu. Formularz ruszy, gdy będą gotowe dokumenty o przetwarzaniu danych i ochrona przed nadużyciami.

Zasięg pokazany tym, co potwierdzone

Wynajem wózków jest lokalny, bo transport kosztuje. Klient chce wiedzieć, czy firma do niego dojedzie.

Sekcja „Blisko Twojej pracy.” z mapą regionu narysowaną w SVG. Gwiazdka oznacza siedzibę MMHT w Genowefie, punkty oznaczają 35 obsługiwanych miast od Poznania i Bydgoszczy po Warszawę i Wieluń. Pod mapą lista miast z linkami do podstron.

Mapa jest własnym rysunkiem w SVG, z prawdziwymi współrzędnymi miast i siedzibą w Genowefie. Pokazuje 35 miejscowości, które właściciel potwierdził, bez narysowanego promienia i bez obietnicy czasu dojazdu, bo transport ustala się przy każdym wynajmie. Nie ładuje map Google, więc nie spowalnia strony. Mapa Google jest tylko na stronie kontaktu.

Każde miasto z listy ma własną podstronę. Nie jest to szablon z podmienioną nazwą: każda strona dostaje inną praktyczną wskazówkę, na przykład o szerokości alejek przy regałach, o wjeździe do chłodni albo o pracy na kilka zmian.

Jak to jest zbudowane

Strona jest statyczna, zbudowana w Astro z TypeScriptem w trybie strict i zwykłym CSS, bez Reacta i bez frameworka po stronie przeglądarki. Projekt zaczynał się od klonu starej strony w Next.js z hasłem do podglądu zapisanym w kodzie. Przenieśliśmy go do Astro, usunęliśmy klon i hasło, a podgląd chroni Vercel Deployment Protection.

Każda podstrona ma własny tytuł, opis i adres kanoniczny. Dane strukturalne Schema.org opisują firmę jako lokalny biznes z adresem, NIP, godzinami i listą obsługiwanych miast, a podstrony usług jako usługi. Mapa witryny i robots.txt generują się przy budowie. Podgląd jest zawsze wyłączony z indeksowania, nawet gdy ktoś włączy indeksowanie w ustawieniach. Przekierowania sprowadzają adresy z www do jednej wersji, a stare adresy podstron prowadzą do nowych odpowiedników.

Google Analytics i Microsoft Clarity ładują się dopiero po zgodzie, a przycisk odmowy jest tak samo widoczny jak zgoda. Do czasu zatwierdzenia dokumentów prawnych analityka jest wyłączona w konfiguracji.

Kolory pochodzą z logo: czerwień, grafit i jasne tła. Ciemniejsza czerwień w tekście trzyma kontrast wymagany przez WCAG. Testy w Playwright przechodzą przez wszystkie strony w Chromium, WebKit i emulacji telefonu. Sprawdzają widoczny numer, metadane, brak poziomego przewijania, ścieżki formularza i to, że formularz niczego nie wysyła ani nie zapisuje. axe-core nie znalazł naruszeń WCAG 2.1 AA na sprawdzanych stronach.

W pomiarze Lighthouse na lokalnym podglądzie, w profilu mobilnym, strona główna dostała 100 punktów za wydajność, dostępność i dobre praktyki, a przesłała około 25 KB. Stara strona główna ważyła 1,7 MB.

Co to zmienia

Klient, który nie wie, jaki wózek wynająć, nie musi tego wiedzieć. Przeczyta, do czego służy każdy typ, zadzwoni pod numer widoczny na każdym ekranie albo przejdzie przez kilka pytań i przy każdym parametrze odpowie „nie wiem”.

Właściciel dostaje rozmowę, którą prowadzi najlepiej, zamiast zgłoszeń z parametrami przepisanymi z konfiguratora producenta. Strona mówi o wynajmie, a nie o katalogu, który firma wygasza.

Po przepięciu domeny mmht.pl otworzy się bez ostrzeżenia o certyfikacie, w jednej wersji adresu i z treścią, którą Google może zaindeksować.