Grafit
#161616
Nagłówki, nawigacja i ciemne sekcje
Tworzy wspólną oprawę strony i paneli.
← Powrót do realizacji
UX/UIWeb designDevelopmentŁukasz Sroka · NO LIMITS2026
NO LIMITS - od pierwszego kontaktu do wspólnego treningu
Strona Łukasza Sroki i aplikacja do współpracy z podopiecznymi. Jedna marka, dwa panele: planowanie dnia i prowadzenie treningów dla trenera, plan i postępy pod ręką dla klienta.
- Architektura informacji i UX/UI
- Landing i podstrony oferty
- Adaptacja istniejącej identyfikacji
- Panel trenera i mobilny panel podopiecznego
- Plany, sesje, terminarz, check-iny i pakiety
- Implementacja aplikacji i modelu danych
Projekt w skrócie
NO LIMITS łączy publiczną stronę trenera personalnego z aplikacją wspierającą codzienną współpracę. Landing i pięć podstron przedstawiają Łukasza, ofertę, ceny oraz sposób kontaktu. Panel trenera obejmuje podopiecznych, terminarz, plany i prowadzenie sesji; panel klienta udostępnia plan, wyniki, check-iny i historię pakietów. Case study przedstawia zaimplementowaną wersję rozwojową/demo z danymi testowymi.
Kontekst i problem
NO LIMITS to marka Łukasza Sroki, trenera personalnego z Krakowa. Projekt obejmuje dwa połączone doświadczenia: stronę, która przedstawia współpracę, oraz aplikację, w której trener i podopieczny wracają do planu, wyników i kolejnych spotkań.
Warstwa publiczna obejmuje landing oraz podstrony O mnie, Oferta, Cennik, Opinie i Kontakt. Portret trenera, konkretne formy współpracy i podgląd aplikacji pokazują, czego można oczekiwać przed pierwszą rozmową. Kontakt prowadzi do telefonu, WhatsAppa lub przygotowania wiadomości w poczcie użytkownika.
Po zalogowaniu zmienia się zadanie interfejsu. Trener organizuje dzień, zaprasza podopiecznych, przygotowuje plany i zapisuje serie podczas wspólnego treningu. Podopieczny sprawdza kolejny termin, plan i postępy oraz przekazuje informacje w krótkich check-inach. Każda rola ma własną nawigację i zakres dostępu.
Zakres pracy objął architekturę informacji, UX/UI strony i obu paneli, adaptację istniejącej identyfikacji oraz implementację aplikacji i modelu danych. Wspólny system wizualny zachowuje ciągłość od pierwszego kontaktu z ofertą po codzienne korzystanie z planu.
Ograniczenia
- Zachować rozpoznawalną markę NO LIMITS podczas przejścia ze strony do aplikacji.
- Dopasować panel trenera do pracy na komputerze i tablecie, a panel podopiecznego do telefonu.
- Oddzielić dostęp do danych podopiecznych i prywatnych notatek trenera.
- Zachować historię wyników po zmianie planu oraz jednoznaczne statusy terminów i pakietów.
Założenia strategiczne
- 01
Jedna marka, cała współpraca
Ta sama paleta, logotyp i charakter typografii łączą stronę, logowanie oraz oba panele. Publiczna prezentacja aplikacji wyjaśnia jej rolę w treningu.
- 02
Dwie role, różne priorytety
Trener potrzebuje przeglądu dnia i spraw wymagających uwagi. Podopieczny potrzebuje najbliższego terminu, planu oraz prostego sposobu przekazania informacji.
- 03
Trening prowadzony przez człowieka
Sesję rozpoczyna i prowadzi trener. Podopieczny ma wgląd w plan oraz wyniki, a aplikacja wspiera pracę na sali i kontakt między spotkaniami.
- 04
Informacja z kontekstem
Check-iny mają datę, rodzaj i status przeczytania. Starsze wpisy oraz nierozstrzygnięte terminy są oddzielone od bieżących spraw.
Kierunek kreatywny
Projekt rozwija istniejącą identyfikację NO LIMITS. Grafit, mięta, mocne kursywne nagłówki i zdjęcia Łukasza budują energię strony. W aplikacji ten język przechodzi w spokojniejsze, jasne karty z wyraźnymi działaniami.
Charakter marki
- Energia
- Osobiste wsparcie
- Regularność
- Czytelność
- Ciągłość
Ton komunikacji
Bezpośredni i wspierający. Strona zaprasza do rozmowy o celu, a aplikacja mówi krótko, co jest do zrobienia i jaki jest stan zapisu. Produkt działa po polsku.
Czego świadomie unikaliśmy
- Anonimowy wygląd panelu administracyjnego.
- Nadmierna liczba wskaźników na ekranie startowym.
- Sugerowanie diagnozy na podstawie check-inu.
Kolorystyka
Kolory pochodzą z istniejącej marki i są współdzielone przez stronę oraz aplikację. Grafit porządkuje nawigację, mięta wskazuje główne działania, a jasne powierzchnie ułatwiają pracę z planem i wynikami.
Zieleń NO LIMITS
#01B675
Główne przyciski i akcenty
Wyróżnia następny krok w kontakcie, planie i check-inie.
Jasna mięta
#53F0B8
Wyróżnienia i aktywne elementy
Wnosi energię do ciemnych sekcji i wskazuje aktywną nawigację.
Jasne tło aplikacji
#F6F7F4
Tło obszaru roboczego
Oddziela białe karty i pozostawia miejsce na gęstsze dane treningowe.
Ścieżka użytkownika
Ścieżka łączy poznanie trenera z powtarzalnym rytmem współpracy: zaproszenie, plan, wspólny trening, informacja zwrotna i kolejne spotkanie.
- 01
Poznaj trenera i ofertę
Landing i podstrony przedstawiają podejście, formy współpracy, ceny oraz aplikację. Widoczne wezwania do kontaktu prowadzą do rozmowy.
- 02
Przyjmij zaproszenie
Trener udostępnia link zaproszenia. Podopieczny tworzy konto i uzupełnia ankietę początkową z celami oraz informacjami potrzebnymi do współpracy.
- 03
Ustal plan i terminy
Trener przypisuje plan z dniami i ćwiczeniami oraz organizuje spotkania w terminarzu. Podopieczny widzi aktualny plan i najbliższy termin.
- 04
Zapisz wspólny trening
Podczas treningu trener zapisuje serie, powtórzenia i ciężar. Historia sesji zachowuje wykonany trening niezależnie od późniejszej edycji planu.
- 05
Wróć z informacją
Podopieczny sprawdza wyniki i wysyła check-in. Trener przegląda zgłoszenia, potwierdza przeczytanie i korzysta z historii przy dalszej pracy.
Decyzje UX/UI
- Problem
- Oferta treningowa i aplikacja mogły wyglądać jak dwa niezależne produkty.
- Decyzja
- Wspólna identyfikacja i podgląd funkcji aplikacji na stronie, połączone z widocznym wejściem do logowania.
- Uzasadnienie
- Aplikacja jest częścią współpracy z Łukaszem, więc jej rola powinna być zrozumiała jeszcze przed założeniem konta.
- Wpływ
- Odwiedzający może zobaczyć plan, check-iny i postępy w kontekście oferty.
- Problem
- Jeden rozbudowany panel nie odpowiadałby na potrzeby obu ról.
- Decyzja
- Panel trenera zaczyna się od widoku Dziś. Panel podopiecznego eksponuje kolejny krok i ma dolną nawigację na telefonie.
- Uzasadnienie
- Praca z wieloma podopiecznymi wymaga przeglądu, a korzystanie z własnego planu wymaga krótkiej ścieżki.
- Wpływ
- Plan dnia i zadania trenera są oddzielone od prostego widoku własnych treningów podopiecznego.
- Problem
- Powtarzane lub stare check-iny mogły tworzyć niejasne powiadomienia.
- Decyzja
- Grupowanie spraw według osoby, osobne wpisy dzienne i tygodniowe oraz potwierdzenie przeczytania konkretnej wersji odpowiedzi.
- Uzasadnienie
- Data i źródło nadają informacji kontekst. Edycja przeczytanego wpisu powinna ponownie zwrócić uwagę trenera.
- Wpływ
- Obie strony widzą stan przeczytania, a trener może przejść bezpośrednio do właściwego wpisu.
- Problem
- Zmiana planu lub ponowienie zapisu nie powinny zmieniać historii wykonanych treningów.
- Decyzja
- Sesje zapisują kopię ćwiczeń z chwili rozpoczęcia. Operacje treningów, terminów i pakietów mają kontrolę uprawnień oraz spójności zapisu.
- Uzasadnienie
- Historia musi nadal opisywać faktycznie zapisany trening, nawet gdy plan rozwija się razem z podopiecznym.
- Wpływ
- Plan, wykonana sesja i rozliczenie pakietu mają odrębne, powiązane ze sobą zapisy.
- Problem
- Przygotowanie wiadomości mogło zostać pomylone z jej wysłaniem.
- Decyzja
- Formularz na stronie tworzy treść i otwiera pocztę użytkownika. Komunikat jasno opisuje dalszy krok; obok są bezpośrednie kanały kontaktu.
- Uzasadnienie
- Interfejs powinien odpowiadać rzeczywistemu sposobowi działania kontaktu.
- Wpływ
- Użytkownik sprawdza treść i sam wysyła wiadomość ze swojej poczty.
Kluczowe sekcje
Mobilny landing zachowuje portret, czytelny nagłówek i dostęp do oferty.
Panel podopiecznego: kolejny termin, plan i check-in. Ekran z danymi testowymi.
Postępy siłowe i historia wyników dostępne między spotkaniami. Wykresy prezentują dane testowe.
Od projektu do wdrożenia
Strona publiczna i obie role działają w jednej aplikacji Next.js. Supabase obsługuje logowanie i bazę PostgreSQL, a dostęp do danych jest sprawdzany po stronie serwera oraz przez reguły bazy.
- Next.js + React + TypeScriptPubliczne podstrony, logowanie i panele ról we wspólnej aplikacji; akcje serwerowe obsługują zapis danych.
- Supabase Auth + PostgreSQLKonta z zaproszeń, relacja trener-podopieczny, plany, terminy, sesje, check-iny oraz historia pakietów.
- Uprawnienia i integralnośćReguły RLS, sprawdzanie przypisania podopiecznego, prywatne notatki i transakcyjne operacje chronią zakres odczytu oraz spójność zmian.
- Wspólny system interfejsuTokeny kolorów i odstępów, Kanit oraz Inter Tight, responsywna nawigacja i stany ładowania, błędów oraz pustych widoków.
- Weryfikacja lokalnaUdokumentowane testy jednostkowe, scenariusze na lokalnym Supabase oraz przegląd responsywności.
Co dostarczyliśmy
- 01Landing i pięć podstron: O mnie, Oferta, Cennik, Opinie, Kontakt
- 02Adaptacja istniejącej identyfikacji do strony, logowania i paneli aplikacji
- 03Panel trenera: widok dnia, podopieczni, zaproszenia, terminarz i biblioteka ćwiczeń
- 04Edycja planów oraz prowadzenie sesji z zapisem serii i historią wyników
- 05Mobilny panel podopiecznego: plan, terminy, postępy i check-iny
- 06Potwierdzenia przeczytania check-inów oraz historia pakietów treningowych
- 07Model danych, reguły dostępu i udokumentowane lokalne scenariusze testowe
Najważniejsza decyzja
Najważniejszą decyzją było potraktowanie strony i aplikacji jako kolejnych etapów tej samej relacji. Strona buduje zrozumienie oferty, a panele pomagają utrzymać rytm pracy po pierwszym kontakcie. Wspólna identyfikacja daje ciągłość, natomiast różne układy i priorytety pozwalają każdej roli skupić się na swoim zadaniu.
Następny projektHevelis - precyzyjna marka dla złożonej inżynierii
Identyfikacja i dwujęzyczna strona dla konsultingu systemów lotniczych i embedded. Wykres trajektorii, konkretna oferta i czytelna droga do rozmowy o projekcie.
POROZMAWIAJMY
Porozmawiajmy o Twoim projekcie
Twoja strona ma być początkiem dłuższej współpracy z klientem? Połączmy ją z narzędziem do codziennej pracy.