Разработка дизайна (UI/UX) для веб-приложения B2B2B SaaS платформы "Виртуальный Пилатес-Инструктор"
Проект: Разработка дизайна (UI/UX) для веб-приложения B2B2B SaaS платформы "Виртуальный Пилатес-Инструктор".
1. Обзор Проекта:
Создаем B2B2B SaaS платформу для пилатес-индустрии. Мы предоставляем ее дистрибьюторам оборудования, которые предлагают ее пилатес-студиям как "white-label" решение (под брендом студии). Платформа содержит нашу премиальную видеотеку тренировок и "конструктор тренировок". Основной сценарий B2C – тренировки в студии на больших экранах (ТВ) ("10-foot UI").
Интерфейсы:
B2C Приложение: Для клиентов студий (TV/Большой экран в первую очередь).
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 / Большой экран в первую очередь, английский 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 (Первый вход): 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. Важно:
Нужна тесная сотрудничество (регулярные звонки).
Ценим ваши предложения и экспертизу.
Язык коммуникации: украинский.
Спасибо!
-
Разрабатываю дизайн (UI/UX) для веб-приложения B2B2B SaaS платформы "Виртуальный Пилатес-Инструктор". Имею опыт в разработке корпоративных сайтов на Wordpress и в тонкостях проектирования интерфейсов. Использую инструменты наподобие Figma для создания адаптивных макетов.
Я работаю за ставку $15/час.
-
Давайте отрисую, не проблема. Звонки тоже не проблема. Портфолио: https://www.figma.com/design/xXu7K1GQwMTf4u25kVJQqB/%F0%9F%93%A6-Projects?node-id=370-35207&t=3oyJY5Rl5ytyevn0-1
-
Добрый день, заинтересовал ваш проект. Буду рада сотрудничеству, напишите пожалуйста в личные сообщения фрилансера для связи.
-
Добрый день!
Создаю дизайн сайта, учитывая все пожелания.
Опыт более 8 лет.
ПортфолиоFreelancehunt
-
📌Здравствуйте.👋
⭐️Меня зовут,Андрей. Я UI/UX Designer
⭐️Являюсь основателем: Juicy-ART Digital Agency
⭐️Мой опыт работы: 12 лет+
• ➡️Могу показать работы именно по UI/UX
• 🎨Портфолио:Freelancehunt
• ✅Рейтинг работ на Behance (более 500.000 просмотров)
• 💼Больше работ тут:Dribbble
-
6276 118 0 Добрый день, Дмитрий 👋
Цена за 1 час работы 20$, сколько времени потребуется, сейчас трудно сказать, для оценки всего проекта было бы хорошо увидеть прототип или карту сайта.
Пример -Behance
Опыт с Figma значительный, постоянно работаю в этом редакторе.
Доступен с понедельника по субботу, воскресенье выходной. Готов уделять 6-8 часов в день.
Готов проводить регулярные звонки для обсуждения проекта.
Портфолио:
Freelancehunt
-
3649 135 4 9 Здравствуйте!
Готов заняться вашим проектом.
ПортфолиоBehance
Freelancehunt
Финальная стоимость работы после обсуждения и ознакомления с материалами.
Пишите! Буду рад сотрудничеству.
-
5692 24 0 Привет! 👋
Я не дизайнер, который просто рисует, а именно дизайнер, который ПРОЕКТИРУЕТ продукты, которые продают услуги бизнесов.
Делал частично подобную платформу
https://freelancehunt.com/showcase/work/movementors-fitness-platform/1850336.html
Пожалуйста, посмотрите мое портфолио и убедитесь в моей опытности в UX/UI сфере:
Freelancehunt
-
1710 23 0 Рейт: $20
Примерно 6–8 недель + время на согласование
Работал с большими дизайн-системами, различными SaaS и ERP государственного уровня.
С TV UI ранее не работал.
Доступность с понедельника.
Портфолио:
Behance
-
3918 44 0 Добрый день.
Ознакомился с ТЗ. Очень интересный и продуманный продукт с четкой логикой. Имею опыт работы с дашбордами, работаю в Figma, дизайн-системы и кликабельные прототипы.
По срокам и объему: ориентировочно 4–5 недель на полный цикл (B2C, B2B, Super Admin, UI Kit).
Стоимость — от 40к грн.
Могу присоединиться к работе уже в ближайшие дни. Если удобно, можем коротко обсудить этапы и формат сотрудничества.
-
1796 4 0 ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Здравствуйте! Вот мое портфолио по дизайну:
Behance
-
2455 19 1 Добрый день!
Большой и интересный проект. Разрабатывал адаптив для всех устройств, включая TV. Могу предоставить примеры в личные сообщения. Готов к регулярным звонкам, это будет еще лучше, так как будет меньше недоразумений. В общем, нужно больше обсудить Техническое Задание.
Предлагаю сроки и цену: 30 дней, 30.000 грн.
О себе:
опыт работы UX/UI Designer более 4 лет. Отлично знаю гайдлайны Apple HIG и Google Material Design. Также отлично владею Figma, в работе использую компоненты и auto-layout. В процессе работы создается полноценная дизайн-система, созданная на основе методологии атомарного дизайна. Поэтому впоследствии не возникает проблем с адаптацией под разные оси и устройства. Разработаю удобный и современный дизайн приложения, интерактивный прототип.
Работал с такими продуктами как SaaS, CRM, Стартапы, Крипто, Веб-приложения, Мобильные приложения.
…
Портфолио:Behance
Freelancehunt
Также мои последние работы:
https://www.kavil.com.ua/store
https://mars-group.webflow.io/
https://apps.apple.com/ua/app/tune-ai-song-music-maker/id6737691336?l=uk
https://apps.apple.com/ua/app/pillow-sleep-tracker/id878691772?l=uk
https://sceneseek.io/
-
628 3 0 Добрый день, интересует ваш проект - поэтому готов выполнить его качественно и в соответствии с вашими пожеланиями. Имею большой опыт - более 7 лет. Буду рад помочь с проектом, больше примеров работ могу предоставить в личные сообщения. Спасибо!
-
463 2 0 Здравствуйте, Дмитрий!
С удовольствием разработаю дизайн для вашего проекта в легком, удобном и понятном для пользователя виде.
Пример дизайна мобильного фитнес-приложения:Behance
Точная продолжительность и стоимость работы будут определены после обсуждения деталей проекта.
Приглашаю к обсуждению деталей и сотрудничеству!
-
7302 20 0
Актуальные фриланс-проекты в категории Дизайн интерфейсов (UI/UX)
Редизайн сайта
8000 UAH
Нужен UI/UX дизайнер для редизайна сайта туристического агентства Ищем опытного UI/UX дизайнера для полного редизайна сайта туристического агентства. Текущий сайт: https://patriot-tour.com/Что нужно сделать: Полный современный редизайн сайта. Продумать удобный UX и современный… Дизайн интерфейсов (UI/UX), Дизайн сайтов ∙ 1 день 15 часов назад ∙ 97 ставок |
Ищем UX/CRO-специалиста для аудита сайта
11 875 UAH
Ищем UX/CRO-специалиста для аудита сайта Ищем специалиста, который профессиональным взглядом проанализирует наш сайт с точки зрения пользователя и поможет понять, почему посетители не доходят до покупки. Необходимо: провести UX/CRO-аудит сайта; проверить удобство пользования,… Маркетинговые исследования, Дизайн интерфейсов (UI/UX) ∙ 2 дня назад ∙ 35 ставок |
UX/UI-дизайнер для редизайна интернет-магазина украинского бренда одеждыИщем опытного дизайнера для полного редизайна действующего интернет-магазина украинского бренда женской верхней одежды. Проект включает главную страницу, каталог, категории, карточку товара, корзину, личный кабинет, оформление заказа и другие информационные и служебные страницы.… Дизайн интерфейсов (UI/UX) ∙ 2 дня 16 часов назад ∙ 70 ставок |
Дизайнер и разработчик UX/UI Shopify 2.0 для веб-сайта устройства физической терапии
224 615 UAH
Я недавно создал компанию, продающую устройства для физиотерапии и восстановления, и мы ищем опытного UX/UI дизайнера + разработчика Shopify 2.0 для проектирования и создания высококонверсионного интернет-магазина. Цель не просто сделать сайт аккуратным. Нам нужен человек,… Дизайн интерфейсов (UI/UX), Дизайн сайтов ∙ 3 дня 7 часов назад ∙ 35 ставок |
Создать макет дизайна в Figma для корпоративного сайтаСоздать макет дизайна в Figma для корпоративного сайта. Структуру сайта в приложении. Сайт-донор отправлю в личные сообщения. Дизайн интерфейсов (UI/UX), Дизайн сайтов ∙ 5 дней 21 час назад ∙ 140 ставок |