Mindbox: на 3 дня ускорили выпуск материалов журнала, разработав редактор контента на Laravel

TL;DR

Для b2b‑журнала Mindbox разработали собственный редактор контента на Editor.js с бэкендом на Laravel и админкой с разграничением прав. Авторы верстают статью за час вместо 3 дней, расходы на верстку силами агентства снизились до нуля.

Pitch

Mindbox — платформа автоматизации маркетинга, у компании есть журнал для управленцев. Раньше каждую статью верстало наше агентство вручную, в среднем 3 дня на материал, плюс правки. Мы перевели журнал с WordPress на Laravel, спроектировали собственный редактор на Editor.js с блочной структурой и админку с разграничением прав. Теперь авторы Mindbox собирают материалы сами за 1 час, без разработчиков, а контент хранится в JSON — это упростит будущие редизайны журнала.

Контекст клиента

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

Уже 13 лет Mindbox помогает брендам из e‑commerce, retail и FMCG увеличивать выручку от маркетинга. Среди клиентов — L’Oréal, Panasonic, Okko, «Связной», METRO, Burger King, «Детский мир» и другие крупные российские и международные компании.

У Mindbox есть журнал для управленцев — в нём публикуют интервью топов и владельцев бизнеса, бизнес‑истории, экспертные разборы и исследования.

Задача

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

Чтобы оптимизировать бюджет и повысить скорость выпуска материалов, клиент хотел отдать всю вёрстку в руки авторов.

Здесь важно отметить ещё один момент: раз в 4 года в журнале проводится редизайн. Это серьёзные расходы на переверстку при классическом хранении контента в HTML. Нужен был другой формат, который позволит быстрее и проще проводить редизайн.

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

Важный момент: разработка редактора — лишь первый этап. Глобальная цель проекта — перенести весь сайт Mindbox на более современный технологический стек. Поэтому перед нами также стояла задача объединить два бэкенда — тот, на котором будет работать новый журнал, и тот, на котором пока ещё существует остальной сайт.

Что сделали

Работа длилась восемь месяцев. Над проектом работала команда из 10 человек: 8 со стороны Intensa и 2 со стороны клиента.

Особенности проекта: методология p3express

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

Суть в том, чтобы разбить работу на несколько этапов. На первом — подготовка проекта. На двух последних — завершение работы и оценка результатов. Остальные этапы — циклы проектной работы длительностью от 2 до 4 недель, повторяются до завершения проекта. Каждый цикл делится на планирование задач, ежедневные и еженедельные действия и ревью в конце цикла.

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

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

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

На старте мы подготовили «Резюме проекта» — файл с ключевой информацией, чтобы у всех было общее понимание. Документ включает:

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

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

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

1. Определить чёткий перечень требований к системе управления контентом.
2. Провести сравнительный анализ наиболее подходящих систем.
3. Настроить демо‑версию, чтобы стейкхолдеры могли оценить технологию руками.

Этап 1. Хотели выбрать CMS для редактора, но выбрали фреймворк

Для общего понимания: весь сайт Mindbox, включая журнал, работал на WordPress — это система управления сайтом и контентом. У WordPress довольно много ограничений, а клиенту важно внедрять нестандартные механики. На WP это возможно только ценой костылей — неудобных решений, которые усложнят масштабирование системы в будущем.

Поэтому мы решили, что будем переносить весь сайт на Laravel — PHP‑фреймворк, на котором можно создать всё, что нужно бизнесу. Laravel разработан специально для сложных сайтов и помогает упростить многие процессы: кэширование, логирование, работу с базой данных. Эти инструменты уже есть во фреймворке, поэтому их не нужно писать с нуля. Что не менее важно — для Laravel существует огромное количество open source библиотек, готовых решений в открытом доступе, которые позволяют ускорить и упростить разработку.

Теперь о редакторе. Изначально мы с клиентом планировали делать редактор на базе Headless CMS — это система управления контентом, которая работает отдельно от всего сайта. Здесь можно собирать статьи из готовых компонентов и хранить контент в виде данных, а не в виде HTML‑кода. Такой формат хранения позволяет легко и разом редизайнить все материалы.

Например, через несколько лет мы захотели поменять в статьях один визуальный блок. Если статьи хранятся в HTML — придётся заходить в каждую и переверстывать. Если в виде данных — мы можем поменять визуальный блок сразу для всех материалов.

Мы составили для клиента таблицу, где проанализировали 9 подходящих Headless CMS: что они могут и не могут, какие есть фичи.

В результате столкнулись с ограничениями, которые не подходили под задачи проекта.

Во‑первых, в Headless CMS нельзя реализовать сложные кастомные компоненты — такие, как сайдбар, который часто используется в статьях Mindbox.

Во‑вторых, клиент хотел перенести на Headless CMS старые материалы, которые хранятся в HTML. Здесь возникали сложности с хранением структуры данных и расширением пользовательского интерфейса под кастомные поля со сложной логикой. Например, на перенесённых статьях нельзя было настроить автоматически генерируемую ссылку на материал или кнопку для генерации черновика.

И последнее, не по значимости: был риск, что Headless CMS могут заблокировать в связи с санкциями, а русских аналогов нет.

Нам пришлось на ходу придумывать новое решение. Вместо того, чтобы интегрировать на сайт стороннюю Headless CMS, мы предложили клиенту разработать собственный редактор на базе Editor.js, а общий бэкенд приложения реализовать на Laravel — без изменения сроков и стоимости проекта.

Этап 2. Разработали редактор

Создали административную панель. Через неё можно задавать настройки материалов, управлять правами пользователей.

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

Создали редактор материалов. Для этого взяли Editor.js — модульный визуальный редактор, который как раз нужен для вёрстки и редактирования. Основная концепция Editor.js — блочная структура. Можно отдельно редактировать каждый элемент статьи: абзац, заголовок, список, изображение.

Основные компоненты, которые можно использовать в статьях: лид, авторы, сайдбар, крик, ссылки, фактоиды, изображения, графики, таблицы, мнение, подписи.

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

Мы также воссоздали прежнюю вёрстку журнала: сделали так, чтобы все компоненты, которые раньше верстались через HTML, можно было реализовать в рамках компонентов редактора.

Сложность разработки в том, что все блоки редактора должны иметь свою логику. Например, у нас есть блок с графиком: если график слишком большой, у него должен быть скролл. Либо есть блоки, при нажатии на которые должно что‑то произойти. Нам нужно было совместить логику блоков с логикой редактора — чтобы они работали как единое целое.

Подготовили инструкцию. Когда мы закончили разработку, сделали для авторов текстовую и видео‑инструкцию, как пользоваться редактором. Также описали особенности и ограничения эдитора, которые нужно учитывать при вёрстке статей.

Результат

• Ускорили время выпуска материалов на 3 дня.
• Теперь авторы могут за 1 час самостоятельно сверстать статью.
• Финансовые расходы на вёрстку, которую делало наше агентство, сократились до нуля.
• Вносить изменения в материал можно без помощи разработчиков — авторы сами могут менять параметры, пробовать разные блоки, переставлять их местами, выделять шрифт.
• В новом журнале контент хранится в формате JSON — он позволит упростить редизайн журнала в будущем.
• Решили технически непростую задачу — объединили 2 бэкенда. Клиенту не пришлось ждать перенос всего сайта на новый стек: он смог быстрее получить результат именно по журналу Mindbox.

Метрика	Значение
Время вёрстки одного материала	1 час (было 3 дня)
Расходы клиента на вёрстку силами агентства	0 ₽
Формат хранения контента	JSON вместо HTML

Записали скринкаст с возможностями редактора для создания статей и кейсов: видео на YouTube.

Отзыв клиента

Сёма Сёмочкин, издатель Mindbox:

Перед нами стояли две задачи: 1. Разработать админку, в которой авторы смогут самостоятельно редактировать и публиковать материалы. 2. Подготовить журнал к будущим редизайнам, так, чтобы не приходилось руками переверстывать ранее выпущенные материалы. Кажется, и для нас, и для Intensa это был первый опыт решения подобных задач. Но вместе мы справились 🙂 Да, потратили больше денег и сил, чем изначально планировали. После релиза сделали общий чат с авторами и ещё пару месяцев ловили баги и упущенные сценарии. Но какая альтернатива была? Затянуть с релизом и доводить до идеала — и всё равно бы всего не предусмотрели и пришлось бы дорабатывать. Понравилась педантичность в подходе наших менеджеров: Ирины Мигуновой и Кирилла Трофимова. Всегда было понятно, что происходит в проекте. Не я пушил, меня пушили.

Где проект сейчас

Сайт Mindbox состоит из двух частей: основной сайт (главная, продукты, клиенты, калькулятор) и блог, он же Mindbox журнал. Задача по переносу журнала на новую платформу выполнена. Перенос остальной части сайта на Laravel — в процессе. Сейчас сайт одновременно работает и на WordPress, и на Laravel.

Команда

• Ирина Мигунова — менеджер проектов
• Кирилл Трофимов — куратор кейса со стороны Intensa

Технологии

• Backend: Laravel (PHP‑фреймворк)
• Редактор: Editor.js (модульный визуальный редактор с блочной структурой)
• Формат хранения контента: JSON (вместо HTML — упрощает будущие редизайны)
• Архитектура: объединение двух бэкендов (Laravel для журнала + остаточный WordPress для основного сайта)
• Методология управления проектом: p3express

Ссылки

• Публикация: https://intensa.ru/⁠blog/⁠na‑3‑dnya‑uskorili‑vypusk‑materialov‑dlya‑zhurnala‑mindbox‑razrabotav‑redaktor‑kontenta‑na‑laravel/
• Сайт клиента: https://mindbox.ru
• Видео‑скринкаст редактора: https://www.youtube.com/⁠embed/⁠ffORy0B0ae0