Projekt: Opracowanie projektu (UI/UX) dla aplikacji internetowej B2B2B SaaS platformy "Wirtualny Instruktor Pilatesu".
1. Przegląd Projektu:
Tworzymy platformę B2B2B SaaS dla branży pilatesu. Udostępniamy ją dystrybutorom sprzętu, którzy oferują ją studiom pilates jako rozwiązanie "white-label" (pod marką studia). Platforma zawiera naszą premium bibliotekę wideo treningów oraz "budowniczy treningów". Główny scenariusz B2C – treningi w studiu na dużych ekranach (TV) ("10-foot UI").
Interfejsy:
Aplikacja B2C: Dla klientów studiów (TV/Wielki Ekran Najpierw).
Portal B2B: Dla studiów (Desktop Najpierw).
(Koncepcja) Portal Super Admin: Dla nas (Desktop Najpierw).
Celem projektu jest stworzenie kompleksowego, wysokiej jakości projektu wszystkich kluczowych ekranów i funkcji dla wszystkich trzech interfejsów, aby pokazać pełny potencjał dystrybutorom. Projekt ma być profesjonalny, nowoczesny, intuicyjny, z naciskiem na UX dla TV.
2. Grupa Docelowa:
B2C (Klienci Studiów):
Urządzenia: Główne – TV/Wielki ekran (oglądanie z odległości). Drugorzędne – Tablet, Desktop. Mobile – responsywność.
Podejście do Projektu: "10-foot UI" / "TV-first". Czytelność i obsługa z odległości (pilot/klawiatura).
B2B (Studia):
Urządzenia: Desktop.
Projekt: Czysty, profesjonalny, zorientowany na zarządzanie danymi.
(Koncepcja) Super Admin:
Urządzenia: Desktop.
Projekt: Funkcjonalny, do zarządzania platformą.
3. Kluczowa Koncepcja (White-Label):
Projekt B2C i B2B powinien łatwo dostosować się do marki studia:
Dynamiczne Logo (ładowane przez studio).
Dynamiczny Główny Kolor (wybierany przez studio).
Projekt powinien być neutralny i elastyczny.
4. Szczegółowe Ekrany i Funkcje (UI w makietach – po angielsku!):
A. Aplikacja B2C (TV / Wielki Ekran Najpierw, UI w języku angielskim):
Ogólne Wymagania ("10-foot UI"): Duże czcionki (>20-32pt), wysoki kontrast, prosta nawigacja (D-pad/strzałki), wyraźny fokus aktywnego elementu, duże strefy klikalne (min 60x60px), nieprzeładowany interfejs, wizualna reakcja.
Historie Użytkowników (Przykłady):
Klient: Łatwo znaleźć trening na TV za pomocą pilota/filtrów. Widzieć wyraźne wskazówki/timer podczas treningu.
Instruktor: Szybko uruchomić playlistę na głównym ekranie studia z tabletu.
Klient: Stworzyć własny program na tablecie i odtworzyć go na TV.
Moduł: Autoryzacja i Wprowadzenie
Ekran Logowania: Logo studia, Email, Hasło (widoczne), przycisk "Zaloguj się", "Zapomniałeś hasła?". Stany: Domyślny, Skupiony, Błąd, Ładowanie. Klawiatura ekranowa (jeśli potrzebna).
Ekran Zapomniane Hasło: Logo, Email, przycisk "Wyślij link resetujący", "Powrót do logowania". Stany: Domyślny, Błąd, Sukces.
(Możliwe) Ekran Rejestracji: Logo, Imię, Email, Hasło/Potwierdzenie, przycisk "Zarejestruj się", "Zaloguj się". Stany: Domyślny, Skupiony, Błąd (walidacja).
Ekrany Wprowadzenia (Pierwsze Logowanie): 2-3 ekrany (Powitanie; instrukcja nawigacji pilotem; możliwy wybór poziomu). Przycisk "Dalej", "Pomiń", "Rozpocznij".
Moduł: Główny Ekran (Dashboard / Strona Główna)
Komponenty: Pionowa lista poziomych karuzel (Kontynuuj Oglądanie, Nowe Wydania, Polecane, Moje Rutyny). Duże nagłówki. Duże karty wideo (Miniatura, Tytuł, Czas trwania).
Nawigacja: Strzałkami między rzędami i kartami. Aktywna karta wyróżniona (ramka/rozmiar).
Stany: Domyślny, Skupiony. Stan Pusty (jeśli brak danych).
Moduł: Biblioteka (Biblioteka / Eksploruj)
Komponenty: Widok siatki (duże karty, 3-4 w rzędzie). Panel Kategorii/Filtrów (boczny lub górny, duże elementy, wyraźny wybór). Sortowanie (prosty wybór). Wyszukiwanie (ikona -> ekran wyszukiwania z dużym polem, klawiatura ekranowa?, siatka wyników).
Stany: Aktywny filtr/sortowanie. Stan "Brak wyników".
Moduł: Odtwarzacz (Odtwarzacz Wideo)
Komponenty: Wideo na pełnym ekranie. Nakładka Kontrolna (pojawia się/znika, duże ikony: Odtwórz/Pauza, Pasek Postępu, Czas, Następny/Poprzedni, Tytuł). Opcjonalnie: Przewiń/Wprzód (przywiązać do strzałek?), Ulubione (przy pauzie), Ustawienia (jakość).
Stany: Odtwarzanie, Wstrzymane, Buforowanie, Błąd.
Moduł: Moje Programy (Budowniczy Treningów / Moje Rutyny)
Widok Listy (na TV): Lista nazw playlist (Nazwa, Ilość wideo, Czas trwania). Przycisk "Odtwórz Rutynę". Wyróżnienie wybranego. Stan Pusty ("Twórz rutyny na tablecie/desktopie").
Widok Tworzenia/Edycji (na Tablecie/Desktopie): Pole "Nazwa Rutyny". Dwie panele: Biblioteka (z wyszukiwaniem) | Bieżąca Rutyna (lista wideo). Przeciągnij i upuść. Ikony Usuń/Przestaw. Przycisk Zapisz/Anuluj/Usuń.
Moduł: Ulubione (Favorites)
Komponenty: Siatka/lista ulubionych kart wideo.
Stany: Stan Pusty ("Brak ulubionych").
Moduł: Profil i Ustawienia (Profil Użytkownika & Ustawienia - Priorytet: Tablet/Desktop)
Komponenty (Desktop/Tablet): Edycja Profilu (Imię, Zmień Hasło). Ustawienia (Autoodtwarzanie, Powiadomienia?). Historia Oglądania. Subskrypcja (jeśli jest). Przycisk Wyloguj.
Na TV: Pokaż Imię, Email, Wyloguj. Reszta - komunikat "Zarządzaj na tablecie/desktopie".
Moduł: Tryb Instruktora (Tryb Instruktora - Koncepcja, Tablet/Desktop)
Komponenty: Interfejs do wyboru treści. Panel sterowania odtwarzaniem na zewnętrznym ekranie (Odtwórz/Pauza/Następny). Wyświetlanie aktualnego wideo/timera.
B. Portal B2B (Desktop, UI w języku angielskim):
Historie Użytkowników (Przykłady):
Menadżer: Szybko dodać/dezaktywować klienta.
Właściciel: Łatwo załadować logo/wybrać kolor. Widzieć historię płatności.
Menadżer: Widzieć popularne wideo wśród klientów.
Moduł: Dashboard: Karty z kluczowymi metrykami (Całkowita/Ilość Aktywnych Użytkowników, Oglądane Wideo). Wykres aktywności (z wyborem okresu). Stany: Ładowanie, Pusty.
Moduł: Zarządzanie Użytkownikami: Tabela użytkowników (Imię, Email, Status, Daty). Paginacja, sortowanie, wyszukiwanie, filtry. Przycisk "Dodaj Użytkownika" -> Modal (Email, Imię?) -> Zaproś. (Możliwe) Zaproszenie Hurtowe (CSV Upload). Działania na użytkowniku (Edytuj?, Dezaktywuj/Aktywuj, Wyślij Zaproszenie Ponownie, Usuń + Potwierdź). Stan Pusty.
Moduł: Ustawienia Marki: Ładowanie Logo (przeciągnij i upuść, podgląd, usuń, wymagania). Wybierak Kolorów (wizualny + HEX). Okno Podglądu na Żywo. Przycisk "Zapisz Markę" (stany: Domyślny, Wyłączony, Ładowanie, Sukces/Błąd).
Moduł: Zarządzanie Treścią (Koncepcja): Przegląd Globalnej Biblioteki (możliwe, z opcją Ukryj?). Tworzenie/zarządzanie playlistami studiów (Wyróżnione?).
Moduł: Analiza / Raporty: Sekcje (Przegląd, Zaangażowanie Użytkowników, Wydajność Treści). Wybierak Zakresu Dat. Wykresy (Liniowe, Słupkowe). Tabele danych. Eksport (CSV/PDF?). Stany: Ładowanie, Pusty.
Moduł: Ustawienia Studia i Rozliczenia: Formularz Szczegóły Konta. Sekcja Subskrypcja (Plan, Cena, Data, Anuluj). Tabela Historii Rozliczeń (faktury + PDF). Sekcja Metoda Płatności (Informacje o karcie, Przycisk Aktualizuj -> Stripe Elements). (Możliwe) Członkowie Zespołu (tabela, Zaproś).
C. (Koncepcja) Portal Super Admin (Desktop, UI w języku angielskim):
Celem jest pokazanie dystrybutorom możliwości zarządzania.
Główne Koncepcje: Dashboard (ogólna statystyka). Zarządzanie Dystrybutorami (tabela, formularz Dodaj/Edycja). Zarządzanie Studiami (przegląd studiów). Zarządzanie Globalną Biblioteką Treści (tabela wideo, formularz Dodaj/Edycja Metadanych Wideo + Vimeo ID, zarządzanie kategoriami).
5. Styl i Odczucie:
Premium, czysty, nowoczesny, minimalistyczny. Intuicyjny UX.
B2C: Doskonała czytelność z odległości ("10-foot UI"), prostota nawigacji (prostsza niż Netflix/Apple TV).
B2B/Admin: Profesjonalny, niezawodny, efektywny.
Spójność. UI w języku angielskim. Responsywność.
6. Wynik Pracy (Deliverables):
Interaktywny Prototyp: W Figma (Wysoka wierność), główne przepływy użytkowników dla 3 interfejsów.
System Projektowy / UI Kit: W Figma (komponenty w stanach, style, kolory, siatka). Zorganizowane dla programistów.
Makiety Wszystkich Ekranów: W Figma (w tym stany puste, błąd, ładowanie).
(Opcjonalnie) Animacje: Propozycje kluczowych animacji.
Zorganizowane pliki Figma.
7. Budżet i Terminy:
Podaj swoją stawkę (godzinową lub stałą) za cały zakres.
Podaj szacunkowy czas realizacji.
Jesteśmy gotowi do omówienia etapów.
8. Złożenie Aplikacji:
Przedstaw portfolio (SaaS, UI TV, Systemy Projektowe).
Krótko o doświadczeniu z Figma i podobnymi projektami.
Twoja dostępność.
9. Ważne:
Wymagana bliska współpraca (regularne rozmowy).
Cenimy Twoje propozycje i ekspertyzę.
Język komunikacji: ukraiński.
Dziękuję!