Проект: Розробка дизайну (UI/UX) для веб-додатку B2B2B SaaS платформи "Віртуальний Пілатес-Інструктор".
1. Огляд Проекту:
Створюємо B2B2B SaaS платформу для пілатес-індустрії. Ми надаємо її дистриб'юторам обладнання, які пропонують її пілатес-студіям як "white-label" рішення (під брендом студії). Платформа містить нашу преміальну відеотеку тренувань та "конструктор тренувань". Основний сценарій B2C – тренування в студії на великих екранах (ТВ) ("10-foot UI").
Інтерфейси:
B2C Додаток: Для клієнтів студій (TV/Large Screen First).
B2B Портал: Для студій (Desktop First).
(Концепт) Super Admin Портал: Для нас (Desktop First).
Мета дизайну: Створити комплексний, якісний дизайн усіх ключових екранів та функцій для всіх трьох інтерфейсів, щоб показати повний потенціал дистриб'юторам. Дизайн має бути професійним, сучасним, інтуїтивним, з акцентом на UX для ТВ.
2. Цільова Аудиторія:
B2C (Клієнти Студій):
Пристрої: Основний – ТВ/Великий екран (перегляд з відстані). Вторинні – Планшет, Десктоп. Mobile – адаптивність.
Дизайн-Підхід: "10-foot UI" / "TV-first". Читабельність та керування з відстані (пульт/клавіатура).
B2B (Студії):
Пристрої: Desktop.
Дизайн: Чистий, професійний, орієнтований на керування даними.
(Концепт) Super Admin:
Пристрої: Desktop.
Дизайн: Функціональний, для керування платформою.
3. Ключова Концепція (White-Label):
Дизайн B2C та B2B має легко адаптуватися під бренд студії:
Динамічний Логотип (завантажується студією).
Динамічний Основний Колір (обирається студією).
Дизайн має бути нейтральним та гнучким.
4. Деталізовані Екрани та Функції (UI в макетах – англійською!):
A. B2C Веб-додаток (TV / Large Screen First, English UI):
Загальні Вимоги ("10-foot UI"): Великі шрифти (>20-32pt), високий контраст, проста навігація (D-pad/стрілки), чіткий фокус активного елемента, великі клікабельні зони (min 60x60px), неперевантажений інтерфейс, візуальний відгук.
User Stories (Приклади):
Клієнт: Легко знайти тренування на ТВ за допомогою пульта/фільтрів. Бачити чіткі підказки/таймер під час тренування.
Інструктор: Швидко запустити плейлист на головний екран студії з планшета.
Клієнт: Створити власну програму на планшеті та відтворити її на ТВ.
Модуль: Authentication & Onboarding
Login Screen: Лого студії, Email, Password (з видимістю), кнопка "Log In", "Forgot Password?". Стани: Default, Focused, Error, Loading. Екранна клавіатура (якщо потрібно).
Forgot Password Screen: Лого, Email, кнопка "Send Reset Link", "Back to Login". Стани: Default, Error, Success.
(Можливо) Sign Up Screen: Лого, Name, Email, Password/Confirm, кнопка "Sign Up", "Log In". Стани: Default, Focused, Error (валідація).
Onboarding Screens (First Login): 2-3 екрани (Welcome; інструкція з навігації пультом; можливо, вибір рівня). Кнопки "Next", "Skip", "Get Started".
Модуль: Головний Екран (Dashboard / Home)
Компоненти: Вертикальний список горизонтальних каруселей (Continue Watching, New Releases, Recommended, My Routines). Великі заголовки. Великі відео-картки (Thumbnail, Title, Duration).
Навігація: Стрілками між рядами та картками. Активна картка виділена (рамка/розмір).
Стани: Default, Focused. Empty State (якщо даних немає).
Модуль: Бібліотека (Library / Explore)
Компоненти: Grid View (великі картки, 3-4 в ряд). Categories/Filters Panel (бічна або верхня, великі елементи, чіткий вибір). Sorting (простий вибір). Search (іконка -> екран пошуку з великим полем, екранна клавіатура?, сітка результатів).
Стани: Активний фільтр/сортування. Стан "No results found".
Модуль: Плеєр (Video Player)
Компоненти: Відео на весь екран. Controls Overlay (з'являється/зникає, великі іконки: Play/Pause, Progress Bar, Time, Next/Prev, Title). Опціонально: Rewind/Forward (прив'язати до стрілок?), Favorite (при паузі), Settings (якість).
Стани: Playing, Paused, Buffering, Error.
Модуль: Мої Програми (Workout Builder / My Routines)
List View (на ТВ): Список назв плейлистів (Назва, К-ть відео, Тривалість). Кнопка "Play Routine". Виділення обраного. Empty State ("Create routines on tablet/desktop").
Create/Edit View (на Планшеті/Десктопі): Поле "Routine Name". Дві панелі: Library (з пошуком) | Current Routine (список відео). Drag-and-drop. Іконки Delete/Reorder. Кнопки Save/Cancel/Delete.
Модуль: Обране (Favorites)
Компоненти: Сітка/список обраних відео-карток.
Стани: Empty State ("No favorites yet").
Модуль: Профіль та Налаштування (User Profile & Settings - Пріоритет: Планшет/Десктоп)
Компоненти (Desktop/Tablet): Profile Edit (Name, Change Password). Settings (Autoplay, Notifications?). Watch History. Subscription (якщо є). Logout Button.
На ТВ: Показати Name, Email, Logout. Решта - повідомлення "Manage on tablet/desktop".
Модуль: Режим Інструктора (Instructor Mode - Концепт, Планшет/Десктоп)
Компоненти: Інтерфейс для вибору контенту. Панель керування відтворенням на зовнішньому екрані (Play/Pause/Next). Відображення поточного відео/таймера.
B. B2B Веб-Портал (Desktop, English UI):
User Stories (Приклади):
Менеджер: Швидко додати/деактивувати клієнта.
Власник: Легко завантажити лого/обрати колір. Бачити історію платежів.
Менеджер: Бачити популярні відео серед клієнтів.
Модуль: Dashboard: Картки з ключовими метриками (Total/Active Users, Videos Watched). Графік активності (з вибором періоду). Стани: Loading, Empty.
Модуль: User Management: Таблиця користувачів (Name, Email, Status, Dates). Пагінація, сортування, пошук, фільтри. Кнопка "Add User" -> Modal (Email, Name?) -> Invite. (Можливо) Bulk Invite (CSV Upload). Дії з користувачем (Edit?, Deactivate/Activate, Resend Invite, Delete + Confirm). Empty State.
Модуль: Branding Settings: Logo Upload (drag-and-drop, preview, remove, вимоги). Color Picker (візуальний + HEX). Live Preview вікно. Кнопка "Save Branding" (стани: Default, Disabled, Loading, Success/Error).
Модуль: Content Management (Концепт): Перегляд Global Library (можливо, з опцією Hide?). Створення/керування плейлистами студії (Featured?).
Модуль: Analytics / Reports: Розділи (Overview, User Engagement, Content Performance). Date Range Picker. Графіки (Line, Bar). Таблиці даних. Export (CSV/PDF?). Стани: Loading, Empty.
Модуль: Studio Settings & Billing: Форма Account Details. Секція Subscription (План, Ціна, Дата, Cancel). Таблиця Billing History (інвойси + PDF). Секція Payment Method (Card info, Update Button -> Stripe Elements). (Можливо) Team Members (таблиця, Invite).
C. (Концепт) Super Admin Portal (Desktop, English UI):
Мета: Показати дистриб'юторам можливості керування.
Основні Концепти: Dashboard (загальна статистика). Distributor Management (таблиця, форма Add/Edit). Studio Management (перегляд студій). Global Content Library Management (таблиця відео, форма Add/Edit Video Metadata + Vimeo ID, керування категоріями).
5. Стиль та Відчуття:
Преміальний, чистий, сучасний, мінімалістичний. Інтуїтивний UX.
B2C: Відмінна читабельність з відстані ("10-foot UI"), простота навігації (простіше за Netflix/Apple TV).
B2B/Admin: Професійний, надійний, ефективний.
Консистентність. UI англійською. Адаптивність (Responsive).
6. Результат Роботи (Deliverables):
Клікабельний Прототип: У Figma (High-fidelity), основні user flows для 3х інтерфейсів.
Дизайн-Система / UI Kit: У Figma (компоненти в станах, стилі, кольори, сітка). Організовано для розробників.
Макети Всіх Екранів: У Figma (включаючи empty, error, loading states).
(Опціонально) Анімації: Пропозиції ключових анімацій.
Організовані файли Figma.
7. Бюджет та Терміни:
Вкажіть вашу ставку (погодинну або фіксовану) за весь обсяг.
Вкажіть оцінку термінів виконання.
Готові обговорювати етапи.
8. Подача Заявки:
Надайте портфоліо (SaaS, TV UI, Design Systems).
Коротко про досвід з Figma та подібними проектами.
Ваша доступність.
9. Важливо:
Потрібна тісна співпраця (регулярні дзвінки).
Цінуємо ваші пропозиції та експертизу.
Мова комунікації: українська.
Дякую!