Wink Админка: витрина, услуги и устройства
Админка Wink — рабочее место тех, кто управляет тем, что видит зритель, и оборудованием сервиса: витриной, услугами, A/B-тестами и приставками. Вторая половина системы управления сервисом; первая — Wink CMS с контентом и договорами — описана отдельным кейсом.
Контекст
Зритель видит витрину: баннеры на главной, подборки-коллекции, набор платных услуг. Всё это нужно собирать, публиковать и проверять на экспериментах, а за приставками и их настройками — следить. Системы под эти задачи не было — её строили с нуля вместе с CMS.
Роль и период
UX/UI-дизайнер, РТК ИТ, 2021–2023. Проектировал интерфейсы админки с нуля: конфигуратор экранов, услуги, A/B-тесты и управление устройствами.
Задача
Дать редакторам и инженерам один инструмент с одинаковым поведением для очень разных объектов — баннера, коллекции, услуги, эксперимента, приставки. Форм много, они длинные, а результат публикации видит зритель, так что интерфейс должен не давать потеряться в полях и не давать опубликовать что-то по ошибке.
Решения
Каждое решение — по одной схеме: проблема, которая мешала работе редактора или инженера → что сделано в макетах → почему.
Один каркас для разных объектов
Пять очень разных объектов — баннер, коллекция, услуга, эксперимент, приставка. Формы длинные, а результат публикации видит зритель.
Меню верхнего уровня по работе: конфигуратор экранов, услуги, учётные записи, администрирование, справочники, управление импортом, RDM. Все объекты редактируются по одной схеме: шапка с названием и статусом (опубликовано или нет), форма из сворачиваемых блоков, «Сохранить» и «Отмена» закреплены внизу.
Публикация — отдельное действие рядом с сохранением, поэтому черновик не уйдёт зрителю нечаянно.
Витрина: баннеры и коллекции
Баннеры и подборки нужно собирать и проверять до того, как их увидит зритель; ручной список для коллекции не масштабируется.
Баннер из трёх блоков: параметры показа (возрастное ограничение, детский и эротический контент, рейтинги, операторы, ссылка), лейблы и «Стиль и изображения» (размер, цвет подложки, загрузка картинок). Предпросмотр рядом с настройками. Коллекция описывается правилами: тип контента, сортировка и условия фильтрации (атрибут, признак исключения, тип фильтра, значение); типов контента можно добавить несколько.
Предпросмотр рядом: результат виден глазами, не нужно публиковать, чтобы проверить.
Баннер
Коллекция
Услуги
Карточка услуги — самая длинная форма: основные поля, оферта, идентификаторы по филиалам, особенности, изображения.
Длинные блоки сворачиваются, форма читается по разделам: основные поля, оферта, внутренние идентификаторы по макрорегиональным филиалам, особенности услуги, загрузка изображений с предпросмотром.
Услуга
A/B-тесты и устройства
Длинный тест с несколькими группами превращается в простыню; инженеру по приставкам нужно всё об устройстве в одном месте.
A/B-тест собирается из групп: у каждой свой процент попадания и набор DRM-платформ по типам (ТВ-каналы, VOD-контент), распределение пользователей можно включить автоматическим; группы сворачиваются. В разделе RDM карточка устройства собирает MAC-адрес, серийный номер, модель, версию ПО, режим обновления, учётную запись и JSON-конфигурацию с редактированием.
Команды устройству и отключение обновлений вынесены в верх карточки, потому что ими пользуются чаще остальных полей.
A/B-тест
Устройство (RDM)
Результат
Админка спроектирована и запущена с нуля как часть системы управления сервисом Wink: пять разных типов объектов редактируются по одной схеме.
Баннер, коллекция, услуга, A/B-тест и устройство устроены одинаково, поэтому новому сотруднику не нужно заново учить интерфейс под каждый объект.
Публикация отделена от сохранения, а предпросмотр стоит рядом с полями там, где результат виден глазами.
Сложные объекты — коллекции с условиями фильтрации, тесты с группами и DRM-платформами, JSON-конфигурация устройств — разложены по сворачиваемым блокам, а не по одной бесконечной форме.
По оценке команды, за первые полгода после запуска:
- случаев нечаянной публикации черновика не было;
- баннер собирают и проверяют примерно за 15 минут вместо 40;
- новому редактору хватает около недели, чтобы начать работать самостоятельно (вместо двух).