Ovič

Select Language

5 лет создаю цифровые продукты для различных платформ. В багаже разнообразные решения для разных продуктов - от retail, ecom и sporttech до horeca и edtech проектов. Сейчас активно занимаюсь внедрением различных LLM и созданием новых пайплайнов для улучшения дизайн-процессов.

Телеграм

Select Language

Телеграм

Quadro TV

Dev

Контекст продукта

Quadro TV — B2B2C платформа для управления ТВ-контентом в отелях, ресторанах и других заведениях. Основной продукт: ambient 4K видеопотоки на экранах заведения. Поверх этого — веб-панель для клиентов: тикеры, рекламные баннеры, видео, аудиодорожки. Отдельная панель для управления клиентами и аккаунтами на стороне компании.

Контекст продукта

Моя роль

Продуктовый дизайнер полного цикла с нуля. Вайрфреймы, флоу, полный UI, мобильная адаптация, звонки с клиентами, итерации через тестирование. Каждый экран пользовательской панели — от простых форм до сложных юридических требований и граничных кейсов без очевидного решения.

Моя роль

Потенциальные проблемы

Регистрация юрлица — много данных, легко потерять контекст

Форма собирает большой объём данных, особенно для юридических лиц. Без структуры пользователь теряет ориентацию и не понимает сколько ещё осталось заполнить.

Потенциальные проблемы

Регистрация юрлица — много данных, легко потерять контекст

Много обязательных полей без понимания прогресса

Риск случайно изменить данные введённые на предыдущих шагах

Нет визуального разделения между тем что уже сделано и тем что впереди

Регистрация юридического лица — это не три поля. Здесь нужны реквизиты, контакты, юридические данные. Пользователь который не видит конца формы начинает нервничать и бросает. При этом данные введённые раньше должны оставаться видимыми — иначе приходится листать назад чтобы убедиться что всё правильно.

Решение

Многошаговая форма с индикатором прогресса и заблокированными предыдущими полями

Разбил регистрацию на последовательные шаги с индикатором вверху. Поля заполненные на предыдущих шагах видны но заблокированы для редактирования.

Решение

Многошаговая форма с индикатором прогресса и заблокированными предыдущими полями

Индикатор прогресса вверху — пользователь всегда знает где он находится

Предыдущие поля заблокированы и видны — контекст сохранён, случайные изменения исключены

Все поля обязательные, отмечены звёздочками — никакой неопределённости

Пользователь движется вперёд не теряя из виду что уже ввёл. Заблокированные поля дают уверенность: данные на месте, ничего не пропало. Весь проект построен на библиотеке Gravity UI — единый язык компонентов и экономия времени при разработке в условиях жёстких сроков.

Потенциальные проблемы

Много типов контента на одном экране — легко потеряться

Пользователь управляет устройствами, тикерами, баннерами, видео и аудио одновременно. Без структуры это превращается в нечитаемую стену.

Потенциальные проблемы

Много типов контента на одном экране — легко потеряться

Разные типы контента визуально не разделены

Нет быстрого способа понять сколько слотов использовано

Базовые параметры каждого элемента скрыты — нужно открывать каждый

Аудитория продукта — владельцы и администраторы заведений, не технические пользователи. Им нужно быстро ориентироваться без чтения каждого лейбла. Если дашборд требует изучения — он уже проигрывает.

Решение

Цветовое кодирование по типам и ключевые параметры прямо на карточке

Каждый тип контента получил свой цвет. Ключевые параметры видны инлайн на карточке без открытия.

Решение

Цветовое кодирование по типам и ключевые параметры прямо на карточке

Каждый тип контента получил свой цвет. Ключевые параметры видны инлайн на карточке без открытия.

Цветовые секции для каждого типа контента — ориентация с первого взгляда

На каждой карточке: устройства, временные слоты, дни недели, скорость, пауза

Счётчик активных элементов в правом верхнем углу каждой секции — остаток слотов всегда виден

Поддержка доступна прямо с главного экрана через модал: Telegram, Viber, Max или форма обратной связи. Email подтягивается из аккаунта автоматически — один шаг убран из и без того простого флоу.

Потенциальные проблемы

Финансовая информация разбросана — непонятно сколько осталось и куда уходят деньги

Пользователю нужно видеть и текущее состояние аккаунта, и историю списаний. Без разделения это мешается в одну кашу.

Потенциальные проблемы

Финансовая информация разбросана — непонятно сколько осталось и куда уходят деньги

Текущий план и использованные слоты не видны сразу

История транзакций недоступна без обращения в поддержку

Нет быстрого способа пополнить баланс или сменить план

Владелец заведения должен понимать за что он платит и сколько у него осталось — без звонков в поддержку и без поиска по интерфейсу. Финансовая непрозрачность создаёт недоверие к продукту.

Решение

Два таба — обзор и история — каждый отвечает на свой вопрос

Разделил финансовый раздел на два независимых таба с чёткой логикой каждого.

Решение

Два таба — обзор и история — каждый отвечает на свой вопрос

Разделил финансовый раздел на два независимых таба с чёткой логикой каждого.

Обзор: текущий план, использованные слоты по каждому типу контента, баланс и ежемесячное списание

История: транзакции с датой, суммой, остатком, статусом и комментарием — с пагинацией

Кнопка пополнения всегда видна, смена плана доступна внизу обзора

Пользователь видит полную картину без обращения в поддержку. Каждое списание объяснено. Баланс и лимиты на виду. Апгрейд плана — один клик от текущего экрана.

Потенциальные проблемы

Три независимых окна на экране телевизора — настроить всё сразу невозможно

Экран ТВ разделён на три зоны, каждая настраивается отдельно. Без структуры пользователь теряется в параметрах и не понимает как финальный результат будет выглядеть на экране.

Потенциальные проблемы

Три независимых окна на экране телевизора — настроить всё сразу невозможно

Три зоны с разными параметрами — сложно держать в голове одновременно

Нет способа увидеть результат до публикации

Цвета, размер шрифта, скорость скролла — всё нужно угадывать

Создание баннера — самый сложный флоу в приложении. Пользователи которые не уверены в себе технически легко бросают на середине если не понимают что получится в итоге.

Решение

Пошаговый модал с живым превью на каждом шаге

Разбил настройку на последовательные шаги по одной зоне за раз. Живое превью показывает результат в реальном времени внизу модала.

Решение

Пошаговый модал с живым превью на каждом шаге

Шаговый индикатор вверху — одна зона за раз, никакой перегрузки

Контекстные настройки для каждой зоны: текст, скорость, шрифт, цвета, задержка

Живое превью внизу — пользователь видит как баннер будет выглядеть на экране до публикации

Сложная функция которая не ощущается сложной. Пошаговая структура убирает необходимость держать всё в голове одновременно. Превью убирает страх ошибиться.

Результат

Продукт готов к запуску — сложность спрятана за простотой

Десятки граничных кейсов, юридические требования, жёсткий бюджет и пользователи которым всё должно быть понятно без инструкции. Результат — продукт который выглядит простым потому что думать за пользователя пришлось заранее.

Результат

Продукт готов к запуску — сложность спрятана за простотой

Полный цикл от вайрфреймов до готового UI включая мобильную адаптацию

Продукт прошёл тестирование и находится на финальной стадии перед запуском

Запускается через крупную устоявшуюся компанию с чёткими рыночными амбициями

Не всё можно показать на этом этапе. После запуска — полный кейс со всеми деталями, отклонёнными решениями и тем что осталось за кадром.

Наверх