Sélene Hair Studio: salon fryzjerski
Strona salonu, na której klient rezerwuje sam, o dowolnej porze
W skrócie
Dla kogo
Salony i gabinety pracujące na terminy: fryzjer, barber, kosmetyczka, studio paznokci, masaż, fizjoterapia.
Problem
Klient decyduje się wieczorem, kiedy salon jest zamknięty. Znajduje numer telefonu, odkłada to na jutro i jutro dzwoni gdzie indziej. Nie wie też, ile zapłaci, bo cennik salonu to zwykle „wycena indywidualna” albo brak cennika w ogóle.
Co to zmienia
Wybiera usługę, osobę i termin w czterech krokach, a przy każdej pozycji widzi cenę wyjściową i czas trwania wizyty. Rezerwacja jest otwarta wtedy, gdy klient podejmuje decyzję, a nie wtedy, gdy ktoś odbiera telefon.
Strona salonu, na której klient rezerwuje sam, o dowolnej porze
Strony salonów fryzjerskich zwykle kończą się na galerii zdjęć i numerze telefonu. Klient, który chce się umówić o dwudziestej drugiej, trafia na godziny otwarcia i informację, żeby zadzwonić w godzinach pracy. To jest dokładnie ten moment, w którym decyzja stygnie.
Sélene rozwiązuje to inaczej: rezerwacja jest częścią strony, a nie linkiem do zewnętrznego systemu. Cztery kroki, sześć usług, trzy osoby do wyboru i dwanaście najbliższych dni. Godziny pojawiają się dopiero po wybraniu dnia, więc formularz nie zasypuje klienta stu opcjami naraz.
Drugą decyzją jest cennik. Każda usługa ma cenę wyjściową i czas trwania, a przy koloryzacji także informację, co jest wliczone. Salon, który podaje ceny, odsiewa pytania „ile to kosztuje” i przyciąga klienta, który już wie, na co się pisze.
Warstwa wizualna nie jest tu ozdobą, bo w tej branży wygląd jest częścią tego, co salon sprzedaje. Ciemne tło, a na nim jeden różowy akcent zarezerwowany wyłącznie dla działania: przycisk rezerwacji, kreska przy nagłówku sekcji, znak w logo. Nic innego nie krzyczy kolorem, więc oko idzie tam, gdzie ma iść. Przełącznik języka stoi obok głównego przycisku, ale jako obrys zamiast wypełnienia, bo na ekranie może być tylko jedno wezwanie pierwszego wyboru.
Nagłówki złożone są szeryfową antykwą o dużym kontraście grubości, a nawigacja i podpisy wersalikami z rozstrzelonymi literami. Ten podział robi coś, czego nie zrobi jedna rodzina krojów: część redakcyjna wygląda jak magazyn, część funkcjonalna jak interfejs. Galeria metamorfoz łamie siatkę na jeden duży kadr i dwa mniejsze obok, przez co czyta się jak portfolio, a nie jak katalog produktów.
Poniżej opisuję, na czym to zbudowałem i dlaczego akurat tak. Jeśli interesuje Cię tylko efekt, możesz to spokojnie pominąć i przejść do podsumowania.
Stack technologiczny
Next.js 14 (App Router)
Statyczny render treści marketingowych z klientowską interaktywnością tam, gdzie jest potrzebna, czyli w rezerwacji. Cała strona główna schodzi do przeglądarki jako 17 kB HTML-a.
Dwujęzyczność z poprawnym hreflang
Wersje /pl i /en, wzajemne odnośniki hreflang oraz x-default wskazujący na polską. Bez tego Google traktuje wersje językowe jak duplikaty i wybiera jedną sam.
Rezerwacja jako formularz wieloetapowy
Cztery etapy oparte na natywnych grupach radio: usługa, osoba, dzień, dane kontaktowe. Natywne kontrolki oznaczają obsługę klawiatury i czytnika ekranu bez pisania własnej logiki fokusu.
Godziny renderowane warunkowo
Dwanaście dni w wyborze, a konkretne godziny dopiero po wybraniu dnia. Ogranicza to liczbę decyzji na ekranie i skraca formularz do tego, co w danym momencie potrzebne.
Dane strukturalne HairSalon i FAQPage
Schemat HairSalon opisuje salon jako firmę lokalną z adresem i usługami, FAQPage odpowiada za rozwijane pytania. To one decydują o tym, jak wpis wygląda w wynikach wyszukiwania.
Budżet wagi trzymany od początku
Piętnaście zasobów i 212 kB transferu na całą stronę główną. Dla porównania: pojedyncze zdjęcie w tle na typowej stronie salonu potrafi ważyć tyle samo.
Najciekawsze rozwiązania techniczne
Rezerwacja, która nie potrzebuje osobnego systemu
Zamiast wpinać zewnętrzny widget rezerwacyjny z własnym wyglądem i własną wagą, formularz jest częścią strony. Wygląda jak reszta serwisu, ładuje się razem z nią i nie wysyła klienta na obcą domenę w połowie decyzji.
Cennik jako dane, nie jako obrazek
Ceny, czasy trwania i oznaczenia w rodzaju „Olaplex w cenie” są w treści strony, więc czyta je zarówno klient, jak i wyszukiwarka. Cennik wrzucony jako zdjęcie albo PDF nie istnieje dla Google i nie działa na telefonie.
Sekcja opinii z zachowaną opinią krytyczną
Wśród wybranych komentarzy jest jeden o przeciągniętej wizycie, razem z informacją o reakcji salonu. To decyzja treściowa, nie techniczna, ale robi dla wiarygodności więcej niż cztery pochwały pod rząd.
Co z tego wynika dla Twojej firmy
Ten wzorzec przenosi się na każdą usługę umawianą na termin. Trzy rzeczy decydują tu o wyniku: klient widzi cenę, zanim zapyta, rezerwuje wtedy, gdy podjął decyzję, a nie gdy Ty odbierasz telefon, i robi to bez opuszczania Twojej strony. Reszta, czyli framework i sposób renderowania, jest wymienna. Te trzy rzeczy nie.
Twoja firma może być
moim kolejnym projektem
Opowiedz mi o swojej firmie, a powiem, który z tych mechanizmów miałby u Ciebie sens, a który byłby wydatkiem bez pokrycia.
Powiem też, czego nie warto u Ciebie robić