IHAQ Donate: платформа, где донаты становятся интерактивом

Исследования и процесс

Мы начали с экспресс-аудита рынка донатов: изучили, как устроены ключевые сервисы, где перегруз интерфейса, а где исчезает эмоция. Затем включили более 30 прямых эфиров — от камерных стримов до крупных киберспорт-трансляций — и поминутно отмечали, в какие моменты чат «горит», а когда замирает. Главный вывод: зрителю нужна мгновенная обратная связь, а стримеру — минимум кликов и один экран управления.

В следующем блоке покажем, как эти инсайты превратились в единую дизайн-систему, интерактивные виджеты и адаптивный интерфейс, который запускает интерактив за три клика.

Проработка пользовательских путей

Каждый взнос зрителя не просто «пополняет копилку» — он запускает заранее настроенный сценарий: опрос, дуэль мемов, викторину или вспышку анимации. Донат становится кнопкой действия, а не строчкой в счёте.

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

Итог — путь зрителя сократился до 3 кликов, а стримеру хватило одной панели вместо трёх.

Вайрфреймы и быстрые проверки

На основе карт путей собрали «серые» вайрфреймы в Figma: без графики, только иерархия и элементы управления. Провели коридорные тесты на десяти пользователях — 9 из 10 без подсказок завершили сценарий супер-доната. После фидбека убрали лишнюю вкладку и добавили превью интерактива, чтобы зритель видел, как донат отобразится на стриме.

Дизайн-решение

Интерфейс строится вокруг двух ролей — стримера и зрителя — и подчинён правилу «одно действие — один фокус».

На экране стримера слева располагается мини-превью трансляции с оверлеем «Барометр настроений», по центру — вертикальная лента всех событий (донаты, супер-донаты, сообщения), а справа — динамические виджеты: текущая цель сбора, бегущие полосы голосований и дневной рейтинг донатёров. Настройки виджетов открываются слайдом снизу: стример остаётся в кадре и мгновенно вносит изменения без смены вкладок.

Глобальная навигация сведена к трём лаконичным иконкам — «Эфир», «Статистика», «Настройки». При запуске стрима меню схлопывается, освобождая площадь под контент, а статусы «ожидает модерации», «активен», «отработан» подсвечиваются фирменными цветами и группируются, чтобы не создавать визуальный шум. Сценарии удобно запускать и без мыши: горячие клавиши и тач-жесты позволяют работать с геймпада или планшета.

Единая дизайн-система

Мы объединили все экраны, интерактивы и графику в единую экосистему, чтобы продукт мог расти без стилистических конфликтов. В её основе — двенадцатиколоночная сетка с базовым шагом 8 px: она одинаково уверенно держит контент и на широких мониторах, и на ноутбуках. Тёмный, почти бархатный фон служит сценой, где главный актёр — сам стрим, а два фирменных акцента — сочный фиолетовый и лаймовый — моментально подсказывают, куда кликнуть или на что обратить внимание.

Мы настроили типографику так, чтобы крупные цифры донатов были читабельны даже с дивана, а подписи на телефоне оставались разборчивыми.

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

Кастомизация: темы, шрифты, формы, пресеты

По фидбеку от стримеров мы усилили кастомизацию. Теперь виджеты настраиваются не только по цвету: доступны пресеты тем, выбор шрифта и его размера для топ-донатеров, вариации прогресс-полос (полная/тонкая/ступенчатая), а также положение и стиль заголовков. Можно добавлять звуки, анимацию, свои картинки и гифки. Любое изменение видно сразу в превью, а глобальные стили можно переопределять точечно — для конкретного виджета или сценария.

Адаптивность: экран стримера и страница доната

Главный принцип — «никаких вторых экранов»: вся мощь управления эфиром умещается на одном мониторе, а отправить донат можно в три тапа с любого смартфона.

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

Страница доната мобильна по умолчанию: сумма, сообщение, выбор сценария и живое превью — на одном экране. Кнопка оплаты во всю ширину и зона тапа 48 px делают процесс одинаково удобным для большого пальца и курсора мыши.

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

Итерации после запуска: мини-панель управления

Первые прямые эфиры показали поведенческий паттерн: ведущие стараются не покидать основной экран и избегают переключений в полноэкранную панель. Мы зафиксировали десятки ситуаций, когда стример тянулся к горячим клавишам или держал рядом «временную» панель стороннего сервиса. Отсюда — продуктовая доработка: вынести ключевые действия в компактную «мини-панель», которая всегда поверх, не перекрывает важные зоны эфира и работает одной рукой.

Голос стримеров

За первый месяц публичной беты к IHAQ подключились и крупные контент-мейкеры с миллионной аудиторией, и e-sports-комментаторы, и узкие комьюнити-стримеры. Этот «срез» позволяет быстро проверять гипотезы и улучшать продукт. Ниже — несколько прямых цитат, которые показывают, за что платформу ценят разные типы авторов и где они ждут развития.

С клиентом стримят

Первые отзывы

Метрики собраны на выборке из 50 каналов, период январь–март 2025.