UX/UI DesignKodowanie2025

Trener Rzepa

Strona sprzedażowa dla trenera personalnego z automatyczną sprzedażą planów treningowych. Projekt wyeliminował ręczną obsługę zamówień i umożliwił sprzedaż 24/7.

Zobacz stronę na żywo – rzepatrener.pl

Klient

Trener personalny

Rola

Design + Kod

Stack

Next.js · Stripe

Rok

2025

01

Wyzwanie

Zanim powstała ta strona, Rzepa obsługiwał sprzedaż całkowicie ręcznie. Klienci pisali do niego w DM na Instagramie, dogadywali szczegóły i płacili BLIKIEM bezpośrednio na telefon. Każde zamówienie to była osobna rozmowa i ręczne pilnowanie płatności. Przy rosnącej publiczności taki system po prostu się nie skalował.

02

Cel

  • Zautomatyzować sprzedaż planów — koniec ręcznej obsługi DM i BLIK na telefon.
  • Sprzedaż działająca 24/7, niezależnie od tego, kiedy Rzepa ma czas.
  • Nowoczesny, konwertujący wygląd pod rosnącą publiczność na Instagramie.

03

Proces

01

Design w Figmie

Projekt każdej sekcji, hierarchia treści i przemyślana ścieżka zakupu — zanim powstała pierwsza linia kodu.

02

Kod w Next.js + Tailwind

Strona pisana od zera: błyskawiczne ładowanie, pełna responsywność i SEO gotowe na rozwój.

03

Integracja Stripe

Płatności online (BLIK, karta, Klarna) i automatyczne powiadomienia o zamówieniach — zero ręcznej obsługi.

04

Rozwiązanie

Zaprojektowałem i zakodowałem stronę od zera w Next.js, z naciskiem na jasną ścieżkę zakupu i mocny przekaz. Ciemny motyw z żółtym akcentem buduje energiczny, sportowy charakter spójny z marką Rzepy.

Nowa sekcja hero strony Trener Rzepa
Sekcja hero — mocny przekaz i jasne CTA
Cennik planów treningowych
Cennik planów z wyróżnioną opcją
Sekcja przemian klientów
Dowód skuteczności — przemiany klientów

05

Automatyzacja przez Stripe

Sercem strony jest checkout wbudowany bezpośrednio na domenie — klient płaci bez przekierowań na zewnętrzną bramkę. Wybiera plan i płaci online (BLIK, karta lub Klarna), a zamówienie trafia do systemu automatycznie.

Rzepa wchodzi na maila, kiedy ma czas, widzi nowe zamówienie i zabiera się do roboty. Żadnych DM, żadnego ręcznego pilnowania płatności.

  • Płatność BLIK, kartą lub Klarna
  • Zamówienie automatycznie trafia na maila
  • Zero przekierowań na zewnętrzną bramkę
Wbudowany checkout Stripe na domenie Trener Rzepa
Checkout na domenie — płatność BLIK / karta / Klarna 24/7

06

Wyniki

Strona nie jest tylko ładna — jest mierzalnie skuteczna. Komplet setek w Lighthouse i realna sprzedaż od pierwszego dnia.

Google Lighthouse

100
Wydajność
100
Dostępność
100
Sprawdzone metody
100
SEO

60+

transakcji online — strona już się zwróciła

24/7

automatyczna sprzedaż, bez udziału Rzepy

0

ręcznej obsługi DM i BLIK

07

Ewolucja designu

Pierwsza wersja strony była już dobra — ale nie poprzestaję na pierwszym podejściu. Przeprojektowałem ją do wersji 2: czytelniejsza hierarchia, mocniejszy przekaz i spójniejszy branding.

v1Pierwsza wersja
Pierwsza wersja strony Trener Rzepa
v2Wersja finalna
Finalna wersja strony Trener Rzepa