В работе

• Роль: продуктовый дизайнер
• Команда: 1 дизайнер, 1 бизнес-аналитик, продакт-менеджер, проджект-менеджер, 2 тестировщика, 3 фронт-разработчика, 2 бэк-разработчика
• Платформа: Web (Desktop)
• Макеты: Открыть в Figma ↗

В экосистеме ТАСС существовал старый «Конфигуратор» — инструмент для управления контентом с ограниченным набором функций, работавший только с основным сайтом. У каждого домена третьего уровня при этом были свои несвязанные между собой админки. Цель проекта — создать единую админку для всех цифровых проектов экосистемы ТАСС: с управлением контентом, созданием страниц, рубрикацией и конструированием новых доменов, полностью без участия разработчиков.

До запуска нового Конфигуратора управление контентом в ТАСС было фрагментированным:

• Старый Конфигуратор работал только с основным сайтом и не позволял создавать новые страницы (нужны были разработчики), заводить рубрики с подтягиванием из БД (структура была зашита в коде) или гибко редактировать блоки за пределами заранее заложенных.
• У доменов третьего уровня — отдельные несвязанные админки: доработка требовала ресурсов, а обучение сотрудников каждой новой системе — времени.
• ТАСС работает 24/7, страницы должны обновляться мгновенно, но единого инструмента для этого не было — редакторы переключались между системами, а для серьёзных правок звали разработчиков.

Полный список задач, которые должен закрыть новый Конфигуратор, — в разделе «Ожидаемый результат» ниже.

• Переключение между разделами, поиск блока, загрузка медиа — секунды, а не минуты.
• Визуальный стиль блоков меняется со временем и по проектам — административный интерфейс должен оставаться неизменным.
• Система должна одинаково хорошо работать и для лендинга из 3 блоков, и для проекта с сотнями страниц.
• Редакция и маркетинг — профессионалы в контенте, не технические специалисты; нужна прозрачная навигация и понятные подсказки.
• Неточности в легаси-коде всплывали по ходу разработки, ранее дизайн приходилось адаптировать «на лету».

Спроектировала интерфейс, сфокусированный на единстве, скорости и безопасности:

• Интервью с редакцией. Поговорила с главным редактором сайта, редактором выпуска и бильд-редактором. Выяснила: к текущим инструментам все уже привыкли, но очень хотели бы сами создавать новые рубрики и страницы без разработчиков. Отдельная боль — медиабиблиотека для загрузки: свалка неразобранного контента без единообразных тегов, из-за чего ничего не находилось по ключевым словам. Из-за этого бильд-редактор хранила фото и видео у себя на компьютере и кадрировала, подписывала и оформляла копирайт заново перед каждой загрузкой, вместо того чтобы искать уже готовое в библиотеке.
• Создание страниц и рубрик. Добавила возможность создавать страницы и рубрики с подтягиванием из БД — этого функционала не было в старом Конфигураторе.
• Отказалась от WYSIWYG в пользу таблиц и полей ввода. Визуальный стиль блоков ТАСС меняется почти с каждой сменой руководства — по статистике каждое новое руководство пересобирает визуал агентства заново. Сделай Конфигуратор визуально повторяющим текущий сайт — при следующем редизайне пришлось бы переделывать и админку. Табличный вид не завязан на актуальный визуал, а заодно избавляет от лишних кликов: весь контент блока — редактирование, удаление, перемещение — происходит внутри одной таблицы, без перехода между экранами. Мгновенную обратную связь компенсирует «Предпросмотр»: перед публикацией результат можно посмотреть сразу на трёх типах устройств — десктоп, планшет, мобильный.

Пример экрана редактирования блока в старой версии Конфигуратора

Пример табличного отображения редактирования блока с материалами в новой версии Конфигуратора

• Отказалась от модальных окон. Создание страницы, добавление блока, архивация — всё инлайн на странице редактирования, без потери контекста. Модалки — только для критических подтверждений (удаление) и обращений к бэкенду.

Компонент редактирования данных в ячейке таблицы

Пример экрана редактирования элемента в ячейке таблицы

• Прозрачный интерфейс — подсказки, превью-мокапы и описания для каждого компонента.

Компонент карточки-превью для добавления блока в конструктор страниц

• Одинаковая структура для всех доменов через сайдбар проектов.
• Медиавиджеты для фото, видео и SVG с учётом ограничений легаси-кода.

Часть user story для добавления и редактирования галереи

Компонент карточки медиавиджета и описание его сценариев работы

• User Stories для всех ролей — закрыли логические разрывы ещё до разработки.

админ видит и редактирует только те домены, к которым доступ открыл суперадмин; у суперадмина доступ есть ко всем доменам

User Stories для сценариев работы со страницей и черновиком страницы

(проект в разработке, часть решений ещё предстоит подтвердить после релиза)

• Редакторы впервые смогут самостоятельно создавать страницы и рубрики с подтягиванием из БД для любого проекта.
• Правки главных страниц будут публиковаться за секунды, а не часы — за счёт приоритизации и быстрой навигации.
• Разрозненные админки заменит один интерфейс — без переобучения под каждую систему.
• Маркетинг сможет запускать новые домены третьего уровня без разработчиков.
• Единая точка входа для администрирования всех цифровых проектов ТАСС.

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

А теперь расскажу подробнее об одном кейсе: модуль «Конструктор страниц»

Сотрудники без технических навыков должны были получить возможность самостоятельно: создавать страницы внутри любого проекта, добавлять и переставлять блоки из библиотеки ~30 типовых компонентов, редактировать метаданные (тайтл, описание, ключевые слова) и переносить устаревшие страницы в архив с возможностью восстановления — раньше всё это требовало участия разработчиков.

Спроектировала модуль «Конструктор страниц» как часть единого Конфигуратора:

• Создание страницы. Кнопка «Добавить» открывает мастер с минимальным набором полей — название и URL. После создания страница сразу доступна для наполнения.

• Добавление блоков. Библиотека блоков (~30 типов) с превью-мокапом, названием и описанием у каждого. Редактор перетаскивает нужный блок на страницу, настраивает через таблицы и поля ввода, проверяет через «Предпросмотр».

Экран выбора блока для добавления на страницу

Экран с добавленными на страницу новыми блоками

• Архивация. Кнопка «В архив» в списке страниц — архивные страницы скрыты с сайта, но доступны для восстановления в отдельной вкладке «Архив страниц».

Блок редактирования мета данных страницы, домена

Вкладка «Архив страниц» домена tass.ru

• Единая логика для всех проектов — один интерфейс и сценарии и для основного сайта, и для доменов третьего уровня.