Раньше новости публиковались на портале Space, который обеспечивал вендор. Компания приняла решение отказаться от Space и сделать новостной портал в кабинете сотрудника, который явлется инхаус-разработкой

Спроектировал конструктор, который позволил запустить новый сервис. Благодаря этому компания полностью отказалась от финансирования Space, а редакторы на 50% ускорили создания новостей в конструкторе

Проблематика

Результат

Конструктор новостных страниц

Контекст

Недавно в Билайне было 2 внутренних портала – Spaсe и Личный Кабинет Сотрудника (ЛКС).
Space – это устаревшее вендорское решение, а ЛКС – целевое и собственное. У компании была цель отказаться от Space, который значительно уступал ЛКС по сервисам для сотрудников и трафику. Единственное что было в Space, чего не было в ЛКС – внутренний новостной сервис.

Перед моей командой была поставлена задача перенести новостной сервис в ЛКС, чтобы компания могла отключить Space. На проекте было 2 продуктовых дизайнера – я, который отвечал за конструктор новостных страниц, и мой коллега, который создавал отображение новостей в ЛКС.

Помимо меня над проектом работали PO, архитектор, системный аналитик, 3 фронтенд- и 3 бэкенд- разработчика, QA-инженер

Как я приступил к задаче

В результате исследования также выявил боли пользователей:

После брифования заказчика зафиксировал проблемы бизнеса и информацию по целевой аудитории – редакторам Внутрикома (отдел внутренних коммуникаций). На следующем этапе провёл
5 экспертных интервью и зафиксировал потребности своих пользователей:

Главное наблюдение – редакторы находятся в постоянном потоке. У них расписан контент-план
на недели вперёд и они должны чётко ему следовать. В их работе не должно быть промедлений. Работая со Space, они теряют своё рабочее время из-за устройства конструктора. Поэтому мне предстояло ускорить их рабочий процесс, сделав более понятный и удобный инструмент

Работа над концепцией

Такое решение было бы привычным для редакторов, которые создавали контент похожим образом на Space. Однако в отличие от решения as is в новой версии оставлен только необходимый функционал, унифицированы точки входа в сценарии и сам редактор был бы более гибким в контексте работы с контентом. При этом такой редактор можно было бы реализовать на базе open source-редактора Lexical, который можно адаптировать под нашу дизайн-систему, поскольку оба сделаны на react.

Прежде всего изучил, что вообще представляют из себя новости и как они создаются.
Для этого провёл конкурентный анализ новостных порталов и конструкторов контента

Опыт некоторых продуктов показал, что для новости достаточно нескольких элементов:
1) Лид-превью
2) Заголовок
3) Изображние
4) Текст

То есть, при такой структуре можно было бы обратиться к форме, как к редактору. Однако заказчики хотели гибкий инструмент, который бы позволил создавать более разнообразные и привлекательные новости для сотрудников. Так я стал рассматривать другой вариант – wysiwyg-редактор.

Так я адаптировал редактор под дизайн-систему и продемонстрировал его на встрече с заказчиком

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

Несмотря на плюсы, от такого подхода пришлось отказаться.
Во-первых, wysiwig-редактор создавал предпосылки для того, что у новостей может быть нарушен стиль. Сейчас у редакторов пока два стиля текста и, в целом, небольшой функционал. Однако в будущем с расширением механик им придётся более тщательно следить за отступами, типографикой и тд., чтобы избежать хаоса в контенте.
Во-вторых, заказчики озвучили, что в будущем хотят использовать конструктор для других типов контента – инструкций, опросов и лендингов.

На MVP я выделил самый необходимый функционал по шрифтам, форматированию
и вставке – все поместиллось в тул-бар без скрытия

В этой версии создание новости происходит в wysiwyg-редакторе

Создание новости: основной контент

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

Создание новости: информация о публикации

Для справочной информации: рубрик, категорий, ЦА, авторства был спроектирован отдельный раздел, который обязательно должен заполнить редактор перед публикацией. Все данные динамически обновлялись из справочников, за которыми следили администраторы в своём интерфейсе

Закрепление новости

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

Создание новости: обложка

Создание новости разделено на 3 шага, которые размещены в табах. В первом табе редактор оформляет обложку: название, описание и изображение

Список новостей

Конструктор, как приложение, находится внутри административной панели. Мы отделили его
от новостного портала, поскольку хотели сделать коммунальным компонентом. Если потребуется,
то на другой витрине тоже можно будет делать контент

Сузил сетку и скрыл по умолчанию боковую навигацию, чтобы сосредоточить внимание редактора на контенте

На MVP оставили 3 самых важных блока для создания новости

По умолчанию в этом табе выбраны блоки с изображением и текстом

В новой версии отображается дата смены статуса, автор и направление (сфера), к которому относится новость

Конструктор состоит из блоков, которые имеют общие (перемещение, удаление и др.)
и уникальные механики

Этот блок нужен для того, чтобы группировать новости и собирать
по ним аналитику

В режиме создания редактор свободно перемещается между табами

Добавил превью карточки новости, чтобы редактор сразу видел результат

В этой итерации сделали простое логирование, чтобы было видно, кто создал, редактировал и опубликовал

В отдельном модальном окне открывается список новостей
с возможностью их закрепления

Гибкая настройка авторства – можно указать сотрудника или подразделение

Теперь можно вручную настраивать новости в топе. Без повторной публикации

На MVP сделали фильтры
по основным направлениям
и статусам

По сравнению с прошлой версией чётко выделил основное действие
на странице со списком

Здесь редактор настраивает, кому новость будет отображаться в ленте

Провёл модерируемое u-тестирование блочного конструктора и получил следующие метрики:
SR = 88,2%
SUS = 94
SEQ = 6,4 / 6,5 / 6,3

Проверка решения 

Если резюмировать – пользователи очень положительно восприняли новое решение. Поэтому после тестирования и небольших правок я передал в разработку макеты нового блочного конструктора

Итоги